Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(core,platform): radio a11y improvements #12525

Merged
merged 8 commits into from
Oct 8, 2024
Merged

fix(core,platform): radio a11y improvements #12525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
380a2bc
fix(core,platform): radio a11y improvements
mikerodonnell89 Oct 2, 2024
b30d470
fix: pr comments
mikerodonnell89 Oct 4, 2024
2871dd4
fix(platform): pr comments
mikerodonnell89 Oct 7, 2024
187d2bf
fix: forgot a few lines
mikerodonnell89 Oct 7, 2024
494feb9
fix: still missing things
mikerodonnell89 Oct 7, 2024
f7c427b
Merge branch 'main' into fix/11281
mikerodonnell89 Oct 7, 2024
e57ea42
Merge branch 'main' into fix/11281
mikerodonnell89 Oct 8, 2024
65cbbb5
Merge branch 'main' into fix/11281
mikerodonnell89 Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 22 additions & 4 deletions ...yline/examples/list-byline-selection-example/list-byline-selection-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,44 @@ <h4>With Checkboxes</h4>
</li>
}
</ul>
<h4>With Radio Buttons</h4>
<h4 id="with-radio-buttons">With Radio Buttons</h4>
<ul fd-list [byline]="true" [selection]="true">
<li fd-list-item [selected]="selectionValue === 'radio1'">
<fd-radio-button name="radio1" id="radio1" value="radio1" [(ngModel)]="selectionValue"></fd-radio-button>
<fd-radio-button
name="radio1"
id="radio1"
value="radio1"
[(ngModel)]="selectionValue"
aria-labelledby="radio1 with-radio-buttons"
></fd-radio-button>
<span fd-list-thumbnail><fd-icon glyph="calendar"></fd-icon></span>
<div fd-list-content>
<div fd-list-title>Title 1</div>
<div fd-list-byline>Byline 1</div>
</div>
</li>
<li fd-list-item [selected]="selectionValue === 'radio2'">
<fd-radio-button name="radio1" id="radio2" value="radio2" [(ngModel)]="selectionValue"></fd-radio-button>
<fd-radio-button
name="radio1"
id="radio2"
value="radio2"
[(ngModel)]="selectionValue"
aria-labelledby="radio2 with-radio-buttons"
></fd-radio-button>
<span fd-list-thumbnail><fd-icon glyph="activate"></fd-icon></span>
<div fd-list-content>
<div fd-list-title>Title 2</div>
<div fd-list-byline>Byline 2</div>
</div>
</li>
<li fd-list-item [selected]="selectionValue === 'radio3'">
<fd-radio-button name="radio1" id="radio3" value="radio3" [(ngModel)]="selectionValue"></fd-radio-button>
<fd-radio-button
name="radio1"
id="radio3"
value="radio3"
[(ngModel)]="selectionValue"
aria-labelledby="radio3 with-radio-buttons"
></fd-radio-button>
<span fd-list-thumbnail><fd-icon glyph="employee"></fd-icon></span>
<div fd-list-content>
<div fd-list-title>Title 3</div>
Expand Down
31 changes: 26 additions & 5 deletions libs/docs/core/list/examples/list-selection-example/list-selection-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,40 @@ <h3>Compact multi-selection list</h3>
</li>
}
</ul>
<h3>Cozy single-selection list</h3>
<h3 id="cozy-single-selection-list">Cozy single-selection list</h3>
<ul fd-list [selection]="true">
<li fd-list-item [selected]="selectionValue === 'radio1'">
<fd-radio-button name="radio1" id="radio1" value="radio1" [(ngModel)]="selectionValue"></fd-radio-button>
<fd-radio-button
name="radio1"
id="radio1"
value="radio1"
[(ngModel)]="selectionValue"
aria-labelledby="radio1 cozy-single-selection-list"
></fd-radio-button>
<span fd-list-title> List item 1 </span>
</li>
<li fd-list-item [selected]="selectionValue === 'radio2'">
<fd-radio-button name="radio1" id="radio2" value="radio2" [(ngModel)]="selectionValue"></fd-radio-button>
<fd-radio-button
name="radio1"
id="radio2"
value="radio2"
[(ngModel)]="selectionValue"
aria-labelledby="radio2 cozy-single-selection-list"
></fd-radio-button>
<span fd-list-title> List item 2 </span>
</li>
<li fd-list-item [selected]="selectionValue === 'radio3'">
<fd-radio-button name="radio1" id="radio3" value="radio3" [(ngModel)]="selectionValue"></fd-radio-button>
<fd-radio-button
name="radio1"
id="radio3"
value="radio3"
[(ngModel)]="selectionValue"
aria-labelledby="radio3 cozy-single-selection-list"
></fd-radio-button>
<span fd-list-title> List item 3 </span>
</li>
</ul>
<h3>Compact single-selection list</h3>
<h3 id="compact-single-selection-list">Compact single-selection list</h3>
<ul fd-list [selection]="true" fdCompact>
<li fd-list-item [selected]="selectionValueTwo === 'radio1'">
<fd-radio-button
Expand All @@ -44,6 +62,7 @@ <h3>Compact single-selection list</h3>
value="radio1"
fdCompact
[(ngModel)]="selectionValueTwo"
aria-labelledby="radio12 compact-single-selection-list"
></fd-radio-button>
<span fd-list-title> List item 1 </span>
</li>
Expand All @@ -54,6 +73,7 @@ <h3>Compact single-selection list</h3>
value="radio2"
fdCompact
[(ngModel)]="selectionValueTwo"
aria-labelledby="radio22 compact-single-selection-list"
></fd-radio-button>
<span fd-list-title> List item 2 </span>
</li>
Expand All @@ -64,6 +84,7 @@ <h3>Compact single-selection list</h3>
value="radio3"
fdCompact
[(ngModel)]="selectionValueTwo"
aria-labelledby="radio32 compact-single-selection-list"
></fd-radio-button>
<span fd-list-title> List item 3 </span>
</li>
Expand Down
14 changes: 7 additions & 7 deletions libs/docs/core/radio/examples/radio-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ <h4 fd-form-header>Radio Buttons Examples</h4>
</div>
<div fd-form-item>
<fd-radio-button value="val2" [id]="'radio-2'" name="radio-name-1" [(ngModel)]="optionVariable">
Option One
Option Two
</fd-radio-button>
</div>
<div fd-form-item>
<fd-radio-button value="val3" [id]="'radio-3'" name="radio-name-1" [(ngModel)]="optionVariable">
Option One
Option Three
</fd-radio-button>
</div>
</fd-form-group>
Expand All @@ -37,19 +37,19 @@ <h4 fd-form-header>Radio Buttons Examples</h4>
</div>
<div fd-form-item>
<fd-radio-button value="val2" [id]="'radio-5'" name="radio-name-2" [(ngModel)]="optionTwoVariable">
Option One
Option Two
</fd-radio-button>
</div>
<div fd-form-item>
<fd-radio-button value="val3" [id]="'radio-6'" name="radio-name-2" [(ngModel)]="optionTwoVariable">
Option One
Option Three
</fd-radio-button>
</div>
</fd-form-group>
</fieldset>

