Merge pull request #128 from GovTechSG/dropdown-a11y

WIP: Implement a11y for Dropdown
GovTechSG · Oct 3, 2023 · 0ff0cf6 · 0ff0cf6
2 parents d18c619 + 59efc9e
commit 0ff0cf6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/src/base/dropdown-element.ts b/src/base/dropdown-element.ts
@@ -6,6 +6,7 @@ import { property, state } from "lit/decorators.js";
 import { Ref, createRef } from "lit/directives/ref.js";
 import mergeDeep from "../utils/mergeDeep";
 import SgdsElement from "./sgds-element";
+import generateId from "../utils/generateId";
 
 const ARROW_DOWN = "ArrowDown";
 const ARROW_UP = "ArrowUp";
@@ -29,6 +30,9 @@ export class DropdownElement extends SgdsElement {
   /** @internal */
   protected bsDropdown: BsDropdown = null;
 
+  /** @internal Unique id generated for the dropdown menu */
+  protected dropdownMenuId: string = generateId("dropdown-menu", "ul");
+
   /** @internal Controls auto-flipping of menu */
   @property({ type: Boolean, state: true })
   protected noFlip = false;

diff --git a/src/components/ComboBox/sgds-combo-box.ts b/src/components/ComboBox/sgds-combo-box.ts
@@ -117,12 +117,16 @@ export class SgdsComboBox extends ScopedElementsMixin(DropdownListElement) {
           ?readonly=${this.readonly}
           .value=${this.value}
           @sgds-input=${this._handleInputChange}
+          role="combobox"
+          aria-expanded=${this.menuIsOpen}
+          aria-autocomplete="list"
+          aria-controls=${this.dropdownMenuId}
         >
         </sgds-input>
         <div class="form-control-icon">
           <slot name="icon"></slot>
         </div>
-        <ul class="dropdown-menu" part="menu">
+        <ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1">
           ${this.filteredMenuList.map(
             item => html`<button class="dropdown-item" @click=${this._handleSelectChange}>${item}</button>`
           )}

diff --git a/src/components/Datepicker/sgds-datepicker.ts b/src/components/Datepicker/sgds-datepicker.ts
@@ -335,6 +335,9 @@ export class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
           readonly
           ?required=${this.required}
           ?disabled=${this.disabled}
+          role="combobox"
+          aria-haspopup="dialog"
+          aria-controls=${this.dropdownMenuId}
         ></sgds-input>
         <button
           ?disabled=${this.disabled}
@@ -344,8 +347,9 @@ export class SgdsDatepicker extends ScopedElementsMixin(DropdownElement) {
           ${svgEl}
         </button>
         <ul
+          id=${this.dropdownMenuId}
           class="sgds datepicker dropdown-menu"
-          role="menu"
+          role="dialog"
           part="menu"
           @click=${(event: MouseEvent) => event.stopPropagation()}
         >

diff --git a/src/components/Dropdown/sgds-dropdown.ts b/src/components/Dropdown/sgds-dropdown.ts
@@ -82,9 +82,11 @@ export class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {
     return html`
       <div>
         <sgds-button
+          role="button"
           variant="outline-${this.variant}"
           ?disabled=${this.disabled}
           aria-expanded="${this.menuIsOpen}"
+          aria-haspopup="menu"
           ${ref(this.myDropdown)}
           @click=${() => this.toggleMenu()}
           id=${this.togglerId}

diff --git a/test/dropdown.test.ts b/test/dropdown.test.ts
@@ -174,7 +174,9 @@ describe("sgds-dropdown", () => {
       el,
       `  <div>
          <sgds-button
+           role="button"
            aria-expanded="false"
+           aria-haspopup="menu"
          variant="outline-secondary"
          >
          <svg