Fixes #22530: Remove hidden select inputs from the accessibility tree (#22541)

This commit is contained in:
Jeremy Stretch 2026-06-26 13:26:42 -04:00 committed by GitHub
parent 9f140e6442
commit 4f4e97f1a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 3 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -18,6 +18,18 @@ import TomSelect from 'tom-select';
* NetBox issue: https://github.com/netbox-community/netbox/issues/20077 * NetBox issue: https://github.com/netbox-community/netbox/issues/20077
*/ */
export class NetBoxTomSelect extends TomSelect { export class NetBoxTomSelect extends TomSelect {
setup(): void {
super.setup();
// After TomSelect takes over, the original <select> is visually hidden via the
// `ts-hidden-accessible` class and made unfocusable (tabindex=-1), but it remains in the
// accessibility tree. Screen readers (e.g. JAWS) then announce a stray listbox/combobox for
// every enhanced field. The TomSelect-rendered control already exposes an accessible
// combobox, so hide the redundant native element from assistive technology.
// See https://github.com/netbox-community/netbox/issues/22530
this.input.setAttribute('aria-hidden', 'true');
}
focus(): void { focus(): void {
if (this.isDisabled || this.isReadOnly) return; if (this.isDisabled || this.isReadOnly) return;