Splitter: missing/incorrect accessibility features

[shawnharvell]

Describe the bug

I refer to the detailed specs outlined here: https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/

the incorrect one is the use of aria-orientation which while the component prop refers to the orientation of the panels themselves, the aria-orientation should be the orientation of the separator, i.e., always the inverse of the component orientation.

the missing are:

role="separator" on the separator
aria-valuemin and aria-valuemax on the separator
aria-controls on the separator with a value that points to the primary panel
props should be added to the component to allow setting of aria-label and/or aria-labeledby on the separator

and then ideally add to the keyboard handling support for the Home, End and Enter keys

Reproducer

https://primereact.org/splitter/

PrimeReact version

10.3.3

React version

17.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

The behavior is reproducible in any example of the Splitter component, including the samples in Prime React documentation at https://primereact.org/splitter/

Expected behavior

that the separator includes the following attributes in the rendered HTML:

1. aria-orientation with a value that represents the direction of the separator itself (i.e., the inverse of the Splitter prop orientation)
2. aria-valuemin with a value that represents the minimum size of the primary panel (0 default)
3. aria-valuemax with a value that represents the maximum size of the primary panel (100 default)
4. role with the value separator
5. aria-controls with a value that points to a unique ID of the primary panel

The component should have two 2 props, aria-label and aria-labelledby (note that the spec spelling uses labelled and not labeled), the values of these should be passed through to identically named attributes on the separator

Implement additional keyboard functionality:

1. Home - maximizes the primary panel
2. End - minimizes the primary panel
3. Enter - toggles the primary panel between minimum and maximum sizes

[melloware]

These are good suggestions!

[jmegginson]

I also suggest the addition of aria-valuetext in addition to the (required) aria-valuenow. Many screen readers will read simply announce the number value from the aria-valuenow property (e.g., aria-valuenow="30".

It could sounds better with screen readers if developers could optionally add a string like aria-valuetext="30%" in addition to the respective aria-valuenow="30". The percentage sign in the aria-valuetext sounds better in context with the view that is being resized.

[melloware]

Would Aria valuetext be read instead of value-now? I know different screen readers do different things.

[jmegginson]

Yes, Per my tests, JAWS 2023 and NVDA 2023.2 in Chrome will read the aria-valuetext value over the aria-valuenow. VoiceOver MacOS (v13) and ChromeVox (ChromeOS 119+) will also read aria-valuetext over aria-valuenow when present.

Definitively retain aria-valuenow (per ARIA 1.2 spec) but the added description via aria-valuetext adds a little charm and context to the text-to-speech experience IMO.

FYI I also observed that JAWS defaults to reading min=0 and max=100 when the respective aria properties (aria-valuemin and aria-valuemax) are missing. In many of the react splitter examples I notice that some of the panels have min and max sizes that are not the extreme values of 0 and 100. Adding this observation/vote for Shawn's request above.

[melloware]

OK let me take a look and submit a PR. I will let you know when its ready for review!

[melloware]

PR submitted: #5852

I am pretty sure I got everything on your list.

[melloware]

10.4.0 is out if you guys want to test out all my changes?