Enable and fix eslint rules (9)

[aldeed]

Uncomment the following lines in .eslintrc, run npm run lint, and fix all errors, either manually or using eslint --fix

// "extends": [
  //   "plugin:jsx-a11y/recommended"
  // ],

[spencern]

Update the style guide with any changes that come out of this, update the documentation with best practices.

[mikemurray]

Resources
https://www.levelaccess.com/aria-widget-checklist-screen-reader-testing/
https://www.w3.org/TR/wai-aria-1.1/

1. SIMULATED CHECKBOX CONTROLS

Components

Switch

Is backed by a checkbox, but may need additional ARIA attributes for compliance.

Current state of compliance

• Cannot tab or shift+tab to navigate between switches.
• Does not have focus

Checkbox

• Verify aria compliance

How it should work

• Tab and Shift+Tab between them
• Spacebar selects / deselects

How it should work

• role="checkbox
• aria-checked

---

2. SIMULATED BUTTON AND LINK CONTROLS

Components

Unknown. They live in the shadows.

What to look out for:

<div onClick={this.handleClick}></div>

Any element that is not an <a> or a <button> that has an onClick event or is otherwise clickable needs to have role="button or role="link".

How it should work

• Tab and Shift+Tab between them
• Have aria-labelledby or aria-label or embedded content.

Current state of compliance

Unknown. Definitely not 100% compliant.

---

3. ARIA TOGGLE BUTTONS

Button

Has a toggle state that could be used to simulate checkbox functionality.
when toggle={true}, the button should use ARIA role="checkbox

Current state of compliance

• None

How it should work

• Tab and Shift+Tab between them
• Have attributes role="button"
• On toggle have aria-pressed={true} or aria-pressed={false}
• On focus Have aria-labelledby or aria-label or embedded content.

---

4. TOGGLE BUTTON ACCORDION CONTROLS

Components

Card

Card component behaves like an accordion when you click on the CardHeader and the card collapses/expands.

Current state of compliance

None

How it should work

• Tab and Shift+Tab between components marked with attribute useAsExpander={true}
• CardHeader role="heading"
• CardHeader role="button"
• CardHeader aria-pressed
• CardHeader aria-expanded
• CardHeader aria-controls
• CardHeader aria-labelby
• Card or CardBody aria-region (Use name of card or uniq-id)
• Card arial-level
• Pressed stated when aria-pressed={true} or aria-pressed={false}
• Expanded stated when aria-expanded={true} or aria-expanded={false}

---

5. EXPANDABLE LINK ACCORDION CONTROLS

Similar to 4. TOGGLE BUTTON ACCORDION CONTROLS

This is for link <a /> components.

6. BASIC SIMULATED RADIO CONTROLS

Components

None

How it should work

• Focusable with arrow key navigation
• role="radiogroup"
• role="radio"
• X of Y position aria-posinset & aria-setsize
• aria-checked
• aria-owns
• On focus Have aria-labelledby or aria-label or embedded content.

---

7. HORIZONTAL SLIDER CONTROL

Components

Slider

Is Aria compliant with latest version.

---

8. VERTICAL SLIDER CONTROL

Components

Slider

Is Aria compliant with latest version.

---

9. SINGLE-SELECT SIMULATED LISTBOX CONTROL

Components

List

List and ListItem components should be considered a simulated listbox control.

How it should work

• role="listbox"
• role="option"
• aria-posinset
• aria-setsize
• aria-selected
• aria-label
• aria-owns
• Focusable with arrow key navigation
• Spacebar selects

---

10. SINGLE-SELECT SIMULATED LISTBOX CONTROL PLUS TRI-STATE CHECKABLE OPTIONS

Components

List

The <List> and <ListItem> component.

List with extra options like switch

How it should work

• role="listbox"
• role="option"
• aria-checked
• aria-posinset
• aria-setsize
• aria-selected
• aria-label
• aria-owns
• needs to be able to be focused
• needs keyboard up / down controls
• pressing spacebar should select
• See Editing of tags broken  #10 https://www.levelaccess.com/aria-widget-checklist-screen-reader-testing/

