source: frontend/node_modules/eslint-plugin-jsx-a11y/docs/rules/aria-activedescendant-has-tabindex.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 2 weeks ago

Fix frontend appearance

  • Property mode set to 100644
File size: 2.0 KB
RevLine 
[9af201e]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).
8The element with the attribute `aria-activedescendant` retains the active document
9focus; it indicates which of its child elements has secondary focus by assigning
10the ID of that element to the value of `aria-activedescendant`. This pattern is
11used to build a widget like a search typeahead select list. The search input box
12retains document focus so that the user can type in the input. If the down arrow
13key is pressed and a search suggestion is highlighted, the ID of the suggestion
14element will be applied as the value of `aria-activedescendant` on the input
15element.
16
17Because an element with `aria-activedescendant` must be tabbable, it must either
18have an inherent `tabIndex` of zero or declare a `tabIndex` attribute.
19
20## Rule details
21
22This 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
49General 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)
Note: See TracBrowser for help on using the repository browser.