MessageBar: focusing an element that is hidden hides the rest of the content

[Vitalius1]

Environment Information

• Package version(s): latest
• Browser and OS versions: all

Please provide a reproduction of the bug in a codepen:

The issue can be seen on the Fabric web site and also isolated here: https://codepen.io/vitalius1/pen/vMjBpG

Actual behavior:

When tabbing with the keyboard on a collapsed MessageBar that has a focusable element hidden in the overflow, the focus goes to that element without showing it and also hides the rest of the content, similar to this demo:

... after that, there is no possible way to make the content show again in a collapsed state even if you focus anything else.

Expected behavior:

The content should not disappear.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

[ecraig12345]

@Vitalius1 Just to clarify, are you planning to fix this or just reporting it?

[Vitalius1]

@ecraig12345 just reporting it because I have a deadline to meet on some fluent work. I honestly have no idea how to fix this. A link will be always focusable so how would you ever know if that link is in the overflow or not? Or even better why the browser is focusing on something that is not on the screen?

[ecraig12345]

That's fine. First idea that comes to mind is that when any child of the MessageBar receives focus, it should expand if collapsed. Would have to look into whether that's practical.

[Vitalius1]

Interesting approach... but what if the user does not want to have it expanded without him activating the expand button. Maybe he just wants to tab through the elements but never expand the full message. A very interesting accessibility question that maybe @betrue-final-final can have some input to share: do we automatically expand the collapsed MessageBar when having some focusable elements hidden in the overflow... or the user should be able to first navigate to the expand button and then expand it? What would be the tab order then?

[ecraig12345]

Good point. Changing the tab order so the expand button (if available) comes first sounds reasonable to me--though I'd want to get input from someone more familiar with these type of issues on the best way to do it. (I vaguely remember hearing that it's best to avoid messing with tabindex manually if possible?)

[micahgodbolt]

I've got it worked so that messagebar opens when focus is put into it, though if you close the message bar again the content is hidden again. Been messing with scrollTop without much success.

[msft-fluent-ui-bot]

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.