feat(elements|ino-select): improve accessibility (#1055)

Co-authored-by: Jan-Niklas <jan-niklas.voss@inovex.de>
inovex · Sep 12, 2023 · d370dc2 · d370dc2
1 parent c1279b6
commit d370dc2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/elements/src/components/ino-option/ino-option.tsx b/packages/elements/src/components/ino-option/ino-option.tsx
@@ -68,11 +68,10 @@ export class InoOption {
     });
 
     return (
-      <Host>
+      <Host role="option">
         <li
           class={classSelect}
           data-value={this.value}
-          aria-selected={this.selected}
         >
           <span class="mdc-deprecated-list-item__text">
             <slot />

diff --git a/packages/elements/src/components/ino-select/ino-select.tsx b/packages/elements/src/components/ino-select/ino-select.tsx
@@ -13,7 +13,7 @@ import {
   Watch,
 } from '@stencil/core';
 import classNames from 'classnames';
-import { hasSlotContent } from '../../util/component-utils';
+import {  generateUniqueId, hasSlotContent } from '../../util/component-utils';
 
 /**
  * @slot icon-leading - For the icon to be prepended
@@ -32,6 +32,13 @@ export class Select implements ComponentInterface {
   private nativeInputElement?: HTMLInputElement;
   private optionsObserver: MutationObserver;
 
+  /**
+     * An internal auto generated id for the helper field.
+     */
+  private selectElId = generateUniqueId();
+
+
+
   @Element() el!: HTMLInoSelectElement;
 
   /**
@@ -125,6 +132,7 @@ export class Select implements ComponentInterface {
   connectedCallback() {
     // in case of usage e.g. in a popover this is necessary
     this.create();
+
     this.optionsObserver = new MutationObserver(() => {
       forceUpdate(this.el);
     });
@@ -240,7 +248,12 @@ export class Select implements ComponentInterface {
       <Host class={inoSelectClasses} name={this.name}>
         <div class={classSelect} ref={(el) => (this.mdcSelectContainerEl = el)}>
           {hiddenInput}
-          <div class="mdc-select__anchor" aria-required={this.required}>
+          <div 
+            class="mdc-select__anchor"
+            role="combobox"
+            tabindex="0"
+            aria-labelledby={`label-${this.selectElId}`}
+            aria-required={this.required}>
             {leadingSlotHasContent && (
               <span class="mdc-select__icon">
                 <slot name="icon-leading"></slot>
@@ -249,15 +262,19 @@ export class Select implements ComponentInterface {
             <div class="mdc-select__selected-text"></div>
             {this.renderDropdownIcon()}
             <ino-label
+              id={`label-${this.selectElId}`}
               outline={this.outline}
               text={this.label}
               required={this.required}
               disabled={this.disabled}
               show-hint={this.showLabelHint}
             />
           </div>
-          <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
+          <div 
+            class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
             <ul
+              role="listbox"
+              tabindex="-1"
               class="mdc-deprecated-list"
               ref={(el) => (this.mdcOptionsListEl = el)}
             >