cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.3k stars 140 forks source link

chore: Tabs use single tab stop navigation mechanism #2330

Closed pan-kot closed 1 month ago

pan-kot commented 1 month ago

Description

Updated keyboard navigation logic in Tabs to use single-tab-stop context.

So far there is a lot of similarities with src/table/table-role/grid-navigation.ts. There is an opportunity to reuse the parts of code that define focusables, focusableHandles, and focusablesState state, but I would prefer to do it in a separate follow-up PR to keep the diff manageable.

The change is supposed to introduce no difference to the current Tabs UX. We do it to support the upcoming feature: https://github.com/cloudscape-design/components/pull/2173 (actions in tabs). The update is proven to work with actions: https://github.com/cloudscape-design/components/pull/2325.

How has this been tested?

Review checklist _The following items are to be evaluated by the author(s) and the reviewer(s)._ #### Correctness - _Changes include appropriate documentation updates._ - _Changes are backward-compatible if not indicated, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### Testing - _Changes are covered with new/existing unit tests?_ - _Changes are covered with new/existing integration tests?_

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov[bot] commented 1 month ago

Codecov Report

Attention: Patch coverage is 95.69892% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 95.46%. Comparing base (605fab6) to head (6f3a1e1). Report is 4 commits behind head on main.

Files Patch % Lines
src/tabs/tab-header-bar.tsx 95.69% 4 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2330 +/- ## ======================================== Coverage 95.46% 95.46% ======================================== Files 706 706 Lines 18757 18848 +91 Branches 5966 6319 +353 ======================================== + Hits 17906 17993 +87 + Misses 843 801 -42 - Partials 8 54 +46 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.