feat(useRole): add label role (#2621)

floating-ui · Nov 7, 2023 · 628fd11 · 628fd11
1 parent c1965f6
commit 628fd11
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/.changeset/warm-hornets-doubt.md b/.changeset/warm-hornets-doubt.md
@@ -0,0 +1,5 @@
+---
+'@floating-ui/react': patch
+---
+
+feat(useRole): add label role
diff --git a/packages/react/src/hooks/useRole.ts b/packages/react/src/hooks/useRole.ts
@@ -7,6 +7,7 @@ export interface UseRoleProps {
   enabled?: boolean;
   role?:
     | 'tooltip'
+    | 'label'
     | 'dialog'
     | 'alertdialog'
     | 'menu'
@@ -30,16 +31,19 @@ export function useRole<RT extends ReferenceType = ReferenceType>(
   const referenceId = useId();
 
   return React.useMemo(() => {
-    const floatingProps = {id: floatingId, role};
+    if (!enabled) return {};
 
-    if (!enabled) {
-      return {};
-    }
+    const floatingProps = {
+      id: floatingId,
+      ...(role !== 'label' && {role}),
+    };
 
-    if (role === 'tooltip') {
+    if (role === 'tooltip' || role === 'label') {
       return {
         reference: {
-          'aria-describedby': open ? floatingId : undefined,
+          [`aria-${role === 'label' ? 'labelledby' : 'describedby'}`]: open
+            ? floatingId
+            : undefined,
         },
         floating: floatingProps,
       };

diff --git a/packages/react/test/unit/useRole.test.tsx b/packages/react/test/unit/useRole.test.tsx
@@ -89,6 +89,15 @@ describe('tooltip', () => {
   });
 });
 
+describe('label', () => {
+  test('sets correct aria attributes based on the open state', () => {
+    const {container} = render(<App role="label" initiallyOpen />);
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    expect(container.querySelector('[aria-labelledby]')).toBeInTheDocument();
+    cleanup();
+  });
+});
+
 describe('dialog', () => {
   test('sets correct aria attributes based on the open state', () => {
     render(<App role="dialog" />);