@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/docs/rules/no-noninteractive-element-interactions.md

@@ -0,0 +1,145 @@
+# jsx-a11y/no-noninteractive-element-interactions
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Non-interactive HTML elements and non-interactive ARIA roles indicate _content_ and _containers_ in the user interface. A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
+
+## How do I resolve this error?
+
+### Case: This element acts like a button, link, menuitem, etc
+
+Move the event handler function to an inner element that is either a semantically interactive element (`<button>`, `<a href>`) or that has an interactive role. This leaves the _content_ or _container_ semantic value of this element intact.
+
+Common interactive roles include:
+
+  1. `button`
+  1. `link`
+  1. `checkbox`
+  1. `menuitem`
+  1. `menuitemcheckbox`
+  1. `menuitemradio`
+  1. `option`
+  1. `radio`
+  1. `searchbox`
+  1. `switch`
+  1. `textbox`
+
+Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
+see [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex).
+
+### Case: This element is catching bubbled events from elements that it contains
+
+Move the event handler function to an inner element like `<div>` and give that element a role of `presentation`. This leaves the _content_ or _container_ semantic value of this element intact.
+
+```jsx
+<div role="article">
+  <div
+    onClick="onClickHandler"
+    onKeyPress={onKeyPressHandler}
+    role="presentation">
+    {this.props.children}
+  </div>
+</div>
+```
+
+Marking an element with the role `presentation` indicates to assistive technology that this element should be ignored; it exists to support the web application and is not meant for humans to interact with directly.
+
+### Case: This is a heading that expands/collapses content on the package
+
+Headers often double as expand/collapse controls for the content they headline. An accordion component is a common example of this pattern. Rather than assign the interaction handling code to the heading itself, put a button inside the heading instead. This pattern retains the role of the heading and the role of the button.
+
+```jsx
+<h3>
+  <button onClick={this._expandSection}>News</button>
+</h3>
+<ul id="articles-list">
+  <li>...</li>
+</ul>
+```
+
+### Case: This element is a table cell
+
+Table cells (and tables in general) are meant to contain data. ARIA provides us with a construct called a [Grid](https://w3c.github.io/aria-practices/#grid) that is essentially a 2 dimensional logical container for content and interactive elements.
+
+You have two options in this case.
+
+#### Option 1, move the interactive content inside the table cells
+
+For instance, move the button inside the cell:
+
+```jsx
+<table>
+  <tr>
+    <td><button>Sort</button></td>
+  </tr>
+</table>
+```
+
+This preserves the table cell semantics and the button semantics; the two are not conflated on the cell.
+
+#### Option 2, convert the table into an ARIA grid
+
+If your user interface has a table-like layout, but is filled with interactive components in the cells, consider converting the table into a grid.
+
+```jsx
+<table role="grid">
+  <tr>
+    <td role="gridcell" onClick={this.sort}>Sort</td>
+  </tr>
+</table>
+```
+
+You can also put the interactive content inside the grid cell. This maintains the semantic distinction between the cell and the interaction content, although a grid cell can be interactive.
+
+## Rule options
+
+You may configure which handler props should be taken into account when applying this rule. The recommended configuration includes the following 6 handlers.
+
+```javascript
+'jsx-a11y/no-noninteractive-element-interactions': [
+  'error',
+  {
+    handlers: [
+      'onClick',
+      'onMouseDown',
+      'onMouseUp',
+      'onKeyPress',
+      'onKeyDown',
+      'onKeyUp',
+    ],
+  },
+],
+```
+
+Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
+
+### Succeed
+
+```jsx
+<div onClick={() => void 0} role="button" />
+<div onClick={() => void 0} role="presentation" />
+<input type="text" onClick={() => void 0} /> // Interactive element does not require role.
+<button onClick={() => void 0} className="foo" /> // button is interactive.
+<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from screen reader.
+<Input onClick={() => void 0} type="hidden" /> // This is a higher-level DOM component
+```
+
+### Fail
+
+```jsx
+<li onClick={() => void 0} />
+<div onClick={() => void 0} role="listitem" />
+```
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+
+- [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
+- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
+- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
+- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

package/docs/rules/no-noninteractive-element-to-interactive-role.md

@@ -0,0 +1,76 @@
+# jsx-a11y/no-noninteractive-element-to-interactive-role
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Non-interactive HTML elements indicate _content_ and _containers_ in the user interface. Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<img>`, `<li>`, `<ul>` and `<ol>`.
+
+Interactive HTML elements indicate _controls_ in the user interface. Interactive elements include `<a href>`, `<button>`, `<input>`, `<select>`, `<textarea>`.
+
+[WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
+
+## How do I resolve this error?
+
+### Case: This element should be a control, like a button
+
+Put the control inside the non-interactive container element.
+
+```jsx
+<li>
+  <div
+    role="button"
+    onClick={() => {}}
+    onKeyPress={() => {}}>
+    Save
+  </div>
+</li>
+```
+
+Or wrap the content inside your interactive element.
+
+```jsx
+<div
+  role="button"
+  onClick={() => {}}
+  onKeyPress={() => {}}
+  tabIndex="0">
+  <img src="some/file.png" alt="Save" />
+</div>
+```
+
+## Rule options
+
+The recommended options for this rule allow several common interactive roles to be applied to a non-interactive element. The options are provided as an object keyed by HTML element name; the value is an array of interactive roles that are allowed on the specified element.
+
+```js
+{
+  'no-noninteractive-element-to-interactive-role': [
+    'error',
+    {
+      ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+      ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+      li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+      table: ['grid'],
+      td: ['gridcell'],
+    },
+  ]
+}
+```
+
+Under the recommended options, the following code is valid. It would be invalid under the strict rules.
+
+```jsx
+<ul role="menu" />
+```
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+
+- [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
+- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
+- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
+- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

package/docs/rules/no-noninteractive-tabindex.md

@@ -0,0 +1,115 @@
+# jsx-a11y/no-noninteractive-tabindex
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Tab key navigation should be limited to elements on the page that can be interacted with. Thus it is not necessary to add a tabindex to items in an unordered list, for example, to make them navigable through assistive technology. These applications already afford page traversal mechanisms based on the HTML of the page. Generally, we should try to reduce the size of the page's tab ring rather than increasing it.
+
+## How do I resolve this error?
+
+### Case: I am using an `<a>` tag. Isn't that interactive?
+
+The `<a>` tag is tricky. Consider the following:
+
+```jsx
+<a>Edit</a>
+<a href="#">Edit</a>
+<a role="button">Edit</a>
+```
+
+The bare `<a>` tag is an _anchor_. It has no semantic AX API mapping in either ARIA or the AXObject model. It's as meaningful as `<div>`, which is to say it has no meaning. An `<a>` tag with an `href` attribute has an inherent role of `link`. An `<a>` tag with an explicit role obtains the designated role. In the example above, this role is `button`.
+
+### Case: I am using "semantic" HTML. Isn't that interactive?
+
+If we take a step back into the field of linguistics for a moment, let's consider what it means for something to be "semantic". Nothing, in and of itself, has meaning. Meaning is constructed through dialogue. A speaker intends a meaning and a listener/observer interprets a meaning. Each participant constructs their own meaning through dialogue. There is no intrinsic or isolated meaning outside of interaction. Thus, we must ask, given that we have a "speaker" who communicates via "semantic" HTML, who is listening/observing?
+
+In our case, the observer is the Accessibility (AX) API. Browsers interpret HTML (inflected at times by ARIA) to construct a meaning (AX Tree) of the page. Whatever the semantic HTML intends has only the force of suggestion to the AX API. Therefore, we have inconsistencies. For example, there is not yet an ARIA role for `text` or `label` and thus no way to change a `<label>` into plain text or a `<span>` into a label via ARIA. `<div>` has an AXObject correpondant `DivRole`, but no such object maps to `<span>`.
+
+What this lint rule endeavors to do is apply the AX API understanding of the semantics of an HTML document back onto your code. The concept of interactivity boils down to whether a user can do something with the indicated or focused component.
+
+Common interactive roles include:
+
+  1. `button`
+  1. `link`
+  1. `checkbox`
+  1. `menuitem`
+  1. `menuitemcheckbox`
+  1. `menuitemradio`
+  1. `option`
+  1. `radio`
+  1. `searchbox`
+  1. `switch`
+  1. `textbox`
+
+Endeavor to limit tabbable elements to those that a user can act upon.
+
+### Case: Shouldn't I add a tabindex so that users can navigate to this item?
+
+It is not necessary to put a tabindex on an `<article>`, for instance or on `<li>` items; assistive technologies provide affordances to users to find and traverse these containers. Most elements that require a tabindex -- `<a href>`, `<button>`, `<input>`, `<textarea>` -- have it already.
+
+Your application might require an exception to this rule in the case of an element that captures incoming tab traversal for a composite widget. In that case, turn off this rule on a per instance basis. This is an uncommon case.
+
+If you know that a particular element will be scrollable, you might want to add `tabindex="0"` if your website supports browsers that don't make these containers keyboard-focusable. The current status for this platform feature can be tracked in [Chrome Platform Status "Feature: Keyboard-focusable scroll containers"](https://www.chromestatus.com/feature/5231964663578624).
+
+```jsx
+// eslint-disable-next-line no-noninteractive-tabindex
+<pre tabIndex="0">
+  <code>{someLongCode}</code>
+</pre>
+```
+
+## Rule options
+
+The recommended options for this rule allow `tabIndex` on elements with the noninteractive `tabpanel` role. Adding `tabIndex` to a tabpanel is a recommended practice in some instances.
+
+```javascript
+'jsx-a11y/no-noninteractive-tabindex': [
+  'error',
+  {
+    tags: [],
+    roles: ['tabpanel'],
+    allowExpressionValues: true,
+  },
+]
+```
+
+The `allowExpressionValues` option determines whether the `role` attribute is allowed to be assigned using an expression. For example, the following would pass in recommended mode if `allowExpressionValues` is set to be `true`:
+
+```jsx
+<div role={ROLE_BUTTON} onClick={() => {}} tabIndex="0" />;
+// In case of a conditional expression, there should be literals on both sides of ternary operator
+<div role={isButton ? "button" : "link"} onClick={() => {}} tabIndex="0" />;
+```
+
+### Succeed
+
+```jsx
+<div />
+<MyButton tabIndex={0} />
+<button />
+<button tabIndex="0" />
+<button tabIndex={0} />
+<div />
+<div tabIndex="-1" />
+<div role="button" tabIndex="0" />
+<div role="article" tabIndex="-1" />
+<article tabIndex="-1" />
+```
+
+### Fail
+
+```jsx
+<div tabIndex="0" />
+<div role="article" tabIndex="0" />
+<article tabIndex="0" />
+<article tabIndex={0} />
+```
+
+## Accessibility guidelines
+
+- [WCAG 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
+
+### Resources
+
+- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)

package/docs/rules/no-onchange.md

@@ -0,0 +1,36 @@
+# jsx-a11y/no-onchange
+
+❌ This rule is deprecated.
+
+<!-- end auto-generated rule header -->
+
+⚠️ **Deprecated:** This rule is based on reports of behavior of [old browsers (eg. IE 10 and below)](https://www.quirksmode.org/dom/events/change.html#t05). In the meantime, this behavior has been corrected, both in newer versions of browsers as well as [in the DOM spec](https://bugzilla.mozilla.org/show_bug.cgi?id=969068#c2).
+
+Enforce usage of `onBlur` over/in parallel with `onChange` on select menu elements for accessibility. `onBlur` **should** be used instead of `onChange`, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. `onBlur` is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the `onChange` event in some browsers. Regardless, when a change of context results from an `onBlur` event or an `onChange` event, the user should be notified of the change unless it occurs below the currently focused element.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<select onBlur={updateModel}>
+  <option/>
+</select>
+
+<select>
+  <option onBlur={handleOnBlur} onChange={handleOnChange} />
+</select>
+```
+
+### Fail
+```jsx
+<select onChange={updateModel} />
+```
+
+## Accessibility guidelines
+- [WCAG 3.2.2](https://www.w3.org/WAI/WCAG21/Understanding/on-input)
+
+### Resources
+- [onChange Event Accessibility Issues](https://web.archive.org/web/20191207202425/http://cita.disability.uiuc.edu/html-best-practices/auto/onchange.php)
+- [onChange Select Menu](https://www.themaninblue.com/writing/perspective/2004/10/19/)

package/docs/rules/no-redundant-roles.md

@@ -0,0 +1,46 @@
+# jsx-a11y/no-redundant-roles
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Some HTML elements have native semantics that are implemented by the browser. This includes default/implicit ARIA roles. Setting an ARIA role that matches its default/implicit role is redundant since it is already set by the browser.
+
+## Rule options
+
+The default options for this rule allow an implicit role of `navigation` to be applied to a `nav` element as is [advised by w3](https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element). The options are provided as an object keyed by HTML element name; the value is an array of implicit ARIA roles that are allowed on the specified element.
+
+```js
+{
+  'jsx-a11y/no-redundant-roles': [
+    'error',
+    {
+      nav: ['navigation'],
+    },
+  ],
+}
+```
+
+### Succeed
+
+```jsx
+<div />
+<button role="presentation" />
+<MyComponent role="main" />
+```
+
+### Fail
+
+```jsx
+<button role="button" />
+<img role="img" src="foo.jpg" />
+```
+
+## Accessibility guidelines
+
+General best practice (reference resources)
+
+### Resources
+
+- [ARIA Spec, ARIA Adds Nothing to Default Semantics of Most HTML Elements](https://www.w3.org/TR/using-aria/#aria-does-nothing)
+- [Identifying SVG as an image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#identifying_svg_as_an_image)

package/docs/rules/no-static-element-interactions.md

@@ -0,0 +1,114 @@
+# jsx-a11y/no-static-element-interactions
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Static HTML elements do not have semantic meaning. This is clear in the case of `<div>` and `<span>`. It is less so clear in the case of elements that _seem_ semantic, but that do not have a semantic mapping in the accessibility layer. For example `<a>`, `<big>`, `<blockquote>`, `<footer>`, `<picture>`, `<strike>` and `<time>` -- to name a few -- have no semantic layer mapping. They are as void of meaning as `<div>`.
+
+The [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
+
+In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
+
+## How do I resolve this error?
+
+### Case: This element acts like a button, link, menuitem, etc
+
+Indicate the element's role with the `role` attribute:
+
+```jsx
+<div
+  onClick={onClickHandler}
+  onKeyPress={onKeyPressHandler}
+  role="button"
+  tabindex="0">
+  Save
+</div>
+```
+
+Common interactive roles include:
+
+  1. `button`
+  1. `link`
+  1. `checkbox`
+  1. `menuitem`
+  1. `menuitemcheckbox`
+  1. `menuitemradio`
+  1. `option`
+  1. `radio`
+  1. `searchbox`
+  1. `switch`
+  1. `textbox`
+
+Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
+
+### Case: The event handler is only being used to capture bubbled events
+
+If your element is catching bubbled click or key events from descendant elements, there are no appropriate roles for your element: you will have to deactivate the rule. Consider explaining the reason for disabling the rule as well.
+
+```jsx
+{/* The <div> element has a child <button> element that allows keyboard interaction */}
+{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+<div onClick={this.handleButtonClick}>
+  <button>Save</button>
+  <button>Cancel</button>
+</div>
+```
+
+Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.
+
+## Rule options
+
+You may configure which handler props should be taken into account when applying this rule. The recommended configuration includes the following 6 handlers and the `allowExpressionValues` option.
+
+```javascript
+'jsx-a11y/no-static-element-interactions': [
+  'error',
+  {
+    handlers: [
+      'onClick',
+      'onMouseDown',
+      'onMouseUp',
+      'onKeyPress',
+      'onKeyDown',
+      'onKeyUp',
+    ],
+    allowExpressionValues: true,
+  },
+],
+```
+
+Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
+
+The `allowExpressionValues` option determines whether the `role` attribute is allowed to be assigned using an expression. For example, the following would pass in recommended mode if `allowExpressionValues` is set to be `true`:
+
+```jsx
+<div role={ROLE_BUTTON} onClick={() => {}} />;
+// In case of a conditional expression, there should be literals on both sides of ternary operator
+<div role={isButton ? "button" : "link"} onClick={() => {}} />;
+```
+
+### Succeed
+
+```jsx
+<button onClick={() => {}} className="foo" />
+<div className="foo" onClick={() => {}} role="button" />
+<input type="text" onClick={() => {}} />
+```
+
+### Fail
+
+```jsx
+<div onClick={() => {}} />
+```
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+
+- [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
+- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
+- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
+- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

package/docs/rules/prefer-tag-over-role.md

@@ -0,0 +1,32 @@
+# jsx-a11y/prefer-tag-over-role
+
+<!-- end auto-generated rule header -->
+
+Enforces using semantic DOM elements over the ARIA `role` property.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+
+```jsx
+<div>...</div>
+<header>...</header>
+<img alt="" src="image.jpg" />
+```
+
+### Fail
+
+```jsx
+<div role="checkbox">
+<div role="img">
+```
+
+## Accessibility guidelines
+
+- [WAI-ARIA Roles model](https://www.w3.org/TR/wai-aria-1.0/roles)
+
+### Resources
+
+- [MDN WAI-ARIA Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)

package/docs/rules/role-has-required-aria-props.md

@@ -0,0 +1,31 @@
+# jsx-a11y/role-has-required-aria-props
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Elements with ARIA roles must have all required attributes for that role.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the checkbox role requires the aria-checked state -->
+<span role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0"></span>
+```
+
+### Fail
+
+```jsx
+<!-- Bad: the checkbox role requires the aria-checked state -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
+```
+
+## Accessibility guidelines
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+- [ARIA Spec, Roles](https://www.w3.org/TR/wai-aria/#roles)
+- [Chrome Audit Rules, AX_ARIA_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_03)

package/docs/rules/role-supports-aria-props.md

@@ -0,0 +1,39 @@
+# jsx-a11y/role-supports-aria-props
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. Many ARIA attributes (states and properties) can only be used on elements with particular roles. Some elements have implicit roles, such as `<a href="#" />`, which will resolve to `role="link"`.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the radiogroup role does support the aria-required property -->
+<ul role="radiogroup" aria-required aria-labelledby="foo">
+    <li tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
+    <li tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
+    <li tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
+</ul>
+```
+
+### Fail
+
+```jsx
+<!-- Bad: the radio role does not support the aria-required property -->
+<ul role="radiogroup" aria-labelledby="foo">
+    <li aria-required tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
+    <li aria-required tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
+    <li aria-required tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
+</ul>
+```
+
+## Accessibility guidelines
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+- [ARIA Spec, States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties)
+- [Chrome Audit Rules, AX_ARIA_10](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_10)

package/docs/rules/scope.md

@@ -0,0 +1,30 @@
+# jsx-a11y/scope
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+The `scope` prop should be used only on `<th>` elements.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<th scope="col" />
+<th scope={scope} />
+```
+
+### Fail
+
+```jsx
+<div scope />
+```
+
+## Accessibility guidelines
+- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
+- [WCAG 4.1.1](https://www.w3.org/WAI/WCAG21/Understanding/parsing)
+
+### Resources
+- [axe-core, scope-attr-valid](https://dequeuniversity.com/rules/axe/3.5/scope-attr-valid)