[EuiHeaderSection] Keyboard navigation through items

[smith]

Describe the problem

When using keyboard navigation and tabbing in to an EuiHeaderSection, you should be able to use the arrow keys to navigate between the items

This component should behave according to the Toolbar pattern in the ARIA Authoring Practices Guide

To Reproduce

• Go to a page with a header menu
• Press tab until the first item of the menu has focus
• Press left/right/home/end
  • Expected: The focus moves to the other items in the section
  • Actual: Nothing happens
• Press tab
  • Expected: The focus moves to the next item past the header menu section
  • Actual: The focus moves to the next button on the toolbar

Proposed solution

Implement keyboard behavior that allows you to use the arrow keys within the list.

WCAG or Vendor Guidance (optional)

• https://www.w3.org/WAI/ARIA/apg/patterns/toolbar

[cee-chen]

I'm not convinced the component is a toolbar - that feels a touch too prescriptive for what's essentially a styled <header> element. Should all semantic headers have arrow key/tabstop behavior?

[smith]

I'm not convinced the component is a toolbar - that feels a touch too prescriptive for what's essentially a styled

element. Should all semantic headers have arrow key/tabstop behavior?

I'm not saying the header is a toolbar, I'm saying the items in an EuiHeaderSection make up a toolbar.

So, in this Kibana header, these three buttons on the right, together, act as a toolbar:

The idea of header sections makes sense, but I was a bit surprised that there were EuiHeaderSectionItems and EuiHeaderSectionItemButtons. I would have expected there to be a section that I put a button group in.

In most uses of the header there's a group of buttons on the right, and those are the ones that have a toolbar role.