diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts index f15efa2b8..7d5e70233 100644 --- a/src/scripts/choices.ts +++ b/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, }); diff --git a/src/scripts/components/dropdown.ts b/src/scripts/components/dropdown.ts index ce8ac73f0..3ff556d85 100644 --- a/src/scripts/components/dropdown.ts +++ b/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; diff --git a/src/scripts/interfaces/templates.ts b/src/scripts/interfaces/templates.ts index 279ac3a0f..1676d0266 100644 --- a/src/scripts/interfaces/templates.ts +++ b/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; diff --git a/src/scripts/templates.ts b/src/scripts/templates.ts index ddbb1b4d3..c2b739fca 100644 --- a/src/scripts/templates.ts +++ b/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; }, diff --git a/test/scripts/components/dropdown.test.ts b/test/scripts/components/dropdown.test.ts index 2c09d9068..881e55360 100644 --- a/test/scripts/components/dropdown.test.ts +++ b/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', () => { diff --git a/test/scripts/templates.test.ts b/test/scripts/templates.test.ts index 86ca4fa2c..02c0f1a42 100644 --- a/test/scripts/templates.test.ts +++ b/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( `
`, ); - 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( + ``, + ); + const actualOutput = templates.dropdown(dropdownOptions, 'text'); expectEqualElements(actualOutput, expectedOutput); });