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

Co-authored-by: mehmetcan.boz <[email protected]>
Co-authored-by: Murat Çorlu <[email protected]>

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>`;