Skip to content

Add console warning about missing IDs on options #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
henrycatalinismith wants to merge 2 commits into from
Closed

Add console warning about missing IDs on options #98

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c98d870
Add console warning about missing IDs on options
henrycatalinismith Mar 29, 2026
182aca4
Merge branch 'main' into console-warning
francinelucca Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,18 @@ These settings are available:
npm install
npm test
```

## Troubleshooting

### Combobox options must have unique IDs

Passing a combobox whose options lack IDs results in the following console warning.

> Combobox options must have unique IDs
> See https://github.com/github/combobox-nav/?tab=readme-ov-file#combobox-options-must-have-unique-ids
Copy link

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

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

The URL in the documented warning includes ?tab=readme-ov-file, which is a GitHub UI-specific query param and not a stable permalink. Consider switching to a stable README anchor link so the troubleshooting reference doesn't rot.

Suggested change
> See https://github.com/github/combobox-nav/?tab=readme-ov-file#combobox-options-must-have-unique-ids
> See https://github.com/github/combobox-nav#combobox-options-must-have-unique-ids

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Contributor

@francinelucca francinelucca Apr 28, 2026

Choose a reason for hiding this comment

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

this actually doesn't look like a valid url 🤔 @henrycatalinismith. it's not really taking me anywhere on the page


Without the IDs we lack a unique identifier for [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant) to reference. As a result, screen readers are unable to announce which option is currently selected.

You can remove this warning by setting IDs on every option in the combobox.
Copy link

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

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

This troubleshooting section title/message says options must have "unique IDs", but the described trigger is "options lack IDs". Align the documentation with the actual runtime check (missing id vs missing/empty/non-unique ids), otherwise readers may look for duplicate IDs when the warning is really about absent/invalid IDs.

Suggested change
You can remove this warning by setting IDs on every option in the combobox.
You can remove this warning by ensuring every option in the combobox has a non-empty `id` attribute (the warning is triggered when options are missing IDs, not when IDs are duplicated).

Copilot uses AI. Check for mistakes.


7 changes: 7 additions & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,13 @@ export default class Combobox {
list.id = `combobox-${Math.random().toString().slice(2, 6)}`
}

if (list.querySelectorAll('[role="option"]:not([id])').length > 0) {
Copy link

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

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

Since you're only checking for existence, querySelector('[role="option"]:not([id])') avoids allocating a full NodeList just to read .length and is simpler.

Suggested change
if (list.querySelectorAll('[role="option"]:not([id])').length > 0) {
if (list.querySelector('[role="option"]:not([id])') !== null) {

Copilot uses AI. Check for mistakes.
console.warn([
'Combobox options must have unique IDs',
'See https://github.com/github/combobox-nav/?tab=readme-ov-file#combobox-options-must-have-unique-ids',
Copy link

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

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

The docs URL includes the GitHub UI query param ?tab=readme-ov-file, which is not a stable permalink and may break over time. Prefer a stable README anchor URL (e.g., the repo root #... link or a blob/<branch>/README.md#... link).

Suggested change
'See https://github.com/github/combobox-nav/?tab=readme-ov-file#combobox-options-must-have-unique-ids',
'See https://github.com/github/combobox-nav#combobox-options-must-have-unique-ids',

Copilot uses AI. Check for mistakes.
].join('\n'))
}
Comment on lines +52 to +57
Copy link

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

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

This PR introduces a new runtime warning; please add a test that stubs console.warn and asserts it fires when an option is missing an id (and does not fire when all options have valid IDs). This will prevent regressions as the selection logic evolves.

Copilot uses AI. Check for mistakes.
Comment thread
francinelucca marked this conversation as resolved.

Comment thread
francinelucca marked this conversation as resolved.
this.ctrlBindings = !!navigator.userAgent.match(/Macintosh/)

this.keyboardEventHandler = event => keyboardBindings(event, this)
Expand Down
Loading