feat(tabs): traverse tabs with arrow keys

[weronikaolejniczak]

Summary

Both the WCAG and MDN specifications for tabs specify that they should be within a tab group and traversed via arrow keys.

Screen.Recording.2024-11-05.at.12.41.35.mov

I've noticed there are 2 ways the tabs are used:

1. either with EuiTabbedContent (that provides a tabpanel; EuiTabs and EuiTab accessible from the same level),
2. or using EuiTabs + EuiTab directly (composition through children prop).

I decided to put the logic inside EuiTabs as its the common point between the 2 use cases and it makes sense for that wrapper to traverse the nodes within and manipulate the DOM (as opposed to traversing them inside EuiTab from the parentElement or handling in EuiTabbedContent).

closes #8005

QA

I tested the changes in the Storybook, the docs and against Kibana (the provided use case: Main Menu > Management > Dev Tools) with VoiceOver.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests (not applicable)
• 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
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[cee-chen]

Can we add a Cypress test checking that this still works if consumers completely change their tabs dynamically? Or what happens if they dynamically disable some tabs?

[weronikaolejniczak]

@cee-chen that's a very good idea! I didn't even think of a dynamic tab use case. Could you share an example from Kibana? Or maybe you have an idea of what that test could look like?

[cee-chen]

It's been a use case reported in a bug by our users, primarily for EuiTabbedContent:

• [EuiTabbedContent] TypeError: Cannot read property 'content' of undefined #7350
• [EuiTabbedContent] Fix error when updated with a completely new tabs prop #7713

Making it an EuiTabbedContent Cypress test (or Jest test, whatever's easier) where the component gets updated with new tabs probably makes the most sense.

[cee-chen]

Apologies it took me so long to get back to this PR Weronika! Your changes look terrific. Just to recap, here's what's remaining

• Ternary / looping logic comment
• Adding a test that checks the dynamic of disabling tabs in Cypress or Jest (arrow keys should skip past disabled tabs, and disabling another tab and enabling another after mount should correctly skip past the disabled tab and allow the enabled one to be arrow'd to).

Once the above is in, I think this is good to merge!

[cee-chen]

Changes LGTM. I have an optional extra regression test request around tabbing past disabled tabs, but I don't want it to block this PR as it's working now :)

[cee-chen]

Optional - can we add a 3rd tab and disable the 2nd one to confirm that arrow keying past disabled tabs works as expected? I mention this because this UX was broken before we added the :not([disabled]) selector as part of the code review, so I'd like to make sure it doesn't regress in the future!

[weronikaolejniczak]

@cee-chen absolutely we can add it, thank you for the suggestion 🙌🏻

What would you say about the inert case? I don't see the tabs consuming inert prop and setting inert on a parent doesn't make sense for testing whether an inert element is skipped.

[cee-chen]

Yeah I'm fine skipping explicit inert testing, disabled was the main one I wanted to ensure had a test!

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8116/
• Storybook: https://eui.elastic.co/pr_8116/storybook
• New docs: https://eui.elastic.co/pr_8116/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 4cc2dbd

History

• 💚 Build #3084 succeeded c10696e
• 💔 Build #3081 failed b25165d
• 💚 Build #3073 succeeded 22bbc04
• 💚 Build #3046 succeeded a0cb507
• 💚 Build #3028 succeeded 63b23a6
• 💚 Build #3018 succeeded bb63b1c

[cee-chen]

Thanks for adding the extra disabled test Weronika!! This looks and works great!