| 1 | # jsx-a11y/aria-activedescendant-has-tabindex
|
|---|
| 2 |
|
|---|
| 3 | 💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
|
|---|
| 4 |
|
|---|
| 5 | <!-- end auto-generated rule header -->
|
|---|
| 6 |
|
|---|
| 7 | `aria-activedescendant` is used to manage focus within a [composite widget](https://www.w3.org/TR/wai-aria/#composite).
|
|---|
| 8 | The element with the attribute `aria-activedescendant` retains the active document
|
|---|
| 9 | focus; it indicates which of its child elements has secondary focus by assigning
|
|---|
| 10 | the ID of that element to the value of `aria-activedescendant`. This pattern is
|
|---|
| 11 | used to build a widget like a search typeahead select list. The search input box
|
|---|
| 12 | retains document focus so that the user can type in the input. If the down arrow
|
|---|
| 13 | key is pressed and a search suggestion is highlighted, the ID of the suggestion
|
|---|
| 14 | element will be applied as the value of `aria-activedescendant` on the input
|
|---|
| 15 | element.
|
|---|
| 16 |
|
|---|
| 17 | Because an element with `aria-activedescendant` must be tabbable, it must either
|
|---|
| 18 | have an inherent `tabIndex` of zero or declare a `tabIndex` attribute.
|
|---|
| 19 |
|
|---|
| 20 | ## Rule details
|
|---|
| 21 |
|
|---|
| 22 | This rule takes no arguments.
|
|---|
| 23 |
|
|---|
| 24 | ### Succeed
|
|---|
| 25 | ```jsx
|
|---|
| 26 | <CustomComponent />
|
|---|
| 27 | <CustomComponent aria-activedescendant={someID} />
|
|---|
| 28 | <CustomComponent aria-activedescendant={someID} tabIndex={0} />
|
|---|
| 29 | <CustomComponent aria-activedescendant={someID} tabIndex={-1} />
|
|---|
| 30 | <div />
|
|---|
| 31 | <input />
|
|---|
| 32 | <div tabIndex={0} />
|
|---|
| 33 | <div aria-activedescendant={someID} tabIndex={0} />
|
|---|
| 34 | <div aria-activedescendant={someID} tabIndex="0" />
|
|---|
| 35 | <div aria-activedescendant={someID} tabIndex={1} />
|
|---|
| 36 | <div aria-activedescendant={someID} tabIndex={-1} />
|
|---|
| 37 | <div aria-activedescendant={someID} tabIndex="-1" />
|
|---|
| 38 | <input aria-activedescendant={someID} />
|
|---|
| 39 | <input aria-activedescendant={someID} tabIndex={0} />
|
|---|
| 40 | <input aria-activedescendant={someID} tabIndex={-1} />
|
|---|
| 41 | ```
|
|---|
| 42 |
|
|---|
| 43 | ### Fail
|
|---|
| 44 | ```jsx
|
|---|
| 45 | <div aria-activedescendant={someID} />
|
|---|
| 46 | ```
|
|---|
| 47 |
|
|---|
| 48 | ## Accessibility guidelines
|
|---|
| 49 | General best practice (reference resources)
|
|---|
| 50 |
|
|---|
| 51 | ### Resources
|
|---|
| 52 | - [MDN, Using the aria-activedescendant attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute)
|
|---|