Re: [csswg-drafts] [css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order (#7387)

I agree with a lot of the concerns noted by @aardrian in https://github.com/w3c/csswg-drafts/issues/7387#issuecomment-1160991881 and while I think it's clear we need to do something here, I want us to be careful about what we're doing so that we don't make things worse. To that end, there's a few things we should consider:

- Focus order and screenreader order should always match.
- There are clear use cases for disconnecting these from the box layout order, the most fundamental of which is to make sure the focus/screenreader order matches the visual perception order (which is not necessarily the same as the layout order).
- There are a lot of cases where authors are using `order` as a convenience to perform semantic reordering (e.g. sorting lists). These are cases where all the orders should match, including the source order.
- There are also cases where visual design choices should affect all user interaction orders, but the reordering is not fundamentally semantic (because either order would convey the same information, essentially the pieces are semantically unordered).
- Each component or hierarchical level of a page can have different requirements for reordering, so we shouldn't design something that lends itself too easily to blanket use (like box-sizing) rather than tailored use (like logical properties).

My proposal here is twofold:

- Put some pressure on the DOM teams to provide a better API for reordering siblings. Something like `Element.sortChildrenBy(attribute or comparison function)` could go a long way towards reducing inappropriate use of `order` for semantic ordering, especially if it can be so simple that we can slip copy-pasteable examples into various tutorials and reference pages on `order` itself.
- Add a property (“reading-order”) that affects reading and interaction order simultaneously, not just focus order, and in a way that lends itself to explicit tailoring for each case of reordering, e.g.:

   ```
     reading-order: source | auto | <integer>
       impacts screenreader, 'speech' media, focus order (subordinate to tabindex)
       source = document source order (as currently)
       auto = source, except match randomizing layout methods (dense/masonry)
       <integer> = modify source order by <integer> (just like order/z-index)
   ```

   Could even make it a longhand of `order` (bikeshed keyword):
   ```
   order: <'box-order'> [ <'reading-order'> | reading-matches-box-order ]?
     box-order: <integer> /* current order property */
     reading-order: source | auto | <integer>
   ```

  This makes it easy to think about them together, and allows a lot of flexibility in tailoring the reading order compared to the box order, but requires considering the reading order explicitly in order to affect it.

-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7387#issuecomment-1217193918 using your GitHub account


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

Received on Tuesday, 16 August 2022 21:38:16 UTC