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 is aria-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.