Skip to content

Commit

Permalink
Handle PR feedback.
Browse files Browse the repository at this point in the history
  • Loading branch information
atmgrifter00 committed Sep 17, 2024
1 parent b890a1c commit f33f031
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion packages/nimble-components/src/tabs/specs/scrollable-tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ The following decisions were agreed to in the comments section in the linked iss
- Keyboard navigation will work as it does today, but when a tab that isn't fully in view gets focus it should be scrolled into view
- When a scroll button is pressed we will scroll either a full "page width" or the remainder of the available space, and tab focus is not changed.

Additionally, the mouse wheel should allow scrolling through the tabs, but instead of scrolling a page at a time, a single scroll "tick" will scroll by one tab.

To accomplish this we will fork FAST's template in order to add the scroll buttons. A `ResizeObserver` will be used to track when the scrollable area exceeds the viewable area in order to show/hide the scroll buttons.

There will be no new API to enable this behavior, and will simply be on by default.
Expand All @@ -39,6 +41,8 @@ Only the tabs themselves will be scrollable. The scroll buttons will only surrou

Now that the tabs will be able to be scrolled, it makes sense to add a keyboard interaction that will perform this scroll without the need of using the buttons. When a tab in the tab list has focus, pressing `PageUp/PageDown` will perform the same scroll behavior as pressing the scroll buttons _and additionally_ jump the tab focus by the same page amount (or to the first/last tab). This is needed to make the scrolling of the tabs useful for a keyboard-only user.

_Note: For the `AnchorTabs` when tab focus moves via the `PageDown/PageUp` keys, no navigation will occur, just as with the `Home/End` keys._

#### Scroll buttons

While there are no explicit ARIA guidelines for how dynamic buttons in something like a tablist should respond to the keyboard, the [interaction pattern for the carousel](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/#keyboardinteraction) is fairly similar to this use-case, which suggests that the scroll buttons could be valid tab stops.
Expand Down Expand Up @@ -66,7 +70,7 @@ Related:

- The [Shoelace design system](https://shoelace.style/components/tab-group#scrolling-tabs) has an example of this approach

**Roving tab strategy**:
**Roving tab index strategy**:

Pros:

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f33f031

Please sign in to comment.