@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/docs/rules/aria-proptypes.md

@@ -0,0 +1,30 @@
+# jsx-a11y/aria-proptypes
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+ARIA state and property values must be valid.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the aria-hidden state is of type true/false -->
+<span aria-hidden="true">foo</span>
+```
+
+### Fail
+```jsx
+<!-- Bad: the aria-hidden state is of type true/false -->
+<span aria-hidden="yes">foo</span>
+```
+
+## 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_04](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04)

package/docs/rules/aria-role.md

@@ -0,0 +1,51 @@
+# jsx-a11y/aria-role
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
+
+## Rule options
+
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/aria-role": [ 2, {
+            "allowedInvalidRoles": ["text"],
+            "ignoreNonDOM": true
+        }],
+    }
+}
+```
+
+`allowedInvalidRules` is an optional string array of custom roles that should be allowed in addition to the ARIA spec, such as for cases when you [need to use a non-standard role](https://axesslab.com/text-splitting).
+
+For the `ignoreNonDOM` option, this determines if developer created components are checked.
+
+### Succeed
+```jsx
+<div role="button"></div>     <!-- Good: "button" is a valid ARIA role -->
+<div role={role}></div>       <!-- Good: role is a variable & cannot be determined until runtime. -->
+<div></div>                   <!-- Good: No ARIA role -->
+<Foo role={role}></Foo>       <!-- Good: ignoreNonDOM is set to true -->
+```
+
+### Fail
+
+```jsx
+<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role -->
+<div role="range"></div>      <!-- Bad: "range" is an _abstract_ ARIA role -->
+<div role=""></div>           <!-- Bad: An empty ARIA role is not allowed -->
+<Foo role={role}></Foo>       <!-- Bad: ignoreNonDOM is set to false or not set -->
+```
+
+## Accessibility guidelines
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+- [Chrome Audit Rules, AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01)
+- [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/)
+- [MDN: Using ARIA: Roles, states, and properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)

package/docs/rules/aria-unsupported-elements.md

@@ -0,0 +1,30 @@
+# jsx-a11y/aria-unsupported-elements
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` and/or `aria-*` props.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the meta element should not be given any ARIA attributes -->
+<meta charset="UTF-8" />
+```
+
+### Fail
+```jsx
+<!-- Bad: the meta element should not be given any ARIA attributes -->
+<meta charset="UTF-8" aria-hidden="false" />
+```
+
+## Accessibility guidelines
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+- [Chrome Audit Rules, AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_12)
+- [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/)

package/docs/rules/autocomplete-valid.md

@@ -0,0 +1,49 @@
+# jsx-a11y/autocomplete-valid
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Ensure the autocomplete attribute is correct and suitable for the form field it is used with.
+
+## Rule options
+
+This rule takes one optional object argument of type object:
+
+```
+{
+    "rules": {
+        "jsx-a11y/autocomplete-valid": [ 2, {
+            "inputComponents": ["Input", "FormField"]
+        }],
+    }
+}
+```
+
+### Succeed
+```jsx
+<!-- Good: the autocomplete attribute is used according to the HTML specification -->
+<input type="text" autocomplete="name" />
+
+<!-- Good: MyInput is not listed in inputComponents -->
+<MyInput autocomplete="incorrect" />
+```
+
+### Fail
+```jsx
+<!-- Bad: the autocomplete attribute has an invalid value -->
+<input type="text" autocomplete="incorrect" />
+
+<!-- Bad: the autocomplete attribute is on an inappropriate input element -->
+<input type="email" autocomplete="url" />
+
+<!-- Bad: MyInput is listed in inputComponents -->
+<MyInput autocomplete="incorrect" />
+```
+
+## Accessibility guidelines
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose)
+
+### Resources
+- [axe-core, autocomplete-valid](https://dequeuniversity.com/rules/axe/3.2/autocomplete-valid)
+- [HTML 5.2, Autocomplete requirements](https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute)

package/docs/rules/click-events-have-key-events.md

@@ -0,0 +1,28 @@
+# jsx-a11y/click-events-have-key-events
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Enforce `onClick` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screen reader users. This does not apply for interactive or hidden elements.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
+<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
+<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
+<button onClick={() => {}} />
+<div onClick{() => {}} aria-hidden="true" />
+```
+
+### Fail
+```jsx
+<div onClick={() => {}} />
+```
+
+## Accessibility guidelines
+- [WCAG 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)

package/docs/rules/control-has-associated-label.md

@@ -0,0 +1,113 @@
+# jsx-a11y/control-has-associated-label
+
+🚫 This rule is _disabled_ in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Enforce that a control (an interactive element) has a text label.
+
+There are two supported ways to supply a control with a text label:
+
+- Provide text content inside the element.
+- Use the `aria-label` attribute on the element, with a text value.
+- Use the `aria-labelledby` attribute on the element, and point the IDREF value to an element with an accessible label.
+- Alternatively, with an `img` tag, you may use the `alt` attribute to supply a text description of the image.
+
+The rule is permissive in the sense that it will assume that expressions will eventually provide a label. So an element like this will pass.
+
+```jsx
+<button type="button">{maybeSomethingThatContainsALabel}</button>
+```
+
+## How do I resolve this error?
+
+### Case: I have a simple button that requires a label.
+
+Provide text content in the `button` element.
+
+```jsx
+<button type="button">Save</button>
+```
+
+### Case: I have an icon button and I don't want visible text.
+
+Use the `aria-label` attribute and provide the text label as the value.
+
+```jsx
+<button type="button" aria-label="Save" class="icon-save" />
+```
+
+### Case: The label for my element is already located on the page and I don't want to repeat the text in my source code.
+
+Use the `aria-labelledby` attribute and point the IDREF value to an element with an accessible label.
+
+```jsx
+<div id="js_1">Comment</div>
+<textarea aria-labelledby="js_1"></textarea>
+```
+
+### Case: My label and input components are custom components, but I still want to require that they have an accessible text label.
+
+You can configure the rule to be aware of your custom components. Refer to the Rule Details below.
+
+```jsx
+<CustomInput label="Surname" type="text" value={value} />
+```
+
+## Rule options
+
+This rule takes one optional object argument of type object:
+
+```json
+{
+  "rules": {
+    "jsx-a11y/control-has-associated-label": [ 2, {
+      "labelAttributes": ["label"],
+      "controlComponents": ["CustomComponent"],
+      "ignoreElements": [
+        "audio",
+        "canvas",
+        "embed",
+        "input",
+        "textarea",
+        "tr",
+        "video",
+      ],
+      "ignoreRoles": [
+        "grid",
+        "listbox",
+        "menu",
+        "menubar",
+        "radiogroup",
+        "row",
+        "tablist",
+        "toolbar",
+        "tree",
+        "treegrid",
+      ],
+      "depth": 3,
+    }],
+  }
+}
+```
+
+- `labelAttributes` is a list of attributes to check on the control component and its children for a label. Use this if you have a custom component that uses a string passed on a prop to render an HTML `label`, for example.
+- `controlComponents` is a list of custom React Components names that will render down to an interactive element.
+- `ignoreElements` is an array of elements that should not be considered control (interactive) elements and therefore they do not require a text label.
+- `ignoreRoles` is an array of ARIA roles that should not be considered control (interactive) roles and therefore they do not require a text label.
+- `depth` (default 2, max 25) is an integer that determines how deep within a `JSXElement` the rule should look for text content or an element with a label to determine if the interactive element will have an accessible label.
+
+### Succeed
+```jsx
+<button type="button" aria-label="Save" class="icon-save" />
+```
+
+### Fail
+```jsx
+<button type="button" class="icon-save" />
+```
+
+## Accessibility guidelines
+- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
+- [WCAG 3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions)
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)

package/docs/rules/heading-has-content.md

@@ -0,0 +1,67 @@
+# jsx-a11y/heading-has-content
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Enforce that heading elements (`h1`, `h2`, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the `aria-hidden` prop. Refer to the references to learn about why this is important.
+
+## Rule options
+
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/heading-has-content": [ 2, {
+            "components": [ "MyHeading" ],
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<h1>` thru `<h6>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `h1` element (like in React):
+
+
+```js
+// Header.js
+const Header = props => {
+  return (
+    <h1 {...props}>{ props.children }</h1>
+  );
+}
+
+...
+
+// CreateAccount.js (for example)
+...
+return (
+  <Header>Create Account</Header>
+);
+```
+
+#### Bad
+```jsx
+function Foo(props) {
+  return <label {...props} />
+}
+```
+
+### Succeed
+```jsx
+<h1>Heading Content!</h1>
+<h1><TextWrapper /><h1>
+<h1 dangerouslySetInnerHTML={{ __html: 'foo' }} />
+```
+
+### Fail
+```jsx
+<h1 />
+<h1><TextWrapper aria-hidden />
+```
+
+## Accessibility guidelines
+- [WCAG 2.4.6](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html)
+
+### Resources
+- [axe-core, empty-heading](https://dequeuniversity.com/rules/axe/3.2/empty-heading)

package/docs/rules/html-has-lang.md

@@ -0,0 +1,31 @@
+# jsx-a11y/html-has-lang
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+<html> elements must have the lang prop. This rule is largely superseded by the [`lang` rule](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/lang.md).
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<html lang="en">
+<html lang="en-US">
+<html lang={language}>
+```
+
+### Fail
+
+```jsx
+<html>
+```
+
+## Accessibility guidelines
+- [WCAG 3.1.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page)
+
+### Resources
+- [axe-core, html-has-lang](https://dequeuniversity.com/rules/axe/3.2/html-has-lang)
+- [axe-core, html-lang-valid](https://dequeuniversity.com/rules/axe/3.2/html-lang-valid)

package/docs/rules/iframe-has-title.md

@@ -0,0 +1,37 @@
+# jsx-a11y/iframe-has-title
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+`<iframe>` elements must have a unique title property to indicate its content to the user.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<iframe title="This is a unique title" />
+<iframe title={uniqueTitle} />
+```
+
+### Fail
+```jsx
+<iframe />
+<iframe {...props} />
+<iframe title="" />
+<iframe title={''} />
+<iframe title={``} />
+<iframe title={undefined} />
+<iframe title={false} />
+<iframe title={true} />
+<iframe title={42} />
+```
+
+## Accessibility guidelines
+- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks)
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+
+### Resources
+- [axe-core, frame-title](https://dequeuniversity.com/rules/axe/3.2/frame-title)

package/docs/rules/img-redundant-alt.md

@@ -0,0 +1,48 @@
+# jsx-a11y/img-redundant-alt
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as *image*, *photo*, and/or *picture*.
+
+## Rule options
+
+This rule takes one optional object argument of type object:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/img-redundant-alt": [ 2, {
+            "components": [ "Image" ],
+            "words": [ "Bild", "Foto" ],
+          }],
+    }
+}
+```
+
+For the `components` option, these strings determine which JSX elements (**always including** `<img>`) should be checked for having redundant words in the `alt` prop value . This is a good use case when you have a wrapper component that simply renders an `img` element (like in React).
+
+For the `words` option, these strings can be used to specify custom words that should be checked for in the alt prop, including `image`, `photo`, and `picture`. Useful for specifying words in other languages.
+
+The rule will first check if `aria-hidden` is true to determine whether to enforce the rule. If the image is hidden, then rule will always succeed.
+
+### Succeed
+```jsx
+<img src="foo" alt="Foo eating a sandwich." />
+<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" /> // Will pass because it is hidden.
+<img src="baz" alt={`Baz taking a ${photo}`} /> // This is valid since photo is a variable name.
+```
+
+### Fail
+```jsx
+<img src="foo" alt="Photo of foo being weird." />
+<img src="bar" alt="Image of me at a bar!" />
+<img src="baz" alt="Picture of baz fixing a bug." />
+```
+
+## Accessibility guidelines
+General best practice (reference resources)
+
+### Resources
+- [WebAIM, Alternative Text](https://webaim.org/techniques/alttext/)

package/docs/rules/interactive-supports-focus.md

@@ -0,0 +1,156 @@
+# jsx-a11y/interactive-supports-focus
+
+💼 This rule is enabled in the following configs: ☑️ `recommended`, 🔒 `strict`.
+
+<!-- end auto-generated rule header -->
+
+Elements with an interactive role and interaction handlers (mouse or key press) must be focusable.
+
+## How do I resolve this error?
+
+### Case: I got the error "Elements with the '${role}' interactive role must be tabbable". How can I fix this?
+
+This element is a stand-alone control like a button, a link or a form element. A user should be able to reach this element by pressing the tab key on their keyboard.
+
+Add the `tabIndex` property to your component. A value of zero indicates that this element can be tabbed to.
+
+```jsx
+<div
+  role="button"
+  tabIndex={0} />
+```
+
+-- or --
+
+Replace the component with one that renders semantic html element like `<button>`, `<a href>` or `<input>` -- whichever fits your purpose.
+
+Generally buttons, links and form elements should be reachable via tab key presses. An element that can be tabbed to is said to be in the _tab ring_.
+
+### Case: I got the error "Elements with the '${role}' interactive role must be focusable". How can I fix this?
+
+This element is part of a group of buttons, links, menu items, etc. Or this element is part of a composite widget. Composite widgets prescribe standard [keyboard interaction patterns](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav). Within a group of similar elements -- like a button bar -- or within a composite widget, elements that can be focused are given a tabindex of -1. This makes the element _focusable_ but not _tabbable_. Generally one item in a group should have a tabindex of zero so that a user can tab to the component. Once an element in the component has focus, your key management behaviors will control traversal within the component's pieces. As the UI author, you will need to implement the key handling behaviors such as listening for traversal key (up/down/left/right) presses and moving the page focus between the focusable elements in your widget.
+
+```jsx
+<div role="menu">
+  <div role="menuitem" tabIndex="0">Open</div>
+  <div role="menuitem" tabIndex="-1">Save</div>
+  <div role="menuitem" tabIndex="-1">Close</div>
+</div>
+```
+
+In the example above, the first item in the group can be tabbed to. The developer provides the ability to traverse to the subsequent items via the up/down/left/right arrow keys. Traversing via arrow keys is not provided by the browser or the assistive technology. See [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav) for information about established traversal behaviors for various UI widgets.
+
+### Case: This element is not a button, link, menuitem, etc. It is catching bubbled events from elements that it contains
+
+If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is `presentation`.
+
+```jsx
+<div
+  onClick={onClickHandler}
+  role="presentation">
+  <button>Save</button>
+</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.
+
+## Rule options
+
+This rule takes an options object with the key `tabbable`. The value is an array of interactive ARIA roles that should be considered tabbable, not just focusable. Any interactive role not included in this list will be flagged as needing to be focusable (tabindex of -1).
+
+```js
+{
+  'jsx-a11y/interactive-supports-focus': [
+    'error',
+    {
+      tabbable: [
+        'button',
+        'checkbox',
+        'link',
+        'searchbox',
+        'spinbutton',
+        'switch',
+        'textbox',
+      ],
+    },
+  ]
+}
+```
+
+The recommended options list interactive roles that act as form elements. Generally, elements with a role like `menuitem` are a part of a composite widget. Focus in a composite widget is controlled and moved programmatically to satisfy the prescribed [keyboard interaction pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav) for the widget.
+
+The list of possible values includes:
+
+```js
+[
+  'button',
+  'checkbox',
+  'columnheader',
+  'combobox',
+  'grid',
+  'gridcell',
+  'link',
+  'listbox',
+  'menu',
+  'menubar',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'progressbar',
+  'radio',
+  'radiogroup',
+  'row',
+  'rowheader',
+  'searchbox',
+  'slider',
+  'spinbutton',
+  'switch',
+  'tab',
+  'tablist',
+  'textbox',
+  'toolbar',
+  'tree',
+  'treegrid',
+  'treeitem',
+  'doc-backlink',
+  'doc-biblioref',
+  'doc-glossref',
+  'doc-noteref',
+]
+```
+
+### Succeed
+
+```jsx
+<!-- Good: div with onClick attribute is hidden from screen reader -->
+<div aria-hidden onClick={() => void 0} />
+<!-- Good: span with onClick attribute is in the tab order -->
+<span onClick="doSomething();" tabIndex="0" role="button">Click me!</span>
+<!-- Good: span with onClick attribute may be focused programmatically -->
+<span onClick="doSomething();" tabIndex="-1" role="menuitem">Click me too!</span>
+<!-- Good: anchor element with href is inherently focusable -->
+<a href="javascript:void(0);" onClick="doSomething();">Click ALL the things!</a>
+<!-- Good: buttons are inherently focusable -->
+<button onClick="doSomething();">Click the button :)</button>
+```
+
+### Fail
+
+```jsx
+<!-- Bad: span with onClick attribute has no tabindex -->
+<span onclick="submitForm();" role="button">Submit</span>
+<!-- Bad: anchor element without href is not focusable -->
+<a onclick="showNextPage();" role="button">Next page</a>
+```
+
+## Accessibility guidelines
+
+- [WCAG 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
+
+### Resources
+
+- [Chrome Audit Rules, AX_FOCUS_02](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_02)
+- [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
+- [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
+- [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)