Fluentui: CommandBar: Accessibility - total number of actions in items AND farItems should be read together

[eveleens]

Bug Report

• __Package version(s)__: at least 6.49
  __Browser and OS versions__: Edge + Narrator

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected: Flow

Describe the issue:

We're getting an accessibility bug where if you have a CommandBar with 2 items and 1 farItem, the Narrator is reading "1 of 2" and "2 of 2" for the items and "1 of 1" for the farItem.

I personally disagree with this bug, and I'm actually not sure what the behavior is "supposed" to be. To me, these are two different menus, so what exists today is correct. However, I'm unable to find accessibility documentation for what happens on multiple menus like this, and the accessibility team has flagged us for this. If anyone can provide me docs otherwise, that would also be helpful.

Actual behavior:

It reads "1 of 2, 2 of 2" for the item buttons, and then "1 of 1" for the farItem.

Expected behavior:

It should read "1 of 3, 2 of 3" for the items, and "3 of 3" for the farItem.

[cliffkoh]

@betrue-final-final @micahgodbolt Would you be able to answer Eveleen's question? (This issue is really a question...)

[micahgodbolt]

Maybe the error is occurring because the entire command bar is considered a single 'menubar'.

We could change it to be a set of two menubars, though I question that approach due to the fact that it is currently a single tab stop.

[eveleens]

Should it stay as a single tab stop? If so, then a single menubar makes sense -- and then that means all actions would theoretically be in the same hierarchy and be counted as one. We would then be assuming that there is only a visual difference. I think this is valid, UNLESS we are fitting in "secondary" commands in farItems - which would mean a lower case group of actions. We should re-access what it means to have farItems vs all items on the left?

[mikewheaton]

@betrue-final-final What are your thoughts on this? When a CommandBar has items split between the left and right, is that presentational or should we be indicating to users that there are essentially two different menus?

The current behavior seems like a bug because the CommandBar behaves as a single bar (you can arrow through both left and right-side items) but it reads like they're separate menus. A screen reader user wouldn't know that the right-side items exist based on hearing "2 of 2".

[micahgodbolt]

My original approach had it as two tab stops. I think if we really wanted this to be a single role=menubar (and single stop) we might need to put ALL of the command bar items into a single parent(right now they are split into 2). This would mean significant changes to the overflowSet, or making the commandBar's overflow just a random botton in the middle of the component, with far items after it....and no actual overflow.

Anyway, that's why I always felt that 2 tab stops made sense. It's 2 different sets of UI that just happen to be on the same vertical level.

[eveleens]

@cliffkoh, does this need author feedback? I think we're waiting on @betrue-final-final.

@micahgodbolt, the other thing we could do is number them differently, even if they're in two separate parents. It might start to get complicated, needing to track the totals though.

[betrue-final-final]

The separation is a specifically visual organization construct. I would continue to read it as one menubar, and the count should include both left and right items.

[betrue-final-final]

The reason I take this stance is that having two menu bars creates friction for the blind user that a sighted user doesn't get from the visual organization.

[dzearing]

@micahgodbolt @khmakoto Is there a fix here?

[kenotron]

https://developer.microsoft.com/en-us/fabric?fabricVer=6#/controls/web/commandbar
Nowdays does not read out "X of Y item" anymore. It just simply says "menu item". I don't think this issue repros anymore