separator role can be interactive for WAI-ARIA 1.1 Window Splitter design pattern

[majornista]

Per https://www.w3.org/TR/wai-aria-practices-1.1/#windowsplitter, and element with role="separator" can be interactive and support aria- properties.

So the following errors are false positives:

error  Static HTML elements with event handlers require a role                            jsx-a11y/no-static-element-interactions
error  Non-interactive elements should not be assigned mouse or keyboard event listeners  jsx-a11y/no-noninteractive-element-interactions
error  The attribute aria-valuenow is not supported by the role separator                 jsx-a11y/role-supports-aria-props
error  The attribute aria-valuemin is not supported by the role separator                 jsx-a11y/role-supports-aria-props
error  The attribute aria-valuemax is not supported by the role separator                 jsx-a11y/role-supports-aria-props
error  `tabIndex` should only be declared on interactive elements                         jsx-a11y/no-noninteractive-tabindex

WAI-ARIA Roles, States, and Properties

• The element that serves as the focusable splitter has role separator.
• The separator element has the aria-valuenow property set to a decimal value representing the current position of the separator.
• The separator element has the aria-valuemin property set to a decimal value that represents the position where the primary pane has its minimum size. This is typically 0.
• The separator element has the aria-valuemax property set to a decimal value that represents the position where the primary pane has its maximum size . This is typically 100.
• If the primary pane has a visible label, it is referenced by aria-labelledby on the separator element. Otherwise, the separator element has a label provided by aria-label.
• The separator element has aria-controls referring to the primary pane.

[puresick]

Just stumbled across the false positives described above using role="separator".

For jsx-a11y/no-noninteractive-element-interactions the correct behaviour can be configured via its roles parameter inside .eslintrc (or similar): https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/bb84abc793435a25398160242c5f2870b83b72ca/docs/rules/no-noninteractive-tabindex.md#rule-details
If changing the rules default here into allowing tabindex="0" on role="separator" might be open for discussion.

jsx-a11y/role-supports-aria-props on the other hand unfortunately does not allow any configuration. Are there any plans yet or has there any work already done to fix this rule?

[puresick]

Looking a bit into the issue with jsx-a11y/role-supports-aria-props and its code, I found out that was not directly an issue by this rule, but by the dependency aria-query which does not include this in the used version of 4.2.2.

They did introduce aria-valuenow, aria-valuemin and aria-valuemax support for role="separator" in version 5.0.0 of aria-query.

Updating the required version for aria-query should be enough to fix this issue:

[puresick]

There is already a PR being worked on which will update aria-query: #814