Accessibility support for MessageBar component:
Expose a way to control the assertiveness of the message accessibility alert
What component or utility would this be added to
MessageBar component
Have you discussed this feature with our team, and if so, who
No
Additional context/screenshots
We use the MessageBar component to confirm the completion of actions that were initiated by the user in a dialog/panel.
For Accessibility, MessageBar will read out its normal-level status text as aria-live polite, but the problem is that for many cases the reading of the polite messaging by screen readers is often cut off by the reading of other information (eg, from focus update after the user action).
Feature request is to either:
a) Expose a way for us to control the aria-live polite vs assertive level for the MessageBar component
b) Expose a way to suppress the aria-live handling for the MessageBar component, so that we can fire our own aria alerts.
@natalieethell perhaps a use-case for <Announced />?
@KevinTCoughlin thanks for looping me in!
@denniscoh There was actually a similar issue (https://github.com/OfficeDev/office-ui-fabric-react/issues/3455) opened about a month ago and we made a change (https://github.com/OfficeDev/office-ui-fabric-react/pull/7854) to mix in native props to MessageBar. So, you should actually be able to pass in your own aria-live value to override the default, like so:
public render(): JSX.Element {
return (
<MessageBar aria-live={'assertive'}>
Message
</MessageBar>
);
}
Let us know if that works for you!
This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!
@natalieethell We just tried passing aria-live to MessageBar, and it works great. Thank you!
Closing this bug.
Most helpful comment
@KevinTCoughlin thanks for looping me in!
@denniscoh There was actually a similar issue (https://github.com/OfficeDev/office-ui-fabric-react/issues/3455) opened about a month ago and we made a change (https://github.com/OfficeDev/office-ui-fabric-react/pull/7854) to mix in native props to MessageBar. So, you should actually be able to pass in your own
aria-livevalue to override the default, like so:Let us know if that works for you!