Skip to content

Automatically set an ID on active combobox options#102

Open
henrycatalinismith wants to merge 5 commits intogithub:mainfrom
henrycatalinismith:selected-id
Open

Automatically set an ID on active combobox options#102
henrycatalinismith wants to merge 5 commits intogithub:mainfrom
henrycatalinismith:selected-id

Conversation

@henrycatalinismith
Copy link
Copy Markdown

Reopening #99 here after accidentally closing it while cleaning out unused old forks. Sorry!

@henrycatalinismith henrycatalinismith requested a review from a team as a code owner May 3, 2026 18:09
Copilot AI review requested due to automatic review settings May 3, 2026 18:09
@henrycatalinismith henrycatalinismith changed the title Selected Automatically set an ID on active combobox options May 3, 2026
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds support for combobox options that do not already have IDs by auto-assigning a temporary ID to the currently selected option so aria-activedescendant can still point to it. It fits into the library’s accessibility behavior around keyboard navigation and selected-option tracking.

Changes:

  • Add temporary ID assignment/removal for selected options that are missing an id.
  • Track whether the selected option’s ID was auto-assigned so it can be cleaned up on navigation/clear.
  • Add tests covering navigation across options with and without predefined IDs.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
src/index.ts Adds runtime logic to synthesize and later remove selected-option IDs.
test/test.js Adds coverage for options missing IDs and verifies ID lifecycle during navigation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread test/test.js
Comment on lines +443 to +461
assert.equal(list.children[2].getAttribute('id'), undefined)

press(input, 'ArrowDown')
assert.equal(input.getAttribute('aria-activedescendant'), 'hubot')
assert.equal(list.children[0].getAttribute('id'), undefined)
assert.equal(list.children[1].getAttribute('id'), 'hubot')
assert.equal(list.children[2].getAttribute('id'), undefined)

press(input, 'ArrowDown')
assert.equal(input.getAttribute('aria-activedescendant'), 'list-id-selected')
assert.equal(list.children[0].getAttribute('id'), undefined)
assert.equal(list.children[1].getAttribute('id'), 'hubot')
assert.equal(list.children[2].getAttribute('id'), 'list-id-selected')

press(input, 'Escape')
assert.equal(input.getAttribute('aria-activedescendant'), undefined)
assert.equal(list.children[0].getAttribute('id'), undefined)
assert.equal(list.children[1].getAttribute('id'), 'hubot')
assert.equal(list.children[2].getAttribute('id'), undefined)
Comment thread src/index.ts

if (target === el) {
if (!target.id) {
target.id = `${this.list.id}-selected`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants