feat(gv-select): improve with design pattern listbox

https://www.w3.org/TR/wai-aria-practices/#Listbox
gravitee-io · Nov 6, 2021 · 06d4eb9 · 06d4eb9
1 parent ce95eea
commit 06d4eb9
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/atoms/gv-select.js b/src/atoms/gv-select.js
@@ -414,7 +414,7 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
         </div>
         ${this.readonly
           ? ''
-          : html` <ul class="${classMap(Object.assign({ select__list: true }))}">
+          : html` <ul class="${classMap(Object.assign({ select__list: true }))}" role="listbox" ?aria-expanded="${!this._isClosed}">
               ${this._options &&
               repeat(
                 this._options,
@@ -429,6 +429,8 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
                     @click=${this._onSelect.bind(this, option)}
                     data-value="${option.value}"
                     .title="${ifDefined(option.title)}"
+                    role="option"
+                    ?aria-selected="${this.isSelected(option)}"
                   >
                     ${option.label}
                   </li>