Skip to content

A demo for showcasing a known bug with ARIA live regions within an app that contains micro-frontend environments (MFEs).

Notifications You must be signed in to change notification settings

Parsium/aria-live-mfe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ARIA Live MFE

A demo for showcasing a known bug with ARIA live regions within an app that contains micro-frontend environments (MFEs).

Background

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:

Screenshot of demo showcasing VoiceOver bug within a micro-frontend-based app

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.

Demo implementation

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.

Starting the demo

To start the demo, clone the repository, then run the following:

npm run build
npm start

About

A demo for showcasing a known bug with ARIA live regions within an app that contains micro-frontend environments (MFEs).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published