fix: remove invalid dropdown aria-expanded

src/scripts/choices.ts

@@ -2271,7 +2271,7 @@ class Choices {
     });
 
     this.dropdown = new Dropdown({
-      element: templating.dropdown(config),
+      element: templating.dropdown(config, elementType),
       classNames,
       type: elementType,
     });

src/scripts/components/dropdown.ts

@@ -1,5 +1,5 @@
 import { ClassNames } from '../interfaces/class-names';
-import { PassedElementType } from '../interfaces/passed-element-type';
+import { PassedElementType, PassedElementTypes } from '../interfaces/passed-element-type';
 import { addClassesToElement, removeClassesFromElement } from '../lib/utils';
 
 export default class Dropdown {
@@ -31,7 +31,9 @@ export default class Dropdown {
    */
   show(): this {
     addClassesToElement(this.element, this.classNames.activeState);
-    this.element.setAttribute('aria-expanded', 'true');
+    if (this.type !== PassedElementTypes.Text) {
+      this.element.setAttribute('aria-expanded', 'true');
+    }
     this.isActive = true;
 
     return this;
@@ -42,7 +44,9 @@ export default class Dropdown {
    */
   hide(): this {
     removeClassesFromElement(this.element, this.classNames.activeState);
-    this.element.setAttribute('aria-expanded', 'false');
+    if (this.type !== PassedElementTypes.Text) {
+      this.element.setAttribute('aria-expanded', 'false');
+    }
     this.isActive = false;
 
     return this;

src/scripts/interfaces/templates.ts

@@ -58,7 +58,7 @@ export interface Templates {
 
   input(options: TemplateOptions, placeholderValue: string | null): HTMLInputElement;
 
-  dropdown(options: TemplateOptions): HTMLDivElement;
+  dropdown(options: TemplateOptions, passedElementType: PassedElementType): HTMLDivElement;
 
   notice(options: TemplateOptions, innerText: string, type: NoticeType): HTMLDivElement;
 

src/scripts/templates.ts

@@ -6,7 +6,7 @@
 
 import { ChoiceFull } from './interfaces/choice-full';
 import { GroupFull } from './interfaces/group-full';
-import { PassedElementType } from './interfaces/passed-element-type';
+import { PassedElementType, PassedElementTypes } from './interfaces/passed-element-type';
 import { StringPreEscaped } from './interfaces/string-pre-escaped';
 import {
   getClassNames,
@@ -350,12 +350,17 @@ const templates: TemplatesInterface = {
     return inp;
   },
 
-  dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
+  dropdown(
+    { classNames: { list, listDropdown } }: TemplateOptions,
+    passedElementType: PassedElementType,
+  ): HTMLDivElement {
     const div = document.createElement('div');
 
     addClassesToElement(div, list);
     addClassesToElement(div, listDropdown);
-    div.setAttribute('aria-expanded', 'false');
+    if (passedElementType !== PassedElementTypes.Text) {
+      div.setAttribute('aria-expanded', 'false');
+    }
 
     return div;
   },

test/scripts/components/dropdown.test.ts

@@ -69,12 +69,24 @@ describe('components/dropdown', () => {
       });
     });
 
-    it('sets expanded attribute', () => {
+    it('does not set an expanded attribute', () => {
       expect(instance).to.not.be.null;
       if (!instance) {
         return;
       }
-      expect(instance.element.getAttribute('aria-expanded')).to.equal('true');
+      expect(instance.element.hasAttribute('aria-expanded')).to.equal(false);
+    });
+
+    it('sets expanded attribute for select dropdowns', () => {
+      const selectInstance = new Dropdown({
+        element: choicesElement,
+        type: 'select-one',
+        classNames: DEFAULT_CLASSNAMES,
+      });
+
+      selectInstance.show();
+
+      expect(selectInstance.element.getAttribute('aria-expanded')).to.equal('true');
     });
 
     it('sets isActive instance flag', () => {
@@ -119,12 +131,24 @@ describe('components/dropdown', () => {
       });
     });
 
-    it('sets expanded attribute', () => {
+    it('does not set an expanded attribute', () => {
       expect(instance).to.not.be.null;
       if (!instance) {
         return;
       }
-      expect(instance.element.getAttribute('aria-expanded')).to.equal('false');
+      expect(instance.element.hasAttribute('aria-expanded')).to.equal(false);
+    });
+
+    it('sets expanded attribute for select dropdowns', () => {
+      const selectInstance = new Dropdown({
+        element: choicesElement,
+        type: 'select-one',
+        classNames: DEFAULT_CLASSNAMES,
+      });
+
+      selectInstance.hide();
+
+      expect(selectInstance.element.getAttribute('aria-expanded')).to.equal('false');
     });
 
     it('sets isActive instance flag', () => {

test/scripts/templates.test.ts

@@ -609,11 +609,20 @@ describe('templates', () => {
       listDropdown: 'class-2',
     });
 
-    it('returns expected html', () => {
+    it('returns expected html for select elements', () => {
       const expectedOutput = strToEl(
         `<div class="${getClassNames(dropdownOptions.classNames.list).join(' ')} ${getClassNames(dropdownOptions.classNames.listDropdown).join(' ')}" aria-expanded="false"></div>`,
       );
-      const actualOutput = templates.dropdown(dropdownOptions);
+      const actualOutput = templates.dropdown(dropdownOptions, 'select-one');
+
+      expectEqualElements(actualOutput, expectedOutput);
+    });
+
+    it('returns expected html for text inputs', () => {
+      const expectedOutput = strToEl(
+        `<div class="${getClassNames(dropdownOptions.classNames.list).join(' ')} ${getClassNames(dropdownOptions.classNames.listDropdown).join(' ')}"></div>`,
+      );
+      const actualOutput = templates.dropdown(dropdownOptions, 'text');
 
       expectEqualElements(actualOutput, expectedOutput);
     });