The reading-flow CSS property controls the order in which elements in a flex, grid or block layout are exposed to accessibility tools and focused via TAB keyboard focus navigation. This change implements the CSS reading-flow keyword values: * normal * flex-visual * flex-flow * grid-rows * grid-columns * grid-order * source-order See spec: https://drafts.csswg.org/css-display-4/#reading-flow The reading-order CSS property allows authors to manually-override the order within a reading flow container. It is an integer with default value 0. See spec: https://drafts.csswg.org/css-display-4/#reading-order Please find more thorough examples of how TAB keyboard navigation and accessibility is improved by this feature here: https://chrome.dev/reading-flow-examples/
We want to allow the content displayed on a screen to be navigated visually and not always follow the DOM order. To do this, we need to add support for grid and flex reading flow. This applies to keyboard navigation and screen to speech tools; which help make the web more accessible for all.