Merge pull request #554 from gselderslaghs/autocomplete-accessibility

accessibility(Autocomplete) implemented tab index and aria expanded

Author: wuda-io

src/autocomplete.ts

@@ -82,10 +82,11 @@ const _defaults: AutocompleteOptions = {
   onSearch: (text: string, autocomplete: Autocomplete) => {
     const normSearch = text.toLocaleLowerCase();
     autocomplete.setMenuItems(
-      autocomplete.options.data.filter(
-        (option) =>
-          option.id.toString().toLocaleLowerCase().includes(normSearch) ||
-          option.text?.toLocaleLowerCase().includes(normSearch)
+
+      autocomplete.options.data.filter((option) =>
+        option.id.toString().toLocaleLowerCase().includes(normSearch)
+          || option.text?.toLocaleLowerCase().includes(normSearch)
+
       )
     );
   },
@@ -207,6 +208,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
     this.container.style.maxHeight = this.options.maxDropDownHeight;
     this.container.id = `autocomplete-options-${Utils.guid()}`;
     this.container.classList.add('autocomplete-content', 'dropdown-content');
+    this.container.ariaExpanded = 'true';
     this.el.setAttribute('data-target', this.container.id);
 
     this.menuItems.forEach((menuItem) => {
@@ -253,6 +255,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
   }
 
   _removeDropdown() {
+    this.container.ariaExpanded = 'false';
     this.container.parentNode.removeChild(this.container);
   }
 
@@ -377,6 +380,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       'style',
       'display:grid; grid-auto-flow: column; user-select: none; align-items: center;'
     );
+    item.tabIndex = 0;
     // Checkbox
     if (this.options.isMultiSelect) {
       item.innerHTML = `