Live Region

Simple methods for updating a live region to communicate state changes to assistive technologies.

Example implementation

The Live Region component needs two containers to be placed in the DOM on page load, these are then populated by the methods detailed below.

<div role="region" class="js-live-region-polite hide" aria-live="polite"></div>
<div role="region" class="js-live-region-assertive hide" aria-live="assertive"></div>

Styles

This example uses Pulsar's .hide class, which is a screenreader-friendly hiding method which allows the region changes to still be announced.

JavaScript

The component should be initialised with references to the required containers.

const $ = require('jquery');
const LiveRegion = require('./src/LiveRegion');

$(function () {
    const liveRegion = new LiveRegion($('html'));
    
    liveRegion.init({
        assertiveContainer: '.js-live-region-assertive',
        politeContainer: '.js-live-region-polite'
    });
});

Usage

There are two methods polite() and assertive().

$('.example-polite-trigger').on('click', function () {
    liveRegion.polite('this is a polite annoucement');
});

$('.example-assertive-trigger').on('click', function () {
    liveRegion.assertive('this is an assertive annoucement');
});

Tests

Run the test suite to check expected functionality.

npm test

Generate a code coverage report, which can be viewed by opening /coverage/lcov-report/index.html

npm run coverage