a11y: Element with role combobox missing accessible name

[blackfalcon]

Please verify the version of auro-combobox you have installed

@latest

Please describe the bug

See the following code:

auro-combobox/src/auro-combobox.js

Lines 712 to 758 in 6e23ce9

	render() {
	return html`
	<div>
	<div aria-live="polite" class="util_displayHiddenVisually">
	${this.optionActive && this.availableOptions.length > 0
	? html`
	${`${this.optionActive.innerText}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
	`
	: undefined
	}
	</div>
	<${this.dropdownTag}
	for="dropdownMenu"
	bordered
	rounded
	matchWidth
	nocheckmark
	?disabled="${this.disabled}"
	?error="${this.validity !== undefined && this.validity !== 'valid'}"
	disableEventShow>
	<${this.inputTag}
	slot="trigger"
	bordered
	?required="${this.required}"
	?noValidate="${this.noValidate}"
	?disabled="${this.disabled}"
	?icon="${this.triggerIcon}"
	.type="${this.type}">
	<slot name="label" slot="label"></slot>
	</${this.inputTag}>
	<div class="menuWrapper">
	<slot></slot>
	</div>
	<span slot="helpText">
	${this.auroInputHelpText
	? html`
	${this.auroInputHelpText}
	`
	: html`
	<slot name="helpText"></slot>
	`
	}
	</span>
	</${this.dropdownTag}>
	</div>
	`;
	}

One or more elements that has a role='combobox' attribute, not intentionally hidden in the DOM and available to assistive technologies, does not have a mechanism that allows an accessible name to be calculated.

Reproducing the error

This issue is reproducible on the Auro docsite

Expected behavior

When elements with role of combobox do not have an accessible name, assistive technologies may incorrectly guess at a name or provide no name at all to users. When an accessible name is not present, users of assistive technologies may not be able to complete a form.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Recommendation

The following code changes are recommended to simplify the DOM rendering of the element and increase accessibility awareness for screen reader users.

1. remove the for attribute. Does not appear to be used anywhere else in the DOM
2. add aria-labelledby="combobox-label" for accessible name association

-          for="dropdownMenu"
+          aria-labelledby="combobox-label"
           bordered

1. Add id="combobox-label"

-            <slot name="label" slot="label"></slot>
+            <slot name="label" slot="label" id="combobox-label"></slot>

Additional recommendation

Within the render() function the return HTML is wrapped in an undefined div element. This is not required for LitElement and serves no real purpose in the template. Recommend removing wrapping div element.

Additional state management

The following aria roles need to be considered, but undetermined where they should be added within this context. The issue of the role="button" currently makes this difficult to determine. a11yUX needs to be reviewed once issue AlaskaAirlines/auro-dropdown#273 is addressed.

aria-expanded="false"
aria-haspopup="listbox"
aria-owns="listbox"
aria-autocomplete="list"
aria-activedescendant="" // takes as its value the id of the currently focused element.
aria-controls="listbox"

Exit criteria

The exit criteria for resolving this issue require the auro-combobox component to correctly implement accessible naming conventions, ensuring all elements with a role="combobox" are identifiable by assistive technologies. The redundant for attribute must be removed, the aria-labelledby attribute applied, and the wrapping div element eliminated. Accessibility testing with screen readers and cross-browser validation must confirm the changes function as expected. Documentation should be updated to reflect the improvements, and any dependencies, such as issue #273 in auro-dropdown, should be addressed to ensure compatibility. The final product must meet accessibility standards, pass QA review, and be released as an updated version.

[blackfalcon]

The severity of the issue was updated to CRITICAL due to an active complaint from the DOT regarding accessibility in UIs supported by this element.

See ADO story for additional details https://itsals.visualstudio.com/E_Sell_Shop/_workitems/edit/1144649

[blackfalcon]

Related issue

• a11y: triggering element cannot contain interactive elements auro-dropdown#273