Announce messages for screen-readers using aria-live regions.
Add a .npmrc
file to your project root next to the package.json wiht the following contents:
@wellmann:registry=https://npm.pkg.github.com
Authentication to GitHub Packages.
Or just add it to your dependencies like this:
{
"dependencies": {
"@wellmann/simple-live-announcer": "github:wellmann/simple-live-announcer#v1.0.0"
}
}
Requires the following CSS class to be present somewhere in the styles of your project:
.screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
import { announce } from '@wellmann/simple-live-announcer';
announce('I am a politely announced message.');