A demo for showcasing a known bug with ARIA live regions within an app that contains micro-frontend environments (MFEs).
An ARIA live region is an HTML element marked as containing content that can dynamically change, so assistive technologies will know to observe them for changes and announce any new content to users. While a useful tool, they are known to behave inconsistently across various screen readers and browsers. There is a particular issue observed with macOS VoiceOver and Safari, where an announcement is interrupted when multiple polite live regions are updated simultaneously or at a similar time:
This problem has been identified by Gupta (2019) and the community of a11ysupport.io (2022). This bug is particularly problematic for apps using a micro-frontend environment (MFE) architecture, as its possible multiple micro-frontends may attempt to update a polite live region at the same time. As per MFE design principles, no micro-frontend should be required to alert others that they intend to trigger an assistive technology announcement.
This app contains two independent micro-frontends, app-a and app-b, along with a host app, root-app, which loads the code from both these micro-frontends. Module federation, a bundler technique, is used to create a MFE setup by exposing the code of the two micro-frontends to the root-app.
To start the demo, clone the repository, then run the following:
npm run build
npm start