useRole

Adds base screen reader props to the reference and floating elements for a given role.

import { useRole } from '@skeletonlabs/floating-ui-svelte';

This is useful to automatically apply ARIA props to the reference and floating elements to ensure they’re accessible to assistive technology, including item elements if narrowly specified.

Usage

import { useFloating, useInteractions, useRole } from '@skeletonlabs/floating-ui-svelte';

const floating = useFloating();
const role = useRole(floating.context, { role: 'tooltip' });
const interactions = useInteractions([role]);

svelte

<!-- Reference Element -->
<button
 bind:this="{floating.elements.reference}"
 {...interactions.getReferenceProps()}
>
	Reference
</div>

<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	{...interactions.getFloatingProps()}
>
	Tooltip
</div>

Options

`enabled`	Enables the interaction. boolean true
`role`	The role that the floating element should be. AriaRole \| ComponentRole 'dialog'

Compare

Compare to Floating UI React.