https://github.com/jadu/pulsar-live-region

Simple methods for updating a live region to communicate state changes to assistive technologies
https://github.com/jadu/pulsar-live-region

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jadu/pulsar-live-region
• Owner: jadu
• License: mit
• Created: 2020-04-02T14:13:01.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-12-06T18:47:16.000Z (almost 2 years ago)
• Last Synced: 2024-04-16T00:49:49.667Z (7 months ago)
• Language: JavaScript
• Size: 1.8 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
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.

```html





```


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.

```js

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()`.

```js

$('.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.

```shell

npm test

```

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

```shell

npm run coverage

```