ui/A11yDecorator

Provides a higher-order component to add accessibility utility features to a component.

import A11yDecorator from '@enact/ui/A11yDecorator';

Members

A11yDecoratorHigher-Order Component

A higher-order component that adds support for hint text to be read before and/or after the content.

By default, the children prop is used as the source of the components content but may be configured by passing a different prop to the HOC configuration.

Note: This HoC passes a number of props to the wrapped component that should be passed to the main DOM node.

Usage:

const MyComponentBase = ({myProp, ...rest}) => (
   <div {...rest}>{myProp}</div>
 );
...
const MyComponent = A11yDecorator(MyComponentBase);

// passes an aria-label property to MyComponentBase with accessibilityPreHint and
// accessibilityHint wrapping children
<MyComponent accessibilityPreHint="before children" accessibilityHint="after children">
  {children}
</MyComponent>
import A11yDecorator from '@enact/ui/A11yDecorator';
Configuration
prop
String

Configures the prop for the source of the component's content

Default: 'children'
Properties added to wrapped component
accessibilityHint
String

Sets the hint text to be read after the content.

accessibilityPreHint
String

Sets the hint text to be read before the content.

aria-label
String

Sets the value of the aria-label attribute for the wrapped component.

ArrayBooleanFunctionModuleNumberObjectString