feat(select): a11y improvement on select and option components (#588)

Co-authored-by: mehmetcan.boz <mehmetcan.boz@trendyol.com>
Co-authored-by: Murat Çorlu <127687+muratcorlu@users.noreply.github.com>

src/components/select/bl-select.test.ts

@@ -22,6 +22,10 @@ describe('bl-select', () => {
  <fieldset
  class="select-input"
  tabindex="0"
+ role="button"
+ aria-haspopup="listbox"
+ aria-labelledby="label"
+ aria-expanded="false"
  >
  <legend><span></span></legend>
  <span class="placeholder"></span>
@@ -42,7 +46,11 @@ describe('bl-select', () => {
  <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
  </div>
  </fieldset>
- <div class="popover" tabindex="-1">
+ <div class="popover" tabindex="-1"
+ role="listbox"
+ aria-multiselectable="false"
+ aria-labelledby="label"
+ >
  <slot></slot>
  </div>
  <div class="hint"></div>

src/components/select/bl-select.ts

@@ -309,6 +309,10 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  tabindex="${this.disabled ? '-1' : 0}"
  ?autofocus=${this.autofocus}
  @click=${this.togglePopover}
+ role="button"
+ aria-haspopup="listbox"
+ aria-expanded="${this.opened}"
+ aria-labelledby="label"
  >
  <legend><span>${this.label}</span></legend>
  <span class="placeholder">${this.placeholder}</span>
@@ -332,7 +336,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
 
  const helpMessage = this.helpText ? html`<p class="help-text">${this.helpText}</p>` : '';
 
- const label = this.label ? html`<label>${this.label}</label>` : '';
+ const label = this.label ? html`<label id="label">${this.label}</label>` : '';
 
  return html`<div
  class=${classMap({
@@ -349,6 +353,9 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  class="popover"
  tabindex="${ifDefined(this._isPopoverOpen ? undefined : '-1')}"
  @bl-select-option=${this._handleSelectOptionEvent}
+ role="listbox"
+ aria-multiselectable="${this.multiple}"
+ aria-labelledby="label"
  >
  <slot></slot>
  </div>

src/components/select/option/bl-select-option.test.ts

@@ -8,6 +8,30 @@ describe('bl-select', () => {
  assert.instanceOf(el, BlSelectOption);
  });
 
+ it('renders with default values', async () => {
+ const el = await fixture<BlSelectOption>(html`<bl-select-option></bl-select-option>`);
+
+ expect(el).shadowDom.equal(
+ `<div class="option-container">
+ <div class="focus-target single-option" role="option" aria-selected="false">
+ <slot>
+ </slot>
+ </div>
+ </div>
+ `
+ );
+ });
+
+ it('should have aria-selected attribute set to true if the option is selected', async function () {
+ const el = await fixture<BlSelectOption>(
+ html`<bl-select-option value="basketball" selected>Basketball</bl-select-option>`
+ );
+
+ const option = el.shadowRoot?.querySelector<HTMLButtonElement>('.focus-target');
+
+ expect(option).has.attribute('aria-selected', 'true');
+ });
+
  describe('keyboard navigation', () => {
  it('should get focus', async () => {
  //when

src/components/select/option/bl-select-option.ts

@@ -85,6 +85,8 @@ export default class BlSelectOption<ValueType extends FormValue = string> extend
  @blur=${this.blur}
  @keydown=${this.handleKeydown}
  @click="${this._onClickOption}"
+ role="option"
+ aria-selected="${this.selected}"
  >
  <slot></slot>
  </div>`;
@@ -96,6 +98,8 @@ export default class BlSelectOption<ValueType extends FormValue = string> extend
  .checked="${this.selected}"
  .disabled="${this.disabled}"
  @bl-checkbox-change="${this._onCheckboxChange}"
+ role="option"
+ aria-selected="${this.selected}"
  >
  <slot></slot>
  </bl-checkbox>`;