Skip to content

fix(components/lists): use 'grid' role for selectable repeaters #751

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

Merged
Blackbaud-SteveBrush merged 2 commits into from
Oct 27, 2022
Merged

fix(components/lists): use 'grid' role for selectable repeaters #751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7d2aafc
fix(components/lists): use 'grid' role for selectable repeaters
Blackbaud-SteveBrush Oct 27, 2022
3683e23
more fixes
Blackbaud-SteveBrush Oct 27, 2022
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
15 changes: 8 additions & 7 deletions libs/components/lists/src/lib/modules/repeater/repeater-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
class="sky-repeater-item sky-padding-even-default"
[attr.aria-label]="itemName"
[attr.aria-selected]="selectable ? !!isSelected : undefined"
[attr.role]="showInlineForm ? 'form' : (itemRole$ | async)?.item"
[attr.role]="(itemRole$ | async)?.item"
[attr.tabIndex]="tabindex"
[ngClass]="{
'sky-repeater-item-active': isActive,
'sky-repeater-item-collapsible': isCollapsible,
Expand Down Expand Up @@ -34,7 +35,10 @@
</div>

<ng-template #skyRepeaterItemLeft>
<div class="sky-repeater-item-left">
<div
[attr.role]="!showInlineForm ? (itemRole$ | async)?.content : undefined"
class="sky-repeater-item-left"
>
<ng-container *ngIf="reorderable">
<span
aria-live="assertive"
Expand Down Expand Up @@ -90,14 +94,11 @@
<div class="sky-repeater-item-right" #itemHeaderRef>
<div
class="sky-repeater-item-header"
[attr.role]="(itemRole$ | async)?.title"
[hidden]="titleRef.children.length === 0"
(click)="headerClick()"
>
<div
class="sky-repeater-item-title sky-emphasized"
#titleRef
[attr.role]="(itemRole$ | async)?.title"
>
<div class="sky-repeater-item-title sky-emphasized" #titleRef>
<ng-content select="sky-repeater-item-title"></ng-content>
</div>
<button
Expand Down
3 changes: 1 addition & 2 deletions libs/components/lists/src/lib/modules/repeater/repeater-item.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ export class SkyRepeaterItemComponent
* - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
* - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
*/
@HostBinding()
public get tabindex(): 0 | -1 {
return this.#repeaterService.items.filter((item) => !item.disabled)[0] ===
this
Expand Down Expand Up @@ -420,7 +419,7 @@ export class SkyRepeaterItemComponent
':focus-within'
)
) {
activateItem.#elementRef.nativeElement.focus();
activateItem.itemRef?.nativeElement.focus();
}
}
}
Expand Down
13 changes: 11 additions & 2 deletions libs/components/lists/src/lib/modules/repeater/repeater.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -820,6 +820,15 @@ describe('Repeater item component', () => {
fixture.detectChanges();
await fixture.whenStable();
await expectAsync(fixture.nativeElement).toBeAccessible();

// Confirm elements are using appropriate roles.
const repeaterEl = fixture.nativeElement.querySelector('.sky-repeater');
expect(repeaterEl.getAttribute('role')).toEqual('grid');
expect(
repeaterEl
.querySelector('sky-repeater-item:first-child > .sky-repeater-item')
.getAttribute('role')
).toEqual('row');
});

it('should update the isSelected property when the user clicks the checkbox', fakeAsync(() => {
Expand Down Expand Up @@ -1639,7 +1648,7 @@ describe('Repeater item component', () => {
cmp.showItemWithNoContent = true;
detectChangesAndTick(fixture);
const items: Element[] = Array.from(
el.querySelectorAll('sky-repeater-item')
el.querySelectorAll('.sky-repeater-item')
);
expect(items.length).toEqual(4);
const sequence = [
Expand Down Expand Up @@ -1733,7 +1742,7 @@ describe('Repeater item component', () => {
el.querySelector('.sky-repeater-item').getAttribute('role')
).toEqual('row');
expect(
el.querySelector('.sky-repeater-item-title').getAttribute('role')
el.querySelector('.sky-repeater-item-header').getAttribute('role')
).toEqual('rowheader');
expect(
el.querySelector('.sky-repeater-item-content').getAttribute('role')
Expand Down
4 changes: 1 addition & 3 deletions libs/components/lists/src/lib/modules/repeater/repeater.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,16 +401,14 @@ export class SkyRepeaterComponent
const hasInteraction =
this.reorderable ||
this.items?.some((item) => item.isCollapsible) ||
this.items?.some((item) => !!item.selectable) ||
!!(this.#elementRef.nativeElement as HTMLElement).querySelector(
interactionSelector
);

if (hasInteraction) {
// If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
autoRole = 'grid';
} else if (this.items?.some((item) => !!item.selectable)) {
// If the only interaction is select https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
autoRole = 'listbox';
}

if (this.role !== autoRole) {
Expand Down