Open MisRob opened 2 weeks ago
aria-live
vs role
Would it be better if <KLiveRegion>
rendered itself as
<div aria-live="polite">
{{ politeMessage }}
</div>
<div aria-live="assertive">
{{ assertiveMessage }}
</div>
rather than using the aforementioned roles?
role=alert
prepends announcements with “Alert: …”, whereas aria-live
doesn’t do that.I imagine that useKLiveRegion
could be in some cases internally integrated with relevant KDS components. However, this approach's main advantage seems to also be its main drawback. For example, consider a table component that internally sends announcements about loading/finished loading to the live region. For this purpose, it receives the region’s ID and translated announcement strings.
I can think of mitigating some of the cons of both approaches to at least some extent technically as well as by documentation but for now, I’d be particularly grateful for higher-level feedback on whether introducing such approach would be an interesting pattern in KDS, or not.
Summary
This is a proposal for a new component and an accompanying composable,
<KLiveRegion>
anduseKLiveRegion
.<KLiveRegion>
will render itself as two live regions, one with astatus
role and another with analert
role:A single
<KLiveRegion>
is supposed to be used in an app and high in the app's structure.useKLiveRegion
can be imported to multiple places in an app that can sendstatus
oralert
messages to<KLiveRegion>
viauseKLiveRegion.sendStatusMessage(<string>)
oruseKLiveRegion.sendAlertMessage(<string>)
.The documentation will contain brief guidance with relevant references guiding developers on when to use or not use live regions, and what types of information should be sent as status messages and what should be alert messages.
Background
Originally motivated by the ongoing sortable table work. Upon discussing with @radinamatic, it seems that the table will need to utilize live region in some use-cases, particularly to communicate loading/loaded states when re-fetching data when sorting is done on the backend. However, the table itself shouldn’t contain the live region as this would only add another live region to the already many regions in Kolibri. Additionally, a Kolibri audit revealed we use many live regions and we wrap whole components in them, which can lead to a number of problems.
The Value Add
Possible Tradeoffs
Related
Resources