Skip to content

fix: remove invalid dropdown aria-expanded#1391

Open
terminalchai wants to merge 2 commits into
Choices-js:mainfrom
terminalchai:fix/html-invalid-markup-1016
Open

fix: remove invalid dropdown aria-expanded#1391
terminalchai wants to merge 2 commits into
Choices-js:mainfrom
terminalchai:fix/html-invalid-markup-1016

Conversation

@terminalchai

Copy link
Copy Markdown
Contributor

This is the problem:

Choices renders invalid HTML for a simple text input because the dropdown wrapper gets an unsupported aria-expanded attribute.

Steps to reproduce:

  1. Initialize Choices on a text input.
  2. Inspect the rendered markup.
  3. Validate the generated HTML and note the invalid aria-expanded usage on the dropdown wrapper.

This is my solution:

Remove aria-expanded from the dropdown wrapper and stop toggling it in the dropdown component, while keeping unit coverage aligned with the valid markup.

Testing

  • npm run test:unit
  • npm run lint

Closes #1016

@Xon

Xon commented Mar 26, 2026

Copy link
Copy Markdown
Collaborator

As I understand it, this attribute should be added when the backing element is a select element as it opens a dropdown where in general the text element does not.

@Xon

Xon commented Mar 26, 2026

Copy link
Copy Markdown
Collaborator

Removing aria-expanded will also break some of the css for select-one/select-multiple setups

@Xon Xon added the changes required Pull request requires changes before it can be merged label Apr 22, 2026
@terminalchai

Copy link
Copy Markdown
Contributor Author

Updated this to address the select-element concern:

  • text-input dropdowns no longer receive or toggle aria-expanded
  • select-one/select-multiple dropdowns keep the initial aria-expanded="false" and continue toggling it on show/hide
  • added coverage for both text and select dropdown behavior

Tests run locally:

  • npm run lint:js
  • npx vitest run test/scripts/components/dropdown.test.ts test/scripts/templates.test.ts
  • npm run test:unit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

changes required Pull request requires changes before it can be merged

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Choices renders HTML Invalid code

2 participants