[EuiPageHeader] The focus order of rightSideItems does not correspond to the logical processing sequence

[morhof]

WCAG success criterion 2.4.3 - focus order - A

Steps to reproduce

1. Click on Management
2. Select Stack Management
3. Select Saved Objects

Actual Result

• After opening the page “Saved Objects”, the focus is set on the button “Export 6 objects”, and not on “Refresh”, so that keyboard users must navigate from right to left, which is not the expected sequence.

Expected Result

• The focus order should correspond to the logical and visual processing order.
• The buttons should be efficiently accessible via shortcut.

Meta Issue
n.a.

Kibana Version:
8.3
OS:
Microsoft Windows 10 Enterprise (64-bit)
Browser:
Google Chrome 109.0.5414.75 (64-Bit)

Screen reader:
n.a.

Relevant WCAG Criteria:
WCAG success criterion 2.4.3 - focus order - A
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Relevant ARIA spec:
n.a.

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[cee-chen]

Transferring to the EUI repo - this needs to be addressed at the EuiPageHeader level.

[breehall]

After reviewing, I don't think this is a bug. EuiPageHeader intentionally sets the content of the header to have a flex-direction of row-reverse. This is why the last element in the header is selected on focus first. The component has the rightSideGroupProps prop that can be used to change the direction of these elements to use row instead of row-reverse.

In terms of accessibility, @1Copenut do you mind throwing in your 2 cents? I'm inclined to say it's not an issue and if the team wanted to update the direction of the elements, they have the ability to. I don't think this requires any changes in EUI.

[cee-chen]

This is an accessibility issue, not a "bug" per se, but it is definitely an issue and the default needs to be changed. Just because consumers can override it via props doesn't mean they will, and the role of EUI is to set good accessibility defaults and best practices.

Instead of using flex-direction we should clone and reverse the array so that DOM rendering follows the tab order.

[1Copenut]

I +1 to @cee-chen comment here. I was reading through Technique C27: Making the DOM order match the visual order to double-check. Visually English is top to bottom and left to right, so moving out of the left navigation users have a reasonable expectation the Refresh button would receive focus first (in the original highlighted example).

[breehall]

Instead of using flex-direction we should clone and reverse the array so that DOM rendering follows the tab order.

Thank you both for the explanations here! I'll move forward with this info.