Re: [csswg-drafts] [css-grid] Masonry layout in CSS Grid 3 has potential to cause accessibility problems with reading order. (#5675)

I've been noodling on the interactions between masonry and [reading-flow](https://www.w3.org/TR/css-display-4/#reading-flow) and I don't think it changes the outcome which masonry option we go with, I also don't think any of this raises fundamental issues that might block the integration work with the HTML spec, but folks can chime in if they think I'm wrong.

The TL:DR is that I think we need to answer two main questions. 

- Do we think reading-flow in masonry is more like flexbox or more like grid? The answer to that dictates the number of keywords and the behavior they cause.
- What threshold indicates an item is in the same row or column for reading flow purposes?

## Is masonry like grid or flex for reading flow?

For the first part, I think the question to answer is whether we want to take the `*-reverse` keywords into account or not. Which is really about whether we think masonry is more like grid or more like flexbox where `reading-flow` is concerned. 

For flex layouts we have two keywords for `reading-flow`: `flex-visual` and `flex-flow`. The `flex-visual` value follows the visual reading flow of items taking writing-mode into account. The `flex-flow` value follows the `flex-direction`.

Examples (_use Chrome Canary with Experimental web platform features flag on_):

- [reading-flow: flex-flow, with order modification, flex-direction: row-reverse](https://chrome.dev/reading-flow-examples/flex-flow-with-order-reverse.html)
- [reading-flow: flex-visual, with order modification, flex-direction: row-reverse](https://chrome.dev/reading-flow-examples/flex-visual-with-order-reverse.html)

For grid layout we assume people intend the `reading-flow` to be by row or by column, rather than following the ‘flow’.

Examples (_use Chrome Canary with Experimental web platform features flag on_):

- [reading-flow: grid-rows, with placed items](https://chrome.dev/reading-flow-examples/grid-placement-row.html)
- [reading-flow: grid-rows, with grid-auto-flow: dense](https://chrome.dev/reading-flow-examples/grid-auto-flow-dense.html)

### Grid-independent masonry option

With a separate masonry spec, if we think masonry behaves more like grid, then we have two new keywords:

`reading-flow: masonry-rows`
Only takes effect on masonry containers. Follows the visual order of masonry items by row, taking the writing mode into account.
`reading-flow: masonry-columns`
Only takes effect on masonry containers. Follows the visual order of masonry items by column, taking the writing mode into account.

My second question deals with what exactly a row is, visually. For now assume we’ve figured that out.

If we think masonry is more like flex, then we need an additional keyword.

`reading-flow: masonry-flow`
Only takes effect on masonry containers. Follows the visual reading order of masonry items, taking the writing mode and `masonry-direction` into account. This would mean that reading-flow could follow the reversed rows order, I am not sure how useful this actually is.

_Note: We could add this additional keyword at a later date if we discovered a use for it._

### Grid-integrated masonry option

If we think masonry is more like grid: We avoid having new keywords, therefore `reading-flow: grid-rows` would attempt to follow the reading-flow by row and `reading-flow: grid-column` by column, regardless of the masonry grid axis. It would also ignore `row-reverse`, `column-reverse`, and `wrap-reverse` options. Therefore, the following two layouts would be the same in terms of the reading-flow, it would be by row running left-to-right, assuming we’re in English.

```
.grid {
  display: grid;
  grid-auto-flow: row-reverse;
  reading-flow: grid-rows;
}

.grid {
  display: grid;
  grid-auto-flow: row;
  reading-flow: grid-rows;
}
```

If we think masonry is more like flex, we could keep the existing keywords, or rename them for consistency to `masonry-columns` and `masonry-rows`. However they would remain analogous to the `grid-*` versions. We would however need an additional keyword.

`reading-flow: masonry-visual`
Only takes effect on grid containers with masonry in one axis. Follows the visual reading order of masonry items, taking the grid-auto-flow and writing-mode into account.
 
I find the interaction with grid-auto-flow in the grid-integrated version of masonry to be very confusing. This might be less confusing if the note in [Issue 3 of the CSS-GRID-3 spec](https://drafts.csswg.org/css-grid-3/#grid-auto-flow) is followed, and masonry behaves more like flex in general. 

## What actually is a row?

The reading-flow property attempts to follow logical rows or columns. In masonry it’s possible to have items that poke up into the row above only by a very small amount. Visually, something poking into the row above or column to the left by a few pixels wouldn’t seem like it was in that row or column.

For example, in the [WebKit museum demo](https://webkit.org/demos/grid3/museum/) (_needs Safari Technology Preview or see the following screenshot_),  should we be tabbing from “Flowers in a Vase” to “Painted Chest”, to “Niagara” (deemed both in row 1) then to “Army Boots”. Or do we treat “Niagara” as row 2 and therefore tab “Flowers in a Vase”, “Painted Chest”, “Army Boots”, and then “Niagara”?

<img width="782" alt="image" src="https://github.com/user-attachments/assets/10ea08b5-f178-48f6-99d4-302ff1c5fe9c" />

We’ll need to figure out that threshold somehow.




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


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

Received on Monday, 30 December 2024 08:16:36 UTC