Fluentui: [MessageBar] No way to differentiate between expanded/collapsed message bar for screen readers

[ghost]

i) Aria label for the dropdown button available is fixed irrespective of its expand/collapse status
ii) "IsExpandCollapsePatternAvailable" property is "False" for the dropdown button.

Only overflowButtonAriaLabel property is available with no callback for expand/collapse. As a result, the consumer of component can not control screen reader behavior

Example:

https://developer.microsoft.com/en-us/fabric#/components/messagebar

Component:

Accessibility properties of button:

Narrator behavior (narrator buddy):

There are no announcements on activating/deactivating the overflow button

Expected behavior:

Name property value should be 'Expand' when the button is collapsed and 'Collapse' when the button is expanded for the dropdown button.
OR
The button should have the descriptive name property value and 'IsExpandCollapsePatternAvailable' property should be 'true'

[natalieethell]

Hey @prmittal thanks for submitting this issue! @betrue-final-final and I discussed an approach, and I think it makes the most sense to add an aria-collapsed property. (I'm assuming that's related to the IsExpandCollapsePatternAvailable you're referring to, so correct me if I'm wrong).

[ghost]

@natalieethell aria-expanded is the property that should take care of the issue.

[ghost]

@natalieethell I see that the fix made was to add the property to message bar div and not the "See more" button. Would that not be the preferred fix?

[betrue-final-final]

You're suggesting changing the label of the button to "See more"? I can see that being a good change. "Overflow" is more of a UX professional term and not as accessible as "See more".

[ghost]

No. I meant setting the aria-expanded property to the button instead of the full message bar div. The div is not actionable.

[natalieethell]

@prmittal good point, it would make more sense to have aria-expanded on the button element, in combination with aria-controls. I'll open a PR for that change now.

[KevinTCoughlin]

Thanks for raising awareness of this issue @prmittal 😃

[msft-github-bot]

:tada:This issue was addressed in #7423, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site