<fieldset fd-fieldset>
<legend fd-form-legend>Radio buttons</legend>
<legend fd-form-legend>Radio buttons - Inline</legend>
<fd-form-group [isInline]="true">
<div fd-form-item>
<fd-radio-button value="val1" [id]="'radio-7'" name="radio-name-3" [(ngModel)]="optionThreeVariable">
Expand All @@ -58,12 +58,12 @@ <h4 fd-form-header>Radio Buttons Examples</h4>
</div>
<div fd-form-item>
<fd-radio-button value="val2" [id]="'radio-8'" name="radio-name-3" [(ngModel)]="optionThreeVariable">
Option One
Option Two
</fd-radio-button>
</div>
<div fd-form-item>
<fd-radio-button value="val3" [id]="'radio-9'" name="radio-name-3" [(ngModel)]="optionThreeVariable">
Option One
Option Three
</fd-radio-button>
</div>
</fd-form-group>
Expand Down
24 changes: 18 additions & 6 deletions libs/platform/table/components/table-view-settings-dialog/grouping/grouping.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.groupDialogHeader' | fdTranslate
<fd-dialog-body disablePaddings>
<ul fd-list [selection]="true">
<li fd-list-group-header>
<span fd-list-title>{{ 'platformTable.groupDialogGroupOrderHeader' | fdTranslate }}</span>
<span fd-list-title [attr.id]="groupOrderHeaderId">{{
'platformTable.groupDialogGroupOrderHeader' | fdTranslate
}}</span>
</li>
<li fd-list-item [selected]="direction === SORT_DIRECTION.ASC">
<li fd-list-item [selected]="direction === SORT_DIRECTION.ASC" [attr.aria-describedby]="groupOrderHeaderId">
<fd-radio-button
name="sort-order"
value="asc"
Expand All @@ -29,7 +31,11 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.groupDialogHeader' | fdTranslate
></fd-radio-button>
<span fd-list-title>{{ 'platformTable.groupDialogGroupOrderAsc' | fdTranslate }}</span>
</li>
<li fd-list-item [selected]="direction === SORT_DIRECTION.DESC">
<li
fd-list-item
[selected]="direction === SORT_DIRECTION.DESC"
[attr.aria-describedby]="groupOrderHeaderId"
>
<fd-radio-button
name="sort-order"
value="desc"
Expand All @@ -43,9 +49,15 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.groupDialogHeader' | fdTranslate

