Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-a11y-announcer

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-a11y-announcer

`react-a11y-announcer` is a React a11y component created by Think Company that helps ensure announcements are accessible and properly announced by screen readers.

  • 2.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
76
decreased by-55.81%
Maintainers
1
Weekly downloads
 
Created
Source

react-a11y-announcer

react-a11y-announcer is a React a11y component created by Think Company that helps ensure announcements are accessible and properly announced by screen readers.

Building and running the demo

We included an example that shows you how the component will behave when added to a page. To run the demo:

  • Clone this repo locally
  • cd into the examples directory
  • run npm install
  • run npm start

This will start a server. Open a browser window and navigate to the localhost url displayed in the console output (usually http://localhost:8080/.

Press the "Trigger new announcement" button to add the announcement to the page.

Using the Announcer

Install from npm

npm install react-a11y-announcer --save

Import Announcer


import Announcer from 'react-a11y-announcer';

Create a state to pass to the announcer's props

  this.state = {
    announcement: ''
  }

Add the announcer to your template

  <div className="App">
    <Announcer text={this.state.announcement} />
    <div className="App-header">
      <h2>Basic Announcer Example</h2>
      <button type="button" onClick={this.handleClick}>Trigger new announcement</button>
    </div>
  </div>

Update the state you passed to the text prop

  handleClick() {
    this.setState(prevState => ({
      announcement: 'Here\'s a new announcement!'
    }));
  }

Whenever a user with a screenreader clicks on that button, they should hear the announcement.

Browser Testing

React Announcer was tested and works as expected in the latest versions of:

  • iOS VoiceOver w/ Safari
  • macOS VoiceOver w/ Safari
  • Android TalkBack w/ Chrome
  • NVDA w/ Firefox
  • JAWS w/ IE11

How we Tested

Desktop screen reader:

  • With screen reader turned on, navigate to URL (localhost:3000)
  • Ensure virtual cursor position at top of page (In Windows NVDA/JAWS, press CTRL+Home)
  • Arrow down until hearing "Trigger new announcement" button
  • Press ENTER key
  • You should hear, "Here's a new announcement!" through the screen reader when the text appears visually

Repeat steps but change ENTER key step to SPACE key, both should work.

Mobile screen reader (VO, TalkBack):

  • With screen reader turned on, navigate to URL (localhost:3000)
  • Quickly swipe right until "Trigger new announcement" button is in focus and announced to screen reader
  • Double tap to activate button
  • You should hear, "Here's a new announcement!" through screen reader when the text appears visually

Contributing to React Announcer

To contribute to this project, please review and follow the contributing guidelines.

FAQs

Package last updated on 24 Jan 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc