[a11y] More role="region" cleanup

[cee-chen]

Summary

See #7316 for more discussion and sources on why not to overuse role="region". Also see individual git commit messages for more rationale on specific changes.

Note: most of the line diffs in this PR come from indentation, so please turn off whitespace changes.

QA

• Start a screenreader
• Go to https://eui.elastic.co/pr_7327/#/tabular-content/data-grid
• Click the Sort fields button in the datagrid toolbar
• Pick at least 2 fields to sort by
• Tab back to the drag handles on those fields and re-order one of them
• Confirm the experience still works and our drag/drop library still reads out status updates
• Go to https://eui.elastic.co/pr_7327/#/utilities/scroll
• Confirm that each scrollable example can still be tabbed to and scrolled via arrow keys
• In screen reader Landmarks navigation, confirm each individual example is no longer in the list (compared to prod)

General checklist

• Browser QA
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Updated documentation
• Code quality checklist
  • Added or updated jest snapshots and cypress tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist - N/A

[1Copenut]

👍 Sorry this review took so long. I had to figure out a number of things, which I'll attempt to summarize here:

1. Drag and drop still works great and announces the picked up, moved, and dropped actions correctly in all pairings except Safari + VoiceOver. This is not a regression; it works as it did before. Firefox + VoiceOver worked correctly, as did Firefox + NVDA and Chrome + JAWS.
2. NVDA and JAWS require the user to be in Focus/Forms mode to use the Drag and Drop controls. We mention this in our aria-describedby so yay! to us. I had to figure out how to turn off the PC virtual cursor in JAWS to activate these controls, then re-enable PC virtual cursor when I was done manipulating the list order. I do not consider this an issue; it's more about me learning to use JAWS as it is, not as I thought it was.
3. The scrollable blocks work correctly and do not appear as designated landmarks or in the Landmarks menu. Scrollable blocks are an interesting case. As long as they have tabindex="0" keyboard users can traverse them with arrow keys. Screen readers will traverse blocks that have text or nodes to evaluate using arrow keys, but the content in the block's viewport does not change. Screen readers can also traverse scrollable blocks like a keyboard user (content in viewport changes on arrow key press) by switching into Forms/Focus mode. Testing this was important to me because users with some vision loss or in low light situations may lean into a screen reader to navigate pages and still want to follow along visually.
4. It took me a long time to reliably figure out why NVDA and JAWS were behaving erratically. The tl;dr for JAWS is to toggle PC virtual cursor by press ing Ins + Z. When PC virtual cursor is off, you traverse exactly like a keyboard user, and our non-standard controls like DnD are usable. HP laptops have a feature to override the Functions key and disable volume/brightness/etc. by pressing Esc + Func. Then the NVDA shortcuts work correctly. I'll write these up because the answers were found obliquely in StackOverflow and Reddit answers to other questions.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7327/
• Storybook: https://eui.elastic.co/pr_7327/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: d077ef9

History

• 💚 Build #933 succeeded ee1e90f
• 💔 Build #928 failed ca195e0