ui/ A11y Decorator
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
Configures the prop for the source of the component's content
Default: 'children'
Properties added to wrapped component
Sets the hint text to be read after the content.
Sets the hint text to be read before the content.
Sets the value of the
aria-label
attribute for the wrapped component.
ArrayBooleanFunctionModuleNumberObjectString