search

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.44k stars 2.72k forks source link

Pivot does not support overflow per WCAG2.1 Reflow requirement #11863

Closed ayuspark closed 4 years ago

ayuspark commented 4 years ago

Environment Information

Describe the issue:

Per WCAG2.1 Reflow requirement, we need to have the UI responsive down to 1280x1024 at 400% zoom (and everything in between); all content should be accessible with no bi-directional scrolling (except content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content).

Current <Pivot /> component does not hide overflow PivotItems when zoomed in at 400%.

Actual behavior:

PivotItem not collapsed.

Expected behavior:

PivotItem collapsed like in OverflowSet items.

xugao commented 4 years ago

@ayuspark - thanks for reporting. currently Pivot control is not designed to be responsive. I will check with design on what the expected experience should be. However, i don't think we can get this implemented in the short-term

ayuspark commented 4 years ago

@ayuspark - thanks for reporting. currently Pivot control is not designed to be responsive. I will check with design on what the expected experience should be. However, i don't think we can get this implemented in the short-term

@xugao thank you for getting back so quickly! I'm working on a Microsoft product and we heavily rely on Fabric UI and BAF. I can also see that in many other products under Dynamics there're customized component written to bypass the reflow issue. Maybe it's worth investigating on it :)

xugao commented 4 years ago

@ayuspark - definitely! In fact, this is something we tried to tackle before. see #4066. We will continue to follow up there and close this one as duplicate