Skip to content

Commit

Permalink
fix(combobox): fix aria-role for proper voiceover support (#9039)
Browse files Browse the repository at this point in the history
**Related Issue:** #8460

## Summary

- Move combobox role from container wrapper to the input element
-
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role#examples
  • Loading branch information
driskull authored Apr 5, 2024
1 parent 15ca10a commit eebe8ca
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions packages/calcite-components/src/components/combobox/combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1554,7 +1554,10 @@ export class Combobox
aria-activedescendant={this.activeDescendant}
aria-autocomplete="list"
aria-controls={`${listboxUidPrefix}${guid}`}
aria-expanded={toAriaBoolean(open)}
aria-haspopup="listbox"
aria-label={getLabelText(this)}
aria-owns={`${listboxUidPrefix}${guid}`}
class={{
input: true,
"input--single": true,
Expand All @@ -1568,6 +1571,7 @@ export class Combobox
onFocus={this.comboboxFocusHandler}
onInput={this.inputHandler}
placeholder={placeholder}
role="combobox"
type="text"
// eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el) => (this.textInput = el as HTMLInputElement)}
Expand Down Expand Up @@ -1662,21 +1666,14 @@ export class Combobox
<Host onClick={this.comboboxFocusHandler}>
<InteractiveContainer disabled={this.disabled}>
<div
aria-autocomplete="list"
aria-controls={`${listboxUidPrefix}${guid}`}
aria-expanded={toAriaBoolean(open)}
aria-haspopup="listbox"
aria-label={getLabelText(this)}
aria-live="polite"
aria-owns={`${listboxUidPrefix}${guid}`}
class={{
wrapper: true,
"wrapper--single": singleSelectionMode || !this.selectedItems.length,
"wrapper--active": open,
}}
onClick={this.clickHandler}
onKeyDown={this.keyDownHandler}
role="combobox"
// eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setReferenceEl}
>
Expand Down

0 comments on commit eebe8ca

Please sign in to comment.