microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.33k stars 2.72k forks source link

VirtualizerScrollView uses flex-direction for items #27285

Open ling1726 opened 1 year ago

ling1726 commented 1 year ago

Using flex-direction to change orientation of items is an a11y antipattern since screen readers and keyboard navigation libraries will always follow DOM order. The change was introduced in https://github.com/microsoft/fluentui/pull/26985.

The usage of flex-direction should be removed because of a11y trap that users can fall into

microsoft-github-policy-service[bot] commented 1 year ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

microsoft-github-policy-service[bot] commented 1 year ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

microsoft-github-policy-service[bot] commented 1 year ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

microsoft-github-policy-service[bot] commented 1 year ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

Mitch-At-Work commented 1 year ago

This issue is ongoing, we have investigated aria-owns for providing 'true' order, however it is not a spec fully supported by the accessibility tools - we are investigating the possibility of an aria-reverse flag that would enable reverse order of components in the accessibility tree to align A11y with Flex CSS

microsoft-github-policy-service[bot] commented 7 months ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

Mitch-At-Work commented 6 months ago

Was hoping to drive this via enabling support in A11Y/Accessibility tools so that CSS matched accessibility - as currently flex-reverse is fully inaccessible, I plan now to reverse this in code instead, so that DOM matches layout.