@bccampus/aria-live-broadcast

Creates an ARIA live region to announce dynamic content updates

Source

View source code

Package

Docs

Edit this page

Built by

Kemal Tunador (@ktunador)

License

MIT

Installation

yarn add @bccampus/aria-live-broadcast

Usage

import React, { useState } from 'react';
import { announce } from '../';

export function Announce({ action }: { action: 'Alert' | 'Select' }) {
  const [count, setCount] = useState(1);

  const handleClick = () => {
    announce(`${action} ${count}`, action === 'Alert' ? 'assertive' : 'polite');
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        Announce: {action}
      </button>
    </div>
  );
}

Demo

const focusOptions: FocusOptions = { loop: true };
const selectionOptions: SelectionOptions = { multiple: true };
function Demo() {
  const [selections, setSelections] = useState<SelectionState>({ selected: new Set() });

  useEffect(() => {
    if (selections.selected.size === 0) {
      announce('No employees selected');
    } else if (selections.selected.size === people.length) {
      announce('All employees selected');
    } else if (selections.selected.size > 1) {
      announce(`${selections.selected.size} employees selected`, 'assertive');
    }
  }, [selections]);

  return (
    <Composite
      type="VerticalListbox"
      items={people}
      focusOptions={focusOptions}
      selectionOptions={selectionOptions}
      selectionState={selections}
      onSelectionChange={setSelections}
      renderItem={({ item, ...props }, { selected, onSelectMouseEventHandler }) => (
        <Paper
          {...props}
          withBorder
          p="xs"
          my="xs"
          miw="15rem"
          className={classes.compositeItem}
          onClickCapture={onSelectMouseEventHandler}
        >
          <Group>
            <div>{selected ? <IconSquareCheck /> : <IconSquare />}</div>
            <div>
              <Text fw={500}>{item.fullname}</Text>
              <Text size="sm" c="dimmed">
                {item.title}
              </Text>
            </div>
          </Group>
        </Paper>
      )}
    />
  );
}