v1.3.2

Accessibility

Installation

Install yarn add @spark-web/a11y
Source GitHub.com
Bundle unpkg.com

The components in this library have been implemented with accessibility built in. This package aims to provide helpers for other occasions.

Emoji

Emojis can add playfulness to your interface, but require formatting to ensure that they are accessible for all users.

The Emoji component wraps the provided symbol, defining it as an image. The provided label will be announced by a screen reader. If no label is provided, the emoji is assumed to be a decorative element with no semantic meaning and is hidden from assistive technology.

🎉

VisuallyHidden

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be implemented using the VisuallyHidden component.

This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of icons or colour) need to also be conveyed to non-visual users.

Danger: This action is not reversible

Props

Emoji Props

PropTypeDescription

symbol

string

Emoji symbol.

data?

DataAttributeMap

Sets data attributes on the component.

label?

string

Label used to describe the symbol that will be announced to screen readers.

VisuallyHidden Props

PropTypeDescription

children?

ReactNode: string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

Children elements to be hidden within this component.

data?

DataAttributeMap

Sets data attributes on the component.

Additional props are passed to the span element and are not listed.

© 2023 Brighte Capital Pty Ltd