11. MULTISELECTABLE SIMULATED LISTBOX CONTROL

Components

List

The <List> and <ListItem> component.

Order table

Order table uses react-table which is not ARIA compliant

How it should work

• role="listbox"
• role="option"
• aria-checked
• aria-posinset
• aria-setsize
• aria-selected
• aria-label
• aria-owns
• needs to be able to be focused
• needs keyboard up / down controls
• pressing spacebar should select
• See product hashtags managed as array, most recent used in url #11 https://www.levelaccess.com/aria-widget-checklist-screen-reader-testing/

12. SUBSTRING EDITABLE COMBOBOX

Components

ReactSelect (react-select)

• Is ARIA compliant

13. SIMULATED READONLY COMBOBOX

ReactSelect

• Is ARIA compliant

14. INTERACTIVE GRID CONTROL

Components

ReactTable (react-table)

• React table not compliant
• Does not have any aria tags related to grid controls

How it should work

• role="grid"
• role="rowgroup"
• role="row"
• role="gridcell"
• role="rowheader"
• role="columnheader"
• aria-describedby
• aira-selected
• aria-owns
• aria-labelledby
• needs to be able to be focused
• needs keyboard up / down controls
• focus between cells should announce column header cell name using aria-describedby
• announce row or cell when aira-selected={true}

15. DISABLED DATE RANGE COMPOUND COMPONENT DATE PICKER CONTROL

Components

React Dates (react-dates)

• react component is compliant.
• Our implementation needs verification of aria compliance

How it should work

• role="application"
• role="dialog'
• role="button"
• role="link"
• aria-label
• aria-disabled
• needs to be able to be focused
• needs keyboard up / down controls
• date link On focus Have aria-labelledby or aria-label or embedded content.

16 & 17. BUTTON: BASIC LEFT-CLICK HORIZONTAL/VERTICAL POPUP MENU CONTROL

DropDownMenu

• Has menu button
• Has menu component
• MenuItem components are passed into DropDownMenu component as children

How it should work

• role="application"
• role="menubar'
• role="menuitem"
• aria-posinset
• aria-setsize
• aria-selected
• aria-haspopup
• aria-owns
• needs to be able to be focused on menuitem when activating menu button
• needs keyboard up / down / left / right controls
• announce menuitem that have aria-haspopup (these are sub-menus)
• announce menuitem that have aria-expanded when element has focus via aria-haspopup={true}
• application mode should be invoked for the current focused menuitem

18. ARIA TEXTBOX: BASIC RIGHT-CLICK POPUP MENU CONTROL

We don't do this anywhere, and probably should never do this anywhere.

19. ARIA TAB GROUP

Components

TabList and TabItem

The TabList and and TabItem comoinent is core/ui

How it should work

• role="tablist" for TabList component
• role="tab' fro TabItem component
• role="tabpanel' for content (Component does not exist)
• aria-posinset
• aria-setsize
• aria-expanded
• aria-selected
• aria-controls
• aria-selected
• aria-labelledby
• aria-owns
• On focus Have aria-labelledby or aria-label or embedded content.
• role-tab conveyed when aria-selected is toggled true or false
• role-tab conveyed when aria-expanded is toggled true or false
• X of Y position aria-posinset & aria-setsize
• associated tabpanel region should be converyed when exposed

20. ARIA TAB GROUP: COMPLEX WITH RIGHT-CLICK POPUP MENU CONTROL

This is a right click menu on the tab item itself.

We don't do this anywhere, and probably should never do this anywhere.

21. ARIA TREE CONTROL

We don't do this anywhere.

22. ARIA TREE: COMPLEX WITH RIGHT-CLICK POPUP MENU CONTROL

We don't do this anywhere.

23. CUSTOMIZED AUTO-ROTATING CAROUSEL CONTROL

Components

none in Reaction Core. We used react-slick on in another project.

How it should work

