Skip to content

Commit

Permalink
fix: aria-labelledby on sbb-select, connect label and select in pagin…
Browse files Browse the repository at this point in the history 
…ator
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons committed Sep 5, 2024
1 parent 7421fa8 commit 8291b28
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 65 deletions.
131 changes: 67 additions & 64 deletions src/elements/paginator/__snapshots__/paginator.snapshot.spec.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ snapshots["sbb-paginator renders Shadow DOM"] =
id="sbb-paginator-prev-page"
role="button"
slot="li-0"
tabindex="0"
>
</sbb-mini-button>
<sbb-divider
Expand All @@ -48,6 +49,7 @@ snapshots["sbb-paginator renders Shadow DOM"] =
id="sbb-paginator-next-page"
role="button"
slot="li-2"
tabindex="0"
>
</sbb-mini-button>
</sbb-mini-button-group>
Expand Down Expand Up @@ -100,6 +102,7 @@ snapshots["sbb-paginator renders ellipsis on end side Shadow DOM"] =
id="sbb-paginator-prev-page"
role="button"
slot="li-0"
tabindex="0"
>
</sbb-mini-button>
<sbb-divider
Expand Down Expand Up @@ -465,6 +468,7 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
id="sbb-paginator-prev-page"
role="button"
slot="li-0"
tabindex="0"
>
</sbb-mini-button>
<sbb-divider
Expand Down Expand Up @@ -550,7 +554,7 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
</ul>
</span>
<div class="sbb-paginator__page-size-options">
<label>
<label id="sbb-paginator-options-label-10">
Items per page
</label>
<sbb-form-field
Expand All @@ -565,6 +569,7 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
aria-controls="sbb-select-2"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="sbb-paginator-options-label-10"
aria-owns="sbb-select-2"
aria-required="false"
class="sbb-screen-reader-only"
Expand All @@ -575,6 +580,7 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
10
</div>
<sbb-select
aria-labelledby="sbb-paginator-options-label-10"
data-option-panel-origin-borderless=""
data-state="closed"
dir="ltr"
Expand Down Expand Up @@ -621,61 +627,6 @@ snapshots["sbb-paginator renders with options Chrome-Firefox Shadow DOM"] =
`;
/* end snapshot sbb-paginator renders with options Chrome-Firefox Shadow DOM */

snapshots["sbb-paginator renders with options A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "button",
"name": "Previous page",
"disabled": true
},
{
"role": "button",
"name": "Next page"
},
{
"role": "button",
"name": "Page 1"
},
{
"role": "button",
"name": "Page 2"
},
{
"role": "button",
"name": "Page 3"
},
{
"role": "button",
"name": "Page 4"
},
{
"role": "button",
"name": "Page 5"
},
{
"role": "text",
"name": "Items per page"
},
{
"role": "text",
"name": "​"
},
{
"role": "combobox",
"name": "",
"haspopup": "listbox",
"value": "10"
}
]
}
</p>
`;
/* end snapshot sbb-paginator renders with options A11y tree Chrome */

snapshots["sbb-paginator renders with options Safari DOM"] =
`<sbb-paginator
length="50"
Expand Down Expand Up @@ -703,6 +654,7 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
id="sbb-paginator-prev-page"
role="button"
slot="li-0"
tabindex="0"
>
</sbb-mini-button>
<sbb-divider
Expand Down Expand Up @@ -788,7 +740,7 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
</ul>
</span>
<div class="sbb-paginator__page-size-options">
<label>
<label id="sbb-paginator-options-label-10">
Items per page
</label>
<sbb-form-field
Expand All @@ -803,6 +755,7 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
aria-controls="sbb-select-2"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="sbb-paginator-options-label-10"
aria-owns="sbb-select-2"
aria-required="false"
class="sbb-screen-reader-only"
Expand All @@ -813,6 +766,7 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
10
</div>
<sbb-select
aria-labelledby="sbb-paginator-options-label-10"
data-option-panel-origin-borderless=""
data-state="closed"
dir="ltr"
Expand Down Expand Up @@ -861,6 +815,61 @@ snapshots["sbb-paginator renders with options Safari Shadow DOM"] =
`;
/* end snapshot sbb-paginator renders with options Safari Shadow DOM */

