[Feature]: Ability to override or disable announce message in MessageBar component

[ultrababs]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Currently the message bar component does not allow aria-live to be off. While it does accept a politeness prop, it only allows polite or assertive. I am using the message bar component to display information that needs to be called out on the page; however, the current implementation is causing it to announce at top level. This caused issues during the external a11y usability study as it clogged up the screenreader announcements. It was suggested we allow the content to be read inline.

So basically, I would like to use the message bar as an actual message bar and not an alert. Looking through the Fluent useMessageBar.js runtime code, it calls announce regardless:

announce(message, {
            polite: computedPoliteness === 'polite',
            alert: computedPoliteness === 'assertive'
        });

Right now, the only way to solve this would be to completely recreate the message bar component. One of the suggestions from the teams channel thread was to add a prop that allowed overriding the announce string. I am also open to just allowing off as an accepted value to the aria-live prop.

Additional context

No response

Have you discussed this feature with our team

No response

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

High

[paolo-aliprandi]

Thanks for the detailed write-up! You're right that v9 MessageBar always calls announce() and only exposes politeness as polite | assertive, with no way to opt out. There isn't a v9-native way to render the content inline without the live-region announcement today, so this is a valid feature request for the backlog and warrants accessibility review. We'll evaluate the two options you raised (an override-string prop vs. accepting an off/inline value).

[dmytrokirpa]

Hey @ultrababs, you can override or disable the announcement by setting your own announce function for the subtree. Check out the example here: FluentUI React v9 - StackBlitz. If you use a no-op function for the announce, the announcements will be disabled for that component.

@smhigley, do you think this could work, or should we consider a dedicated API/prop for that?

[ultrababs]

@dmytrokirpa - Thanks for the suggestion. I can give this a try today. We already have an AnnouceProvider wrapping the entire app, so I am curious if/how a subsequent one wrapping a specific component will affect the global one. I would also need to customize it for instances where I would actually want the announce work as intended. Personally, I would suggest updating the component to fix it as I would imagine others could also hit this during accessibility studies as well.