[csswg-drafts] [css-overflow-5] Focus order of generated controls (#10912)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow-5] Focus order of generated controls ==
Scroll markers #10720 and scroll buttons #10722 add focusable controls around the scrolling content. This issue is intended to cover the details of how they should be focused, which likely also implies what their relative tree order should be.

For the purposes of discussion let's consider a hypothetical DOM:
```html
<input id=before-scroller>
<div class=scroller>
  <input id=item1>
  <input id=item2>
  ...
</div>
<input id=after-scroller>
```

Styled with scroll markers and/or scroll buttons, e.g.:
```css
.scroller {
  scroll-marker-group: before | after;
}
.scroller::scroll-button(inline-start) {
  content: "<" / "Previous page";
}
.scroller::scroll-button(inline-end) {
  content: ">" / "Next page";
}
```

What should the tab order be, when you start on `#before-scroller` and tab forward? For the sake of making it easier to discuss, I think it might be helpful to define some terms:
* Buttons: All scroll-buttons, ordered by previous buttons, next buttons
* Previous buttons: All scroll-buttons navigating back, i.e. the block-start and inline-start directions in this order.
* Next buttons: All scroll-buttons navigating forward, i.e. the inline-end and block-end direction directions in this order.
* Markers: The scroll marker group, resulting in the active marker being focused.
* Before markers: The scroll-marker-group if it is `scroll-marker-group: before`.
* After markers: The scroll-marker-group if it is `scroll-marker-group: after`.
* Content: Focus goes through the content of the scroller, i.e. `#item1`, `#item2`

Options:
1. Buttons, Before Markers, Content, After Markers
2. Before Markers, Buttons, Content, After Markers
3. Before Markers, Previous buttons, Content, Next buttons, After Markers
4. Previous buttons, Before Markers, Content, After Markers, Next buttons

Some existing examples:
- [The aria apg demo](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/) and @argyleink's carousel has the [previous and next buttons next to each other](https://gui-challenges.web.app/carousel/dist/) in focus order despite the latter having them visually separated.

Note:
* Once you interact with a control, we can change the next tab stop to be the targeted content similar to how following an anchor link [sets the sequential focus navigation starting point](https://html.spec.whatwg.org/#scrolling-to-a-fragment:sequential-focus-navigation-starting-point). This means that clicking on a marker or clicking on next page, and then tabbing could be defined to focus into the contents of the linked item / page regardless of the normal next item in tab order.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10912 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 18 September 2024 15:49:59 UTC