CommandBar doesn't provide overflow for farItems and items cut off at small viewport sizes

[brandonthomas]

Environment Information

• Package version(s): Fabric 7.x.x
• Browser and OS versions: NA

Describe the issue:

Many of our apps use a component we build that includes a CommandBar. For us to be compliant with the reflow part of WCAG 2.1 we need to support viewports down to 320px. The issue with CommandBar and its farItems prop is that it's rendered into an OverflowSet that black boxes a nullRender function. So if we have consumers who put in 10 items it's impossible for them to be compliant.

Problem Line:
https://github.com/OfficeDev/office-ui-fabric-react/blob/770a4ea294c8d523208bc94532655148d88139f7/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.base.tsx#L124

Screenshot of cutoff

Please provide a reproduction of the issue in a codepen:

https://codepen.io/brandonthomas/pen/KKwjWjm -> Simply go here and squish the viewport to 320px.

Actual behavior:

farItems cut off and there's nothing a consumer can do because the null render is black boxed within CommandBar.

Expected behavior:

Far items don't cut off when the viewport is reduced.

Documentation describing expected behavior

https://www.w3.org/TR/WCAG21/#reflow

[khmakoto]

Hi @brandonthomas, thanks for filing this issue!

@micahgodbolt and @joschect I think we could change that null render and provide an option for consumers to have overflow items on the right side of the CommandBar which would be a backwards compatible change, what do you think?

[micahgodbolt]

Yeah, the command bar was built to focus on the primary items. The farside was expected to be so small that it didn't have an overflow behavior.

To fix this we need to (1) support the far items overflow, and (2) start moving faritems into the overflow once all of the primary items have been moved over.

One thing to consider is that under a given breakpoint, maybe commandbar isn't a good control to use. A bar with 2 overflow menus full of items is....odd. Maybe under a given width you render the data as a dropdown instead, or some vertical navigation.

[brandonthomas]

@micahgodbolt how are we feeling about this? I agree that having a dual overflow is less than ideal but I'm trying to figure out how we address the issue here without putting a ton of burden on all the feature teams. Issue is that even small items in the right side need to overflow when our viewport is only 320px wide.

[micahgodbolt]

This needs to be a design driven change. At this point guidance is to use CommandBar at 100% page width and to ensure that far items + overflow aren't too large for the screen.

If we are to support overflowing far items, we need design to drive those changes.

[brandonthomas]

@betrue-final-final is this you then? We need a solution here. Our only other option is to reflow the right items to the left which probably comes with its own baggage.

[micahgodbolt]

one thought is that maybe you don't have near/far items at all, and you just have items that are split across the command bar (Outlook asked about this too).

In this case you can always put everything in near items and just push one of the middle items to fill space https://codepen.io/micahgodbolt/pen/KKpeGJp

[jeffersoneagley]

+1 on this one, and +1 on the bandaid above.