useRole
Adds relevant screen reader props for a given element
role
.
import {
useFloating,
useInteractions,
useRole,
} from '@floating-ui/react-dom-interactions';
// ...
const {context} = useFloating();
const {getReferenceProps, getFloatingProps} = useInteractions([
useRole(context, {
// props
}),
]);
Props
interface Props {
enabled?: boolean;
role?:
| 'dialog'
| 'tooltip'
| 'menu'
| 'listbox'
| 'grid'
| 'tree';
}
enabled
default: true
Conditionally enable/disable the hook.
useRole(context, {
enabled: false,
});
role
default: 'dialog'
The role of the floating element.
useRole(context, {
role: 'tooltip',
});
Item roles
As only the reference and floating element receives these props, you'll need to provide roles for the items inside the floating element.
For instance:
- A
'menu'
role will require the focusable children to have a role of'menuitem'
,'menuitemcheckbox'
, or'menuitemradio'
. - A
'listbox'
role will require the focusable children to have a role of'option'
. If inside a group, then wrapped inside a'group'
role that isaria-labelledby
the group heading.
Read WAI-ARIA Authoring Practices to ensure your item elements have semantic roles and attributes. The examples hosted on CodeSandbox demonstrate these authoring practices.
Due to the free nature of items that can go inside a floating element, an item prop getter is not provided to enable full control. In the future, Floating UI may provide one to simplify this once a desirable API has been worked out.