• role="region"
• aria-live="polite
• (Carosel Buttons) need to be able to be focused
• (Carosel Buttons) On focus Have aria-labelledby or aria-label or embedded content.
• named region should be conveyed when exposed
• (Carosel Buttons) slide content shoould be announced by aria-live="polite

24. STATIONARY SLIDESHOW CONTROL (left / right arrow)

none in Reaction Core. We used react-slick on in another project.

How it should work

• role="region"
• aria-live="polite
• (Slideshow Buttons) need to be able to be focused
• (Slideshow Buttons) On focus Have aria-labelledby or aria-label or embedded content.
• named region should be conveyed when exposed
• (Slideshow Buttons) slide content shoould be announced by aria-live="polite

25. SIMPLE HELP TOOLTIP CONTROL

Components

none. This relates to a tooltip for a text input

How it should work

• role="region"
• aria-live="polite
• Setting focus to and typing into the edit field should cause a dynamic tooltip to appear
• Tooltip text should automatically be announced when rendered via aria-live="polite
• Typing should change tooltip and shoubd be announced aria-live="polite
• Loosing focus on field casues tooltip to disappear

26. SIMPLE ERROR TOOLTIP CONTROL

Components

none. This relates to a validation tooltip for a text input

How it should work

• role="region"
• aria-live="polite
• Setting focus to a required field and then pressing Tab to move away from the empty field should cause a dynamic error tooltip to appear,
• Error tooltip text should automatically be announced when rendered via aria-live="polite
• Typing into and moving focus away from the edit field should cause the tooltip to disappear

27. MODAL DIALOG CONTROL

Components

• Search modal
• Sometimes the action panel on mobile sizes

How it should work

• role="dialog"
• aria-label
• aria-describedby
• aria-modal
• aria-hidden
• Activating the modal open button should generate a modal dialog
• Focus should be set to first field and the dialog Name and Description should be announced
• Background content should be hidden from screen reader users
• Pressing Tab and Shift+Tab should move focus only between focusable active elements within the dialog
• When the dialog is closed focus should be set back to the button that opened the modal

28. AGRESSIVE MODAL DIALOG CONTROL

Components

• Alert modal
• Order cancel alert

How it should work

• role="dialog"
• role="alert"
• aria-label
• aria-describedby
• aria-modal
• aria-hidden
• Activating the modal open button should generate a modal dialog
• Focus should be set to first field and the dialog Name and Description should be announced
• Background content should be hidden from screen reader users
• Pressing Tab and Shift+Tab should move focus only between focusable active elements within the dialog
• When the dialog is closed focus should be set back to the button that opened the modal

29. BASIC POPUP CONTROL

Components

• Account login dropdown

How it should work

• role="region"
• aria-live="polite"
• The triggering element expanded state should be reliably conveyed when aria-expanded is toggled between false or true,
• Activating the triggering element should generate a popup overlay
• Popup text should automatically be announced when rendered via aria-live="polite",
• Focus should be set to the beginning of the popup content when rendered
• The associated named Region should be conveyed when exposed
• When the popup is closed focus should be set back to the triggering element.

30. POPUP PROGRESSBAR CONTROL

We don't have a page blocking, popup progress control. Only spinners for elements moving waiting for data.

31. ARIA TOOLTIPS

Components

• Tooltip

How it should work

• role="region"
• role="tooltip"
• aria-describedby
• Setting focus to or mousing over and item with an enabled tooltip should cause a tooltip to appear
• Tooltip text should automatically be announced when rendered via aria-describedby (thus triggering a description_changed event)
• Moving focus away or mousing out of the element with the enabled tooltip should cause the tooltip to disappear

32. SIMPLE WEB CHAT CONTROL

• We use intercom on the website. This would be their concern.

33. SIMPLE CHECKBOX CONTROLS

• aria-live="polite"
• When a checkbox is toggled the status message should automatically be announced when rendered via aria-live="polite".

[aldeed]

Documentation for the plugin: https://www.npmjs.com/package/eslint-plugin-jsx-a11y

You could actually try switching to their plugin:jsx-a11y/strict option instead of recommended. Need to investigate what the differences are.