<ul fd-list [selection]="true">
<li fd-list-group-header>
<span fd-list-title>{{ 'platformTable.groupDialogGroupByHeader' | fdTranslate }}</span>
<span fd-list-title [attr.id]="groupOrderHeaderId">{{
'platformTable.groupDialogGroupByHeader' | fdTranslate
}}</span>
</li>
<li fd-list-item [selected]="NOT_GROUPED_OPTION_VALUE === field">
<li
fd-list-item
[selected]="NOT_GROUPED_OPTION_VALUE === field"
[attr.aria-describedby]="groupOrderHeaderId"
>
<fd-radio-button
name="sort-by"
[value]="NOT_GROUPED_OPTION_VALUE"
Expand All @@ -56,7 +68,7 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.groupDialogHeader' | fdTranslate
<span fd-list-title>{{ 'platformTable.groupDialogNotGroupedLabel' | fdTranslate }}</span>
</li>
@for (column of columns; track column) {
<li fd-list-item [selected]="column.key === field">
<li fd-list-item [selected]="column.key === field" [attr.aria-describedby]="groupOrderHeaderId">
<fd-radio-button
name="sort-by"
[value]="column.key"
Expand Down
5 changes: 5 additions & 0 deletions libs/platform/table/components/table-view-settings-dialog/grouping/grouping.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export interface SettingsGroupDialogResultData {
const NOT_GROUPED_OPTION_VALUE = null;
const INITIAL_DIRECTION = SortDirection.ASC;

let groupOrderHeaderUniqueId = 0;

@Component({
templateUrl: './grouping.component.html',
providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => GroupingComponent) }],
Expand Down Expand Up @@ -87,6 +89,9 @@ export class GroupingComponent implements Resettable {
/** Current selected field */
field: string | null = null;

/** @hidden */
groupOrderHeaderId = `fdp-table-group-dialog-group-order-header-${groupOrderHeaderUniqueId++}`;

/** Table columns */
readonly columns: SettingsGroupDialogColumn[] = [];

Expand Down
20 changes: 14 additions & 6 deletions libs/platform/table/components/table-view-settings-dialog/sorting/sorting.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.sortDialogHeader' | fdTranslate
<fd-dialog-body disablePaddings>
<ul fd-list [selection]="true">
<li fd-list-group-header>
<span fd-list-title>{{ 'platformTable.sortDialogSortOrderHeader' | fdTranslate }}</span>
<span fd-list-title [attr.id]="sortOrderHeaderId">{{
'platformTable.sortDialogSortOrderHeader' | fdTranslate
}}</span>
</li>
<li fd-list-item [selected]="direction === SORT_DIRECTION.ASC">
<li fd-list-item [selected]="direction === SORT_DIRECTION.ASC" [attr.aria-describedby]="sortOrderHeaderId">
<fd-radio-button
name="sort-order"
value="asc"
Expand All @@ -28,7 +30,7 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.sortDialogHeader' | fdTranslate
></fd-radio-button>
<span fd-list-title>{{ 'platformTable.sortDialogSortOrderAsc' | fdTranslate }}</span>
</li>
<li fd-list-item [selected]="direction === SORT_DIRECTION.DESC">
<li fd-list-item [selected]="direction === SORT_DIRECTION.DESC" [attr.aria-describedby]="sortOrderHeaderId">
<fd-radio-button
name="sort-order"
value="desc"
Expand All @@ -41,10 +43,16 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.sortDialogHeader' | fdTranslate
</ul>
<ul fd-list [selection]="true">
<li fd-list-group-header>
<span fd-list-title>{{ 'platformTable.sortDialogSortByHeader' | fdTranslate }}</span>
<span fd-list-title [attr.id]="sortDialogSortByHeaderId">{{
'platformTable.sortDialogSortByHeader' | fdTranslate
}}</span>
</li>
@if (allowDisablingSorting) {
<li fd-list-item [selected]="field === NOT_SORTED_OPTION_VALUE">
<li
fd-list-item
[selected]="field === NOT_SORTED_OPTION_VALUE"
[attr.aria-describedby]="sortDialogSortByHeaderId"
>
<fd-radio-button
name="sort-by"
[value]="NOT_SORTED_OPTION_VALUE"
Expand All @@ -56,7 +64,7 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.sortDialogHeader' | fdTranslate
</li>
}
@for (column of columns; track column) {
<li fd-list-item [selected]="column.key === field">
<li fd-list-item [selected]="column.key === field" [attr.aria-describedby]="sortDialogSortByHeaderId">
<fd-radio-button
name="sort-by"
[value]="column.key"
Expand Down
9 changes: 9 additions & 0 deletions libs/platform/table/components/table-view-settings-dialog/sorting/sorting.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ export interface SettingsSortDialogResultData {
const NOT_SORTED_OPTION_VALUE = null;
const INITIAL_DIRECTION = SortDirection.ASC;

let sortOrderHeaderUniqueId = 0;
let sortDialogSortByHeaderUniqueId = 0;

@Component({
templateUrl: './sorting.component.html',
providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SortingComponent) }],
Expand Down Expand Up @@ -91,6 +94,12 @@ export class SortingComponent implements Resettable {
/** Whether to allow selecting '(Not sorted)' option in sorting dialog. */
allowDisablingSorting: boolean;

/** @hidden */
sortOrderHeaderId = `fdp-table-sort-order-header-${sortOrderHeaderUniqueId++}`;

/** @hidden */
sortDialogSortByHeaderId = `fdp-table-sort-dialog-sort-by-header-${sortDialogSortByHeaderUniqueId++}`;

/** Table columns */
readonly columns: SettingsSortDialogColumn[] = [];

Expand Down