From 32841ec79b67c6d392b064b7eebf245b999cf01a Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Sat, 15 Jun 2024 23:54:11 +0200
Subject: [PATCH] Add role property to floating elements and "tooltip" role to
 Tooltips.

---
 src/Components/Floating/Float.tsx   | 16 +++++++++++++---
 src/Components/Floating/Tooltip.tsx |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Components/Floating/Float.tsx b/src/Components/Floating/Float.tsx
index bb975c8..fafe6fa 100644
--- a/src/Components/Floating/Float.tsx
+++ b/src/Components/Floating/Float.tsx
@@ -6,7 +6,7 @@ import {
 	useFloating,
 	useFocus,
 	useHover,
-	useInteractions, useTransitionStyles
+	useInteractions, useRole, useTransitionStyles
 } from "@floating-ui/react";
 import {UseFloatingOptions} from "@floating-ui/react/dist/floating-ui.react";
 import {mergeRefs} from "react-merge-refs";
@@ -21,14 +21,20 @@ export type Managed<T = React.ReactElement|React.ReactNode> = (show: () => void,
  */
 export type FloatingMode = "always"|"click"|"hover"|"focus"|"managed";
 
+/**
+ * Role of a floating element.
+ */
+export type FloatRole = "tooltip" | "dialog" | "alertdialog" | "menu" | "listbox" | "grid" | "tree" | "select" | "label" | "combobox";
+
 /**
  * A component to show something floating next to an element.
  */
-export function Float({children, content, className, mode, floatingOptions}: {
+export function Float({children, content, className, mode, role, floatingOptions}: {
 	children: (React.ReactElement & React.ClassAttributes<HTMLElement>)|Managed<(React.ReactElement & React.ClassAttributes<HTMLElement>)>;
 	content?: React.ReactNode|Managed<React.ReactNode>;
 	className?: string;
 	mode?: FloatingMode;
+	role?: FloatRole;
 	floatingOptions?: UseFloatingOptions;
 }): React.ReactElement
 {
@@ -63,7 +69,11 @@ export function Float({children, content, className, mode, floatingOptions}: {
 	const hover = useHover(context, useMemo(() => ({ enabled: mode == "hover" }), [mode]));
 	const focus = useFocus(context, useMemo(() => ({ enabled: mode == "focus", visibleOnly: false }), [mode]));
 	const click = useClick(context, useMemo(() => ({ enabled: mode == "click" }), [mode]));
-	const {getReferenceProps, getFloatingProps} = useInteractions([hover, focus, click]);
+	const roleProps = useRole(context, {
+		role: role,
+		enabled: !!role,
+	});
+	const {getReferenceProps, getFloatingProps} = useInteractions([roleProps, hover, focus, click]);
 
 	// Transition configuration.
 	const {isMounted, styles: transitionStyles} = useTransitionStyles(context, {
diff --git a/src/Components/Floating/Tooltip.tsx b/src/Components/Floating/Tooltip.tsx
index 9a95fc2..23bd239 100644
--- a/src/Components/Floating/Tooltip.tsx
+++ b/src/Components/Floating/Tooltip.tsx
@@ -7,7 +7,7 @@ export function Tooltip({children, content}: {
 }): React.ReactElement
 {
 	return (
-		<Float mode={"hover"} content={content} className={"tooltip"} floatingOptions={{ placement: "top" }}>
+		<Float mode={"hover"} content={content} className={"tooltip"} role={"tooltip"} floatingOptions={{ placement: "top" }}>
 			{children}
 		</Float>
 	);