snapshots["sbb-paginator renders with options A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "button",
"name": "Previous page",
"disabled": true
},
{
"role": "button",
"name": "Next page"
},
{
"role": "button",
"name": "Page 1"
},
{
"role": "button",
"name": "Page 2"
},
{
"role": "button",
"name": "Page 3"
},
{
"role": "button",
"name": "Page 4"
},
{
"role": "button",
"name": "Page 5"
},
{
"role": "text",
"name": "Items per page"
},
{
"role": "text",
"name": "​"
},
{
"role": "combobox",
"name": "Items per page",
"haspopup": "listbox",
"value": "10"
}
]
}
</p>
`;
/* end snapshot sbb-paginator renders with options A11y tree Chrome */

snapshots["sbb-paginator renders with options A11y tree Firefox"] =
`<p>
{
Expand Down Expand Up @@ -906,14 +915,8 @@ snapshots["sbb-paginator renders with options A11y tree Firefox"] =
},
{
"role": "combobox",
"name": "",
"name": "Items per page",
"haspopup": "listbox",
"children": [
{
"role": "text leaf",
"name": "10"
}
],
"value": "10"
}
]
Expand Down
16 changes: 15 additions & 1 deletion src/elements/paginator/paginator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export type SbbPaginatorPageChangedEventDetails = {

const MAX_PAGE_NUMBERS_DISPLAYED = 3;

let optionsLabelNextId = 0;

/**
* It displays a paginator component.
*
Expand Down Expand Up @@ -110,6 +112,7 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
{ composed: true, bubbles: true },
);

private _paginatorOptionsLabel = `sbb-paginator-options-label-${++optionsLabelNextId}`;
private _language = new SbbLanguageController(this);
private _markForFocus: number | null = null;

Expand All @@ -129,6 +132,15 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
}
}

protected override firstUpdated(_changedProperties: PropertyValues): void {
super.firstUpdated(_changedProperties);

this.shadowRoot!.querySelector('sbb-select')?.setAttribute(
'aria-labelledby',
this._paginatorOptionsLabel,
);
}

/** Returns the displayed page elements. */
private _getVisiblePages(): Element[] {
return Array.from(this.shadowRoot!.querySelectorAll('.sbb-paginator__page--number-item'));
Expand Down Expand Up @@ -242,7 +254,9 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
return this.pageSizeOptions && this.pageSizeOptions.length > 0
? html`
<div class="sbb-paginator__page-size-options">
<label>${i18nItemsPerPage[this._language.current]}</label>
<label id=${this._paginatorOptionsLabel}
>${i18nItemsPerPage[this._language.current]}</label
>
<sbb-form-field
borderless
width="collapse"
Expand Down
15 changes: 15 additions & 0 deletions src/elements/select/select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
SbbNegativeMixin,
SbbUpdateSchedulerMixin,
} from '../core/mixins.js';
import { AgnosticMutationObserver } from '../core/observers.js';
import { isEventOnElement, overlayGapFixCorners, setOverlayPosition } from '../core/overlay.js';
import type { SbbOptGroupElement, SbbOptionElement } from '../option.js';

Expand Down Expand Up @@ -122,6 +123,10 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
private _isPointerDownEventOnMenu: boolean = false;
private _abort = new SbbConnectedAbortController(this);

private _selectAttributeObserver = new AgnosticMutationObserver(
(mutationsList: MutationRecord[]) => this._onSelectAttributesChange(mutationsList),
);

/**
* The 'combobox' input element
* @internal
Expand All @@ -141,6 +146,14 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
);
}

private _onSelectAttributesChange(mutationsList: MutationRecord[]): void {
for (const mutation of mutationsList) {
if (mutation.attributeName === 'aria-labelledby') {
this._triggerElement.setAttribute('aria-labelledby', this.getAttribute('aria-labelledby')!);
}
}
}

/** Opens the selection panel. */
public open(): void {
if (this.state !== 'closed' || !this._overlay || this._options.length === 0) {
Expand Down Expand Up @@ -263,6 +276,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(

if (formField) {
this.negative = formField.hasAttribute('negative');
this._selectAttributeObserver.observe(this, { attributeFilter: ['aria-labelledby'] });
}
this._syncProperties();

Expand Down Expand Up @@ -303,6 +317,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
public override disconnectedCallback(): void {
super.disconnectedCallback();
this.prepend(this._triggerElement); // Take back the trigger element previously moved to the light DOM
this._selectAttributeObserver.disconnect();
this._openPanelEventsController?.abort();
}

Expand Down

0 comments on commit 8291b28

Please sign in to comment.