Accessibility

Aria Announcements

Atomic Elements implementation of live announcements is mostly implemented to be compatible with: react-aria-live which we used previously.

LiveAnnouncer

The LiveAnnouncer components provides a context to the rest of your application to announce messages to screen readers. It is used in conjunction with the useAnnouncer hook.

import { LiveAnnouncer, useAnnouncer } from "@atomicjolt/atomic-elements";

function Example() {
  const { announcePolite } = useAnnouncer();

  return (
    <div>
      <button onClick={() => announcePolite("Hello World")}>
        Announce Hello World
      </button>
    </div>
  );
}

function App() {
  return (
    <LiveAnnouncer>
      <Example />
    </LiveAnnouncer>
  );
}

withAnnouncer

The withAnnouncer HOC provides a way to access the context of the LiveAnnouncer component in a class component.

import { withAnnouncer } from "@atomicjolt/atomic-elements";

class Example extends React.Component {
  render() {
    const { announcePolite } = this.props;

    return (
      <div>
        <button onClick={() => announcePolite("Hello World")}>
          Announce Hello World
        </button>
      </div>
    );
  }
}

export default withAnnouncer(Example);

LiveMessage

The LiveMessage component will announce it's message prop to screen readers when it is rendered.

import { LiveMessage } from "@atomicjolt/atomic-elements";

function Example() {
  return <LiveMessage message="Hello World" />;
}

Note: The LiveMessage component is mostly just for compatabiltiy with the for mentioned package. It is recommended to use the useAnnouncer hook instead.