From 644ede5d3166911db1414e1c947b48c19590c8ee Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Mon, 28 Jun 2021 11:40:58 +0200
Subject: [PATCH 01/40] 2.2.0-alpha.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a8a1369..9c9899c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-three/a11y",
-  "version": "2.2.0-alpha.0",
+  "version": "2.2.0-alpha.1",
   "description": "👩‍🦯 Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support",
   "keywords": [
     "a11y",

From 96b92835cc6eef4bdebb004a02fea2900d78b707 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 14 Jul 2021 12:09:06 +0200
Subject: [PATCH 02/40] shorter nested dom

---
 example/src/App.js     | 39 ++++++++++++--------
 example/src/index.tsx  |  2 +-
 example/src/styles.css |  2 +-
 src/A11y.tsx           | 19 +++++-----
 src/A11yAnnouncer.tsx  |  2 +-
 src/A11yDebuger.tsx    |  6 ++--
 src/A11ySection.tsx    |  2 +-
 src/A11yTag.tsx        | 82 ++++++++++++++++++++++++++++++++++++++++++
 src/Html.tsx           | 50 +++++++++++++-------------
 src/index.tsx          |  1 +
 10 files changed, 148 insertions(+), 57 deletions(-)
 create mode 100644 src/A11yTag.tsx

diff --git a/example/src/App.js b/example/src/App.js
index b6dce62..13e6ab5 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { Canvas, useFrame, useThree } from "@react-three/fiber"
 import React, { Suspense, useCallback, useEffect, useRef, useContext } from "react"
 import { ContactShadows, Text, Html } from "@react-three/drei"
-import { A11y, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
+import { A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
 import { ResizeObserver } from "@juggle/resize-observer"
 import { proxy, useProxy } from "valtio"
 import { EffectComposer, SSAO, SMAA } from "@react-three/postprocessing"
@@ -60,17 +60,20 @@ function Nav({ left }) {
   const viewport = useThree(state => state.viewport)
   const radius = Math.min(12, viewport.width / 2.5)
   return (
-    <A11y
-      role="button"
-      description={`Spin ${left ? "left" : "right"} shape`}
-      activationMsg="shape showing"
-      actionCall={() => {
-        state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1)
-        state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1
-      }}
-      disabled={snap.disabled}>
-      <Diamond position={[left ? -radius : radius, 0, 0]} rotation={[0, 0, -Math.PI / 4]} />
-    </A11y>
+    <A11yTag tag="li">
+      <A11y
+        role="link"
+        href="#"
+        description={`Spin ${left ? "left" : "right"} shape`}
+        activationMsg="shape showing"
+        actionCall={() => {
+          state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1)
+          state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1
+        }}
+        disabled={snap.disabled}>
+        <Diamond position={[left ? -radius : radius, 0, 0]} rotation={[0, 0, -Math.PI / 4]} />
+      </A11y>
+    </A11yTag>
   )
 }
 
@@ -160,7 +163,7 @@ function Carroussel() {
   return (
     <group ref={group}>
       {["sphere", "pyramid", "donut", "octahedron", "icosahedron"].map((name, i) => (
-        <A11y key={name} role="content" description={`a ${name}`} tabIndex={-1} hidden={snap.active !== i}>
+        <A11y key={name} role="content" tag="p" description={`a ${name}`} tabIndex={-1} hidden={snap.active !== i}>
           <Shape
             index={i}
             position={[radius * Math.cos(i * ((Math.PI * 2) / 5)), 0, radius * Math.sin(i * ((Math.PI * 2) / 5))]}
@@ -213,13 +216,19 @@ export default function App() {
     <main className={snap.dark ? "dark" : "bright"}>
       <Canvas resize={{ polyfill: ResizeObserver }} camera={{ position: [0, 0, 15], near: 4, far: 30 }} pixelRatio={[1, 1.5]}>
         <A11yUserPreferences debug={true}>
-          <A11yDebuger />
+          {/* <A11yDebuger /> */}
           {/* <ResponsiveText /> */}
           <pointLight position={[100, 100, 100]} intensity={snap.disabled ? 0.2 : 0.5} />
           <pointLight position={[-100, -100, -100]} intensity={1.5} color="red" />
           <ambientLight intensity={snap.disabled ? 0.2 : 0.8} />
           <group position-y={2}>
-            <CarrousselAll />
+            <A11yTag tag="header">
+              <A11yTag tag="nav">
+                <A11yTag tag="ul">
+                  <CarrousselAll />
+                </A11yTag>
+              </A11yTag>
+            </A11yTag>
             <A11y role="image" description="Je suis un test">
               <SwitchButton position={[-3, 3, 7]} />
             </A11y>
diff --git a/example/src/index.tsx b/example/src/index.tsx
index f96f04f..16b01be 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import ReactDOM from "react-dom"
 import React, { useRef, useState } from "react"
 import { Canvas, useFrame } from "@react-three/fiber"
-import { A11y, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
+import { A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
 
 /* just to test tsx autocomplete etc */
 function Box(props: JSX.IntrinsicElements["mesh"]) {
diff --git a/example/src/styles.css b/example/src/styles.css
index 81e6c9a..990a1f7 100644
--- a/example/src/styles.css
+++ b/example/src/styles.css
@@ -21,7 +21,7 @@ main.dark {
   background: lightgrey;
 }
 
-a {
+main > a {
   cursor: pointer;
   position: absolute;
   bottom: 25px;
diff --git a/src/A11y.tsx b/src/A11y.tsx
index bd2846b..155facc 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useContext } from 'react';
 import { useThree } from '@react-three/fiber';
 import useAnnounceStore from './announceStore';
-import { useA11ySectionContext } from './A11ySection';
+import { useA11yTagContext } from './A11yTag';
 import { stylesHiddenButScreenreadable } from './A11yConsts';
 import { Html } from './Html';
 
@@ -26,7 +26,7 @@ type RoleProps =
       href?: never;
       disabled?: never;
       startPressed?: never;
-      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'li';
     }
   | {
       role: 'button';
@@ -205,7 +205,7 @@ export const A11y: React.FC<Props> = ({
       if (role === 'togglebutton') {
         return (
           <button
-            r3f-a11y="true"
+            data-r3f-a11y="true"
             {...disabledBtnAttr}
             aria-pressed={a11yState.pressed ? 'true' : 'false'}
             tabIndex={tabIndex ? tabIndex : 0}
@@ -248,7 +248,7 @@ export const A11y: React.FC<Props> = ({
         //regular btn
         return (
           <button
-            r3f-a11y="true"
+            data-r3f-a11y="true"
             {...disabledBtnAttr}
             tabIndex={tabIndex ? tabIndex : 0}
             style={Object.assign(
@@ -290,7 +290,7 @@ export const A11y: React.FC<Props> = ({
     } else if (role === 'link') {
       return (
         <a
-          r3f-a11y="true"
+          data-r3f-a11y="true"
           style={Object.assign(
             constHiddenButScreenreadable,
             hidden
@@ -333,7 +333,7 @@ export const A11y: React.FC<Props> = ({
       if (role === 'image') {
         return (
           <img
-            r3f-a11y="true"
+            data-r3f-a11y="true"
             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
             alt={description}
             {...tabIndexP}
@@ -363,10 +363,10 @@ export const A11y: React.FC<Props> = ({
           />
         );
       } else {
-        const Tag = tag;
+        const Tag = tag !== 'li' ? tag : 'p';
         return (
           <Tag
-            r3f-a11y="true"
+            data-r3f-a11y="true"
             {...tabIndexP}
             style={Object.assign(
               constHiddenButScreenreadable,
@@ -442,7 +442,7 @@ export const A11y: React.FC<Props> = ({
     );
   }
 
-  const section = useA11ySectionContext();
+  const section = useA11yTagContext();
   let portal = {};
   if (section.current instanceof HTMLElement) {
     portal = { portal: section };
@@ -481,6 +481,7 @@ export const A11y: React.FC<Props> = ({
             // @ts-ignore
             children.props.position ? children.props.position : 0
           }
+          tag={tag === 'li' ? tag : 'div'}
           {...portal}
         >
           {AltText}
diff --git a/src/A11yAnnouncer.tsx b/src/A11yAnnouncer.tsx
index 8e49df8..5415697 100644
--- a/src/A11yAnnouncer.tsx
+++ b/src/A11yAnnouncer.tsx
@@ -19,7 +19,7 @@ export const A11yAnnouncer: React.FC = () => {
   useEffect(() => {
     const mouseClickListener = (e: MouseEvent) => {
       if (
-        window.document.activeElement?.getAttribute('r3f-a11y') &&
+        window.document.activeElement?.getAttribute('data-r3f-a11y') &&
         e.detail !== 0
       ) {
         if (window.document.activeElement instanceof HTMLElement) {
diff --git a/src/A11yDebuger.tsx b/src/A11yDebuger.tsx
index 77c9561..765f911 100644
--- a/src/A11yDebuger.tsx
+++ b/src/A11yDebuger.tsx
@@ -24,7 +24,7 @@ export const A11yDebuger: React.FC<Props> = ({}) => {
     const selectActiveEl = () => {
       console.log('focused: ', document.activeElement);
       let r3fa11ydebugidref = document.activeElement?.getAttribute(
-        'r3f-a11y-debug-id'
+        'data-r3f-a11y-debug-id'
       );
       if (r3fa11ydebugidref) {
         document.querySelectorAll('[r3fa11ydebugidref]').forEach(node => {
@@ -46,8 +46,8 @@ export const A11yDebuger: React.FC<Props> = ({}) => {
       let r3fPosId = 0;
       //@ts-ignore
       let elements = [];
-      document.querySelectorAll('[r3f-a11y]').forEach(node => {
-        node.setAttribute('r3f-a11y-debug-id', '' + r3fPosId);
+      document.querySelectorAll('[data-r3f-a11y]').forEach(node => {
+        node.setAttribute('data-r3f-a11y-debug-id', '' + r3fPosId);
         // let li = document.createElement('li');
         // li.innerHTML = node.tagName ;
         // //@ts-ignore
diff --git a/src/A11ySection.tsx b/src/A11ySection.tsx
index 1c9b5dc..018c63c 100644
--- a/src/A11ySection.tsx
+++ b/src/A11ySection.tsx
@@ -42,7 +42,7 @@ export const A11ySection: React.FC<Props> = ({
     if (label) {
       el.setAttribute('aria-label', label);
     }
-    el.setAttribute('r3f-a11y', 'true');
+    el.setAttribute('data-r3f-a11y', 'true');
     el.setAttribute(
       'style',
       (styles => {
diff --git a/src/A11yTag.tsx b/src/A11yTag.tsx
new file mode 100644
index 0000000..a3df110
--- /dev/null
+++ b/src/A11yTag.tsx
@@ -0,0 +1,82 @@
+//https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
+import * as React from 'react';
+// import * as ReactDOM from 'react-dom';
+import { Group } from 'three';
+import { Assign } from 'utility-types';
+import { ReactThreeFiber, useThree } from '@react-three/fiber';
+
+const A11yTagContext = React.createContext<
+  React.MutableRefObject<HTMLElement | null>
+>(React.createRef());
+
+A11yTagContext.displayName = 'A11yTagContext';
+
+const useA11yTagContext = () => {
+  return React.useContext(A11yTagContext);
+};
+
+export { useA11yTagContext };
+
+export interface HtmlProps
+  extends Omit<
+    Assign<
+      React.HTMLAttributes<HTMLDivElement>,
+      ReactThreeFiber.Object3DNode<Group, typeof Group>
+    >,
+    'ref'
+  > {
+  eps?: number;
+  tag?: string;
+  portal?: React.MutableRefObject<HTMLElement>;
+  zIndexRange?: Array<number>;
+}
+
+export const A11yTag = React.forwardRef(
+  ({
+    children,
+    eps = 0.001,
+    style,
+    className,
+    portal,
+    zIndexRange = [16777271, 0],
+    tag = 'div',
+    ...props
+  }: HtmlProps) =>
+    // ref: React.Ref<HTMLDivElement>
+    {
+      const gl = useThree(({ gl }) => gl);
+      const [el] = React.useState(() => document.createElement(tag));
+      const group = React.useRef<Group>(null);
+
+      const tagContext = useA11yTagContext();
+      const target = tagContext?.current ?? gl.domElement.parentNode;
+      const elRef = React.useRef<HTMLElement | null>(null);
+
+      React.useEffect(() => {
+        if (group.current) {
+          el.style.cssText = `position:absolute;top:0;left:0;`;
+          return () => {
+            elRef.current = null;
+          };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [target]);
+
+      if (target && target !== el.parentElement) {
+        if (!document.body.contains(el)) {
+          target.appendChild(el);
+        }
+      }
+      elRef.current = el;
+
+      return (
+        <>
+          <A11yTagContext.Provider value={elRef}>
+            <group {...props} ref={group}>
+              {children}
+            </group>
+          </A11yTagContext.Provider>
+        </>
+      );
+    }
+);
diff --git a/src/Html.tsx b/src/Html.tsx
index 501926c..9181fec 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -69,26 +69,25 @@ export interface HtmlProps
   eps?: number;
   portal?: React.MutableRefObject<HTMLElement>;
   zIndexRange?: Array<number>;
+  tag?: 'div' | 'li';
 }
 
 export const Html = React.forwardRef(
-  (
-    {
-      children,
-      eps = 0.001,
-      style,
-      className,
-      portal,
-      zIndexRange = [16777271, 0],
-      ...props
-    }: HtmlProps,
-    ref: React.Ref<HTMLDivElement>
-  ) => {
+  ({
+    children,
+    eps = 0.001,
+    style,
+    className,
+    portal,
+    zIndexRange = [16777271, 0],
+    tag = 'div',
+    ...props
+  }: HtmlProps) => {
     const gl = useThree(({ gl }) => gl);
     const camera = useThree(({ camera }) => camera);
     const scene = useThree(({ scene }) => scene);
     const size = useThree(({ size }) => size);
-    const [el] = React.useState(() => document.createElement('div'));
+    const [el] = React.useState(() => document.createElement(tag));
     const group = React.useRef<Group>(null);
     const oldZoom = React.useRef(0);
     const oldPosition = React.useRef([0, 0]);
@@ -110,22 +109,21 @@ export const Html = React.forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [target]);
 
-    const styles: React.CSSProperties = React.useMemo(() => {
-      return {
-        position: 'absolute',
-        transform: 'none',
-        ...style,
-      };
-    }, [style, size]);
+    // const styles: React.CSSProperties = React.useMemo(() => {
+    //   return {
+    //     position: 'absolute',
+    //     transform: 'none',
+    //     ...style,
+    //   };
+    // }, [style, size]);
 
     React.useLayoutEffect(() => {
       ReactDOM.render(
-        <div
-          ref={ref}
-          style={styles}
-          className={className}
-          children={children}
-        />,
+        <>
+          {children &&
+            //@ts-ignore
+            children.map(child => <>{child}</>)}
+        </>,
         el
       );
     });
diff --git a/src/index.tsx b/src/index.tsx
index 0e7d8e8..8c27451 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,3 +3,4 @@ export * from './A11yUserPreferences';
 export * from './A11yAnnouncer';
 export * from './A11yDebuger';
 export { A11ySection } from './A11ySection';
+export { A11yTag } from './A11yTag';

From 1e8cf0b91038ad45a7886b0f8d06ce782461f29e Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 14 Jul 2021 21:31:03 +0200
Subject: [PATCH 03/40] fix cursor pointer when canvas hidden

---
 src/A11y.tsx | 11 +++++------
 src/Html.tsx | 11 +++--------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 155facc..9584bef 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState, useContext } from 'react';
-import { useThree } from '@react-three/fiber';
 import useAnnounceStore from './announceStore';
 import { useA11yTagContext } from './A11yTag';
 import { stylesHiddenButScreenreadable } from './A11yConsts';
@@ -122,13 +121,13 @@ export const A11y: React.FC<Props> = ({
   const overHtml = useRef(false);
   const overMesh = useRef(false);
 
-  const domElement = useThree(state => state.gl.domElement);
+  const documentElement = document.documentElement;
 
   // temporary fix to prevent error -> keep track of our component's mounted state
   const componentIsMounted = useRef(true);
   useEffect(() => {
     return () => {
-      domElement.style.cursor = 'default';
+      documentElement.style.cursor = 'default';
       componentIsMounted.current = false;
     };
   }, []); // Using an empty dependency array ensures this on
@@ -143,7 +142,7 @@ export const A11y: React.FC<Props> = ({
     }
     if (overHtml.current || overMesh.current) {
       if (role !== 'content' && role !== 'image' && !disabled) {
-        domElement.style.cursor = 'pointer';
+        documentElement.style.cursor = 'pointer';
       }
       setA11yState({
         hovered: true,
@@ -161,7 +160,7 @@ export const A11y: React.FC<Props> = ({
     }
     if (!overHtml.current && !overMesh.current) {
       if (componentIsMounted.current) {
-        domElement.style.cursor = 'default';
+        documentElement.style.cursor = 'default';
         setA11yState({
           hovered: false,
           focused: a11yState.focused,
@@ -483,9 +482,9 @@ export const A11y: React.FC<Props> = ({
           }
           tag={tag === 'li' ? tag : 'div'}
           {...portal}
+          a11yEl={HtmlAccessibleElement}
         >
           {AltText}
-          {HtmlAccessibleElement}
         </Html>
       </group>
     </A11yContext.Provider>
diff --git a/src/Html.tsx b/src/Html.tsx
index 9181fec..f3f82c0 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -70,6 +70,7 @@ export interface HtmlProps
   portal?: React.MutableRefObject<HTMLElement>;
   zIndexRange?: Array<number>;
   tag?: 'div' | 'li';
+  a11yEl: JSX.Element;
 }
 
 export const Html = React.forwardRef(
@@ -81,6 +82,7 @@ export const Html = React.forwardRef(
     portal,
     zIndexRange = [16777271, 0],
     tag = 'div',
+    a11yEl,
     ...props
   }: HtmlProps) => {
     const gl = useThree(({ gl }) => gl);
@@ -118,14 +120,7 @@ export const Html = React.forwardRef(
     // }, [style, size]);
 
     React.useLayoutEffect(() => {
-      ReactDOM.render(
-        <>
-          {children &&
-            //@ts-ignore
-            children.map(child => <>{child}</>)}
-        </>,
-        el
-      );
+      ReactDOM.render(a11yEl, el);
     });
 
     useFrame(() => {

From c0506a71845833be6ac1578842ea9672b47009ca Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 14 Jul 2021 23:17:40 +0200
Subject: [PATCH 04/40] add custom attributes to generated dom

---
 example/src/App.js |   4 +-
 src/A11y.tsx       |  10 ++++
 src/A11yTag.tsx    |  93 +++++++++++++++--------------
 src/Html.tsx       | 145 ++++++++++++++++++++++++---------------------
 4 files changed, 139 insertions(+), 113 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 13e6ab5..177b2d9 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -60,11 +60,13 @@ function Nav({ left }) {
   const viewport = useThree(state => state.viewport)
   const radius = Math.min(12, viewport.width / 2.5)
   return (
-    <A11yTag tag="li">
+    <A11yTag tag="li" a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}>
       <A11y
         role="link"
         href="#"
         description={`Spin ${left ? "left" : "right"} shape`}
+        a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}
+        a11yParentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
         activationMsg="shape showing"
         actionCall={() => {
           state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1)
diff --git a/src/A11y.tsx b/src/A11y.tsx
index 9584bef..38f5dc7 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -13,6 +13,8 @@ interface A11yCommonProps {
   focusCall?: (...args: any[]) => any;
   debug?: boolean;
   a11yElStyle?: Object;
+  a11yElAttr?: Object;
+  a11yParentElAttr?: Object;
   hidden?: boolean;
 }
 
@@ -98,6 +100,8 @@ export const A11y: React.FC<Props> = ({
   disabled,
   debug = false,
   a11yElStyle,
+  a11yElAttr,
+  a11yParentElAttr,
   startPressed = false,
   tag = 'p',
   hidden = false,
@@ -206,6 +210,7 @@ export const A11y: React.FC<Props> = ({
           <button
             data-r3f-a11y="true"
             {...disabledBtnAttr}
+            {...a11yElAttr}
             aria-pressed={a11yState.pressed ? 'true' : 'false'}
             tabIndex={tabIndex ? tabIndex : 0}
             style={Object.assign(
@@ -249,6 +254,7 @@ export const A11y: React.FC<Props> = ({
           <button
             data-r3f-a11y="true"
             {...disabledBtnAttr}
+            {...a11yElAttr}
             tabIndex={tabIndex ? tabIndex : 0}
             style={Object.assign(
               constHiddenButScreenreadable,
@@ -290,6 +296,7 @@ export const A11y: React.FC<Props> = ({
       return (
         <a
           data-r3f-a11y="true"
+          {...a11yElAttr}
           style={Object.assign(
             constHiddenButScreenreadable,
             hidden
@@ -336,6 +343,7 @@ export const A11y: React.FC<Props> = ({
             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
             alt={description}
             {...tabIndexP}
+            {...a11yElAttr}
             style={Object.assign(
               constHiddenButScreenreadable,
               hidden
@@ -367,6 +375,7 @@ export const A11y: React.FC<Props> = ({
           <Tag
             data-r3f-a11y="true"
             {...tabIndexP}
+            {...a11yElAttr}
             style={Object.assign(
               constHiddenButScreenreadable,
               hidden
@@ -483,6 +492,7 @@ export const A11y: React.FC<Props> = ({
           tag={tag === 'li' ? tag : 'div'}
           {...portal}
           a11yEl={HtmlAccessibleElement}
+          a11yElAttr={a11yParentElAttr}
         >
           {AltText}
         </Html>
diff --git a/src/A11yTag.tsx b/src/A11yTag.tsx
index a3df110..8e7f899 100644
--- a/src/A11yTag.tsx
+++ b/src/A11yTag.tsx
@@ -29,54 +29,61 @@ export interface HtmlProps
   tag?: string;
   portal?: React.MutableRefObject<HTMLElement>;
   zIndexRange?: Array<number>;
+  a11yElAttr?: Object;
 }
 
-export const A11yTag = React.forwardRef(
-  ({
-    children,
-    eps = 0.001,
-    style,
-    className,
-    portal,
-    zIndexRange = [16777271, 0],
-    tag = 'div',
-    ...props
-  }: HtmlProps) =>
-    // ref: React.Ref<HTMLDivElement>
-    {
-      const gl = useThree(({ gl }) => gl);
-      const [el] = React.useState(() => document.createElement(tag));
-      const group = React.useRef<Group>(null);
+export const A11yTag = ({
+  children,
+  eps = 0.001,
+  style,
+  className,
+  portal,
+  zIndexRange = [16777271, 0],
+  tag = 'div',
+  a11yElAttr,
+  ...props
+}: HtmlProps) => {
+  const gl = useThree(({ gl }) => gl);
+  const [el] = React.useState(() => document.createElement(tag));
+  const group = React.useRef<Group>(null);
 
-      const tagContext = useA11yTagContext();
-      const target = tagContext?.current ?? gl.domElement.parentNode;
-      const elRef = React.useRef<HTMLElement | null>(null);
+  const tagContext = useA11yTagContext();
+  const target = tagContext?.current ?? gl.domElement.parentNode;
+  const elRef = React.useRef<HTMLElement | null>(null);
 
-      React.useEffect(() => {
-        if (group.current) {
-          el.style.cssText = `position:absolute;top:0;left:0;`;
-          return () => {
-            elRef.current = null;
-          };
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [target]);
-
-      if (target && target !== el.parentElement) {
-        if (!document.body.contains(el)) {
-          target.appendChild(el);
+  React.useEffect(() => {
+    if (group.current) {
+      el.style.cssText = `position:absolute;top:0;left:0;`;
+      if (a11yElAttr) {
+        for (const property in a11yElAttr) {
+          el.setAttribute(
+            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+            //@ts-ignore
+            a11yElAttr[property]
+          );
         }
       }
-      elRef.current = el;
+      return () => {
+        elRef.current = null;
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
 
-      return (
-        <>
-          <A11yTagContext.Provider value={elRef}>
-            <group {...props} ref={group}>
-              {children}
-            </group>
-          </A11yTagContext.Provider>
-        </>
-      );
+  if (target && target !== el.parentElement) {
+    if (!document.body.contains(el)) {
+      target.appendChild(el);
     }
-);
+  }
+  elRef.current = el;
+
+  return (
+    <>
+      <A11yTagContext.Provider value={elRef}>
+        <group {...props} ref={group}>
+          {children}
+        </group>
+      </A11yTagContext.Provider>
+    </>
+  );
+};
diff --git a/src/Html.tsx b/src/Html.tsx
index f3f82c0..bf9d74d 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -71,83 +71,90 @@ export interface HtmlProps
   zIndexRange?: Array<number>;
   tag?: 'div' | 'li';
   a11yEl: JSX.Element;
+  a11yElAttr?: Object;
 }
 
-export const Html = React.forwardRef(
-  ({
-    children,
-    eps = 0.001,
-    style,
-    className,
-    portal,
-    zIndexRange = [16777271, 0],
-    tag = 'div',
-    a11yEl,
-    ...props
-  }: HtmlProps) => {
-    const gl = useThree(({ gl }) => gl);
-    const camera = useThree(({ camera }) => camera);
-    const scene = useThree(({ scene }) => scene);
-    const size = useThree(({ size }) => size);
-    const [el] = React.useState(() => document.createElement(tag));
-    const group = React.useRef<Group>(null);
-    const oldZoom = React.useRef(0);
-    const oldPosition = React.useRef([0, 0]);
-    const target = portal?.current ?? gl.domElement.parentNode;
+export const Html = ({
+  children,
+  eps = 0.001,
+  style,
+  className,
+  portal,
+  zIndexRange = [16777271, 0],
+  tag = 'div',
+  a11yEl,
+  a11yElAttr,
+  ...props
+}: HtmlProps) => {
+  const gl = useThree(({ gl }) => gl);
+  const camera = useThree(({ camera }) => camera);
+  const scene = useThree(({ scene }) => scene);
+  const size = useThree(({ size }) => size);
+  const [el] = React.useState(() => document.createElement(tag));
+  const group = React.useRef<Group>(null);
+  const oldZoom = React.useRef(0);
+  const oldPosition = React.useRef([0, 0]);
+  const target = portal?.current ?? gl.domElement.parentNode;
 
-    React.useEffect(() => {
-      if (group.current) {
-        scene.updateMatrixWorld();
-        const vec = calculatePosition(group.current, camera, size);
-        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
-        if (target) {
-          target.appendChild(el);
+  React.useEffect(() => {
+    if (group.current) {
+      scene.updateMatrixWorld();
+      const vec = calculatePosition(group.current, camera, size);
+      el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+
+      if (a11yElAttr) {
+        for (const property in a11yElAttr) {
+          el.setAttribute(
+            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+            //@ts-ignore
+            a11yElAttr[property]
+          );
         }
-        return () => {
-          if (target) target.removeChild(el);
-          ReactDOM.unmountComponentAtNode(el);
-        };
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [target]);
 
-    // const styles: React.CSSProperties = React.useMemo(() => {
-    //   return {
-    //     position: 'absolute',
-    //     transform: 'none',
-    //     ...style,
-    //   };
-    // }, [style, size]);
+      if (target) {
+        target.appendChild(el);
+      }
+      return () => {
+        if (target) target.removeChild(el);
+        ReactDOM.unmountComponentAtNode(el);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
 
-    React.useLayoutEffect(() => {
-      ReactDOM.render(a11yEl, el);
-    });
+  // const styles: React.CSSProperties = React.useMemo(() => {
+  //   return {
+  //     position: 'absolute',
+  //     transform: 'none',
+  //     ...style,
+  //   };
+  // }, [style, size]);
 
-    useFrame(() => {
-      if (group.current) {
-        camera.updateMatrixWorld();
-        const vec = calculatePosition(group.current, camera, size);
+  React.useLayoutEffect(() => {
+    ReactDOM.render(a11yEl, el);
+  });
 
-        if (
-          Math.abs(oldZoom.current - camera.zoom) > eps ||
-          Math.abs(oldPosition.current[0] - vec[0]) > eps ||
-          Math.abs(oldPosition.current[1] - vec[1]) > eps
-        ) {
-          el.style.display = !isObjectBehindCamera(group.current, camera)
-            ? 'block'
-            : 'none';
-          el.style.zIndex = `${objectZIndex(
-            group.current,
-            camera,
-            zIndexRange
-          )}`;
-          el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1)`;
-          oldPosition.current = vec;
-          oldZoom.current = camera.zoom;
-        }
+  useFrame(() => {
+    if (group.current) {
+      camera.updateMatrixWorld();
+      const vec = calculatePosition(group.current, camera, size);
+
+      if (
+        Math.abs(oldZoom.current - camera.zoom) > eps ||
+        Math.abs(oldPosition.current[0] - vec[0]) > eps ||
+        Math.abs(oldPosition.current[1] - vec[1]) > eps
+      ) {
+        el.style.display = !isObjectBehindCamera(group.current, camera)
+          ? 'block'
+          : 'none';
+        el.style.zIndex = `${objectZIndex(group.current, camera, zIndexRange)}`;
+        el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1)`;
+        oldPosition.current = vec;
+        oldZoom.current = camera.zoom;
       }
-    });
+    }
+  });
 
-    return <group {...props} ref={group} />;
-  }
-);
+  return <group {...props} ref={group} />;
+};

From c9232407a72c582b19660638c7ac1585b3928017 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 14 Jul 2021 23:19:26 +0200
Subject: [PATCH 05/40] fix useMemo dep

---
 src/A11y.tsx | 1 +
 src/Html.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 38f5dc7..b613ded 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -418,6 +418,7 @@ export const A11y: React.FC<Props> = ({
     tag,
     actionCall,
     focusCall,
+    a11yElAttr,
   ]);
 
   let AltText = null;
diff --git a/src/Html.tsx b/src/Html.tsx
index bf9d74d..a931059 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -121,7 +121,7 @@ export const Html = ({
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target]);
+  }, [target, a11yElAttr]);
 
   // const styles: React.CSSProperties = React.useMemo(() => {
   //   return {

From d06512246010278005eae5a1256dda04ff6c7042 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 14 Jul 2021 23:30:23 +0200
Subject: [PATCH 06/40] specify parent tag for A11y

---
 src/A11y.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index b613ded..83c89b8 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -16,6 +16,7 @@ interface A11yCommonProps {
   a11yElAttr?: Object;
   a11yParentElAttr?: Object;
   hidden?: boolean;
+  parentTag?: 'li' | 'div';
 }
 
 type RoleProps =
@@ -27,7 +28,7 @@ type RoleProps =
       href?: never;
       disabled?: never;
       startPressed?: never;
-      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'li';
+      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     }
   | {
       role: 'button';
@@ -105,6 +106,7 @@ export const A11y: React.FC<Props> = ({
   startPressed = false,
   tag = 'p',
   hidden = false,
+  parentTag,
   ...props
 }) => {
   let constHiddenButScreenreadable = Object.assign(
@@ -370,7 +372,7 @@ export const A11y: React.FC<Props> = ({
           />
         );
       } else {
-        const Tag = tag !== 'li' ? tag : 'p';
+        const Tag = tag;
         return (
           <Tag
             data-r3f-a11y="true"
@@ -490,7 +492,7 @@ export const A11y: React.FC<Props> = ({
             // @ts-ignore
             children.props.position ? children.props.position : 0
           }
-          tag={tag === 'li' ? tag : 'div'}
+          tag={parentTag}
           {...portal}
           a11yEl={HtmlAccessibleElement}
           a11yElAttr={a11yParentElAttr}

From 81a975a02a703caf0cc849ea855ce65ea1721c2e Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 14 Jul 2021 23:45:04 +0200
Subject: [PATCH 07/40] update example with latest props

---
 example/src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example/src/App.js b/example/src/App.js
index 177b2d9..52a44c1 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -68,6 +68,7 @@ function Nav({ left }) {
         a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}
         a11yParentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
         activationMsg="shape showing"
+        parentTag="li"
         actionCall={() => {
           state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1)
           state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1

From 42c0fe270fada07b465dae12038b8f1d7f5deb36 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 00:21:56 +0200
Subject: [PATCH 08/40] deepcheck custom el attributes in dep

---
 example/src/App.js |  2 +-
 package.json       |  3 ++-
 src/A11y.tsx       |  8 +++++++-
 src/A11yTag.tsx    | 22 ++++++++++++++++++----
 src/Html.tsx       | 30 +++++++++++++++++++++---------
 5 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 52a44c1..3daf084 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -65,7 +65,7 @@ function Nav({ left }) {
         role="link"
         href="#"
         description={`Spin ${left ? "left" : "right"} shape`}
-        a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}
+        a11yElAttr={state.active === 4 ? { role: "treeitem", "aria-expanded": "false" } : {}}
         a11yParentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
         activationMsg="shape showing"
         parentTag="li"
diff --git a/package.json b/package.json
index 9c9899c..ba5c4ee 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.13.10",
+    "@react-three/fiber": "^6.0.1",
     "@size-limit/preset-small-lib": "^4.10.1",
     "@storybook/addon-essentials": "^6.1.21",
     "@storybook/addon-info": "^5.3.21",
@@ -81,9 +82,9 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "babel-loader": "^8.2.2",
+    "fast-deep-equal": "^3.1.3",
     "husky": "^5.1.3",
     "react": "^17.0.1",
-    "@react-three/fiber": "^6.0.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
     "size-limit": "^4.10.1",
diff --git a/src/A11y.tsx b/src/A11y.tsx
index 83c89b8..bd60d38 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -3,6 +3,7 @@ import useAnnounceStore from './announceStore';
 import { useA11yTagContext } from './A11yTag';
 import { stylesHiddenButScreenreadable } from './A11yConsts';
 import { Html } from './Html';
+import isDeepEqual from 'fast-deep-equal/react';
 
 interface A11yCommonProps {
   role: 'button' | 'togglebutton' | 'link' | 'content' | 'image';
@@ -116,6 +117,11 @@ export const A11y: React.FC<Props> = ({
     a11yElStyle
   );
 
+  const a11yElAttrRef = useRef(a11yElAttr);
+  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
+    a11yElAttrRef.current = a11yElAttr;
+  }
+
   const [a11yState, setA11yState] = useState({
     hovered: false,
     focused: false,
@@ -420,7 +426,7 @@ export const A11y: React.FC<Props> = ({
     tag,
     actionCall,
     focusCall,
-    a11yElAttr,
+    a11yElAttrRef.current,
   ]);
 
   let AltText = null;
diff --git a/src/A11yTag.tsx b/src/A11yTag.tsx
index 8e7f899..393db9f 100644
--- a/src/A11yTag.tsx
+++ b/src/A11yTag.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Group } from 'three';
 import { Assign } from 'utility-types';
 import { ReactThreeFiber, useThree } from '@react-three/fiber';
+import isDeepEqual from 'fast-deep-equal/react';
 
 const A11yTagContext = React.createContext<
   React.MutableRefObject<HTMLElement | null>
@@ -51,9 +52,24 @@ export const A11yTag = ({
   const target = tagContext?.current ?? gl.domElement.parentNode;
   const elRef = React.useRef<HTMLElement | null>(null);
 
+  const a11yElAttrRef = React.useRef(a11yElAttr);
+  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
+    a11yElAttrRef.current = a11yElAttr;
+  }
+
   React.useEffect(() => {
     if (group.current) {
       el.style.cssText = `position:absolute;top:0;left:0;`;
+
+      return () => {
+        elRef.current = null;
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
+
+  React.useEffect(() => {
+    if (group.current) {
       if (a11yElAttr) {
         for (const property in a11yElAttr) {
           el.setAttribute(
@@ -63,12 +79,10 @@ export const A11yTag = ({
           );
         }
       }
-      return () => {
-        elRef.current = null;
-      };
+      return () => {};
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target]);
+  }, [a11yElAttrRef.current]);
 
   if (target && target !== el.parentElement) {
     if (!document.body.contains(el)) {
diff --git a/src/Html.tsx b/src/Html.tsx
index a931059..1b5a857 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -11,6 +11,7 @@ import {
 } from 'three';
 import { Assign } from 'utility-types';
 import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
+import isDeepEqual from 'fast-deep-equal/react';
 
 const v1 = new Vector3();
 const v2 = new Vector3();
@@ -96,12 +97,30 @@ export const Html = ({
   const oldPosition = React.useRef([0, 0]);
   const target = portal?.current ?? gl.domElement.parentNode;
 
+  const a11yElAttrRef = React.useRef(a11yElAttr);
+  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
+    a11yElAttrRef.current = a11yElAttr;
+  }
+
   React.useEffect(() => {
     if (group.current) {
       scene.updateMatrixWorld();
       const vec = calculatePosition(group.current, camera, size);
       el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
 
+      if (target) {
+        target.appendChild(el);
+      }
+      return () => {
+        if (target) target.removeChild(el);
+        ReactDOM.unmountComponentAtNode(el);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target]);
+
+  React.useEffect(() => {
+    if (group.current) {
       if (a11yElAttr) {
         for (const property in a11yElAttr) {
           el.setAttribute(
@@ -111,17 +130,10 @@ export const Html = ({
           );
         }
       }
-
-      if (target) {
-        target.appendChild(el);
-      }
-      return () => {
-        if (target) target.removeChild(el);
-        ReactDOM.unmountComponentAtNode(el);
-      };
+      return () => {};
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target, a11yElAttr]);
+  }, [a11yElAttrRef.current]);
 
   // const styles: React.CSSProperties = React.useMemo(() => {
   //   return {

From 077e7ac22b2c945a88683511dd76050b6b671cce Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 00:48:46 +0200
Subject: [PATCH 09/40] test

---
 example/src/App.js | 2 +-
 src/Html.tsx       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 3daf084..d399417 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -62,7 +62,7 @@ function Nav({ left }) {
   return (
     <A11yTag tag="li" a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}>
       <A11y
-        role="link"
+        role="button"
         href="#"
         description={`Spin ${left ? "left" : "right"} shape`}
         a11yElAttr={state.active === 4 ? { role: "treeitem", "aria-expanded": "false" } : {}}
diff --git a/src/Html.tsx b/src/Html.tsx
index 1b5a857..a1dd719 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -112,8 +112,8 @@ export const Html = ({
         target.appendChild(el);
       }
       return () => {
-        if (target) target.removeChild(el);
-        ReactDOM.unmountComponentAtNode(el);
+        // if (target) target.removeChild(el);
+        // ReactDOM.unmountComponentAtNode(el);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 2d975f810976b27219ff5f9666e89c8bb07c1ed6 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 00:54:36 +0200
Subject: [PATCH 10/40] test

---
 src/Html.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Html.tsx b/src/Html.tsx
index a1dd719..c757466 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -102,6 +102,9 @@ export const Html = ({
     a11yElAttrRef.current = a11yElAttr;
   }
 
+  console.log(a11yEl);
+  console.log(a11yElAttr);
+
   React.useEffect(() => {
     if (group.current) {
       scene.updateMatrixWorld();
@@ -112,8 +115,8 @@ export const Html = ({
         target.appendChild(el);
       }
       return () => {
-        // if (target) target.removeChild(el);
-        // ReactDOM.unmountComponentAtNode(el);
+        if (target) target.removeChild(el);
+        ReactDOM.unmountComponentAtNode(el);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 2eb0d0543cf089c026d6e1df08d13ee722abdc52 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:04:42 +0200
Subject: [PATCH 11/40] use children for HTML

---
 src/A11y.tsx | 2 +-
 src/Html.tsx | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index bd60d38..1415cd9 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -500,10 +500,10 @@ export const A11y: React.FC<Props> = ({
           }
           tag={parentTag}
           {...portal}
-          a11yEl={HtmlAccessibleElement}
           a11yElAttr={a11yParentElAttr}
         >
           {AltText}
+          {HtmlAccessibleElement}
         </Html>
       </group>
     </A11yContext.Provider>
diff --git a/src/Html.tsx b/src/Html.tsx
index c757466..b860738 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -71,7 +71,6 @@ export interface HtmlProps
   portal?: React.MutableRefObject<HTMLElement>;
   zIndexRange?: Array<number>;
   tag?: 'div' | 'li';
-  a11yEl: JSX.Element;
   a11yElAttr?: Object;
 }
 
@@ -83,7 +82,6 @@ export const Html = ({
   portal,
   zIndexRange = [16777271, 0],
   tag = 'div',
-  a11yEl,
   a11yElAttr,
   ...props
 }: HtmlProps) => {
@@ -102,9 +100,6 @@ export const Html = ({
     a11yElAttrRef.current = a11yElAttr;
   }
 
-  console.log(a11yEl);
-  console.log(a11yElAttr);
-
   React.useEffect(() => {
     if (group.current) {
       scene.updateMatrixWorld();
@@ -147,7 +142,7 @@ export const Html = ({
   // }, [style, size]);
 
   React.useLayoutEffect(() => {
-    ReactDOM.render(a11yEl, el);
+    ReactDOM.render(<>{children}</>, el);
   });
 
   useFrame(() => {

From 69bae8c445c8b49e8636c78af923d607381317c2 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:08:30 +0200
Subject: [PATCH 12/40] test

---
 src/A11y.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 1415cd9..1105765 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -500,7 +500,6 @@ export const A11y: React.FC<Props> = ({
           }
           tag={parentTag}
           {...portal}
-          a11yElAttr={a11yParentElAttr}
         >
           {AltText}
           {HtmlAccessibleElement}

From a1b94f987a576311f76de2e41f807f8202c5d7df Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:20:46 +0200
Subject: [PATCH 13/40] usememo for parentprop

---
 src/A11y.tsx | 50 +++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 1105765..3c9a541 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -121,6 +121,10 @@ export const A11y: React.FC<Props> = ({
   if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
     a11yElAttrRef.current = a11yElAttr;
   }
+  const a11yParentElAttrRef = useRef(a11yParentElAttr);
+  if (!isDeepEqual(a11yParentElAttrRef.current, a11yParentElAttr)) {
+    a11yParentElAttrRef.current = a11yParentElAttr;
+  }
 
   const [a11yState, setA11yState] = useState({
     hovered: false,
@@ -429,7 +433,7 @@ export const A11y: React.FC<Props> = ({
     a11yElAttrRef.current,
   ]);
 
-  let AltText = null;
+  let AltText: JSX.Element = <></>;
   if (showAltText && a11yState.hovered) {
     AltText = (
       <div
@@ -465,6 +469,37 @@ export const A11y: React.FC<Props> = ({
     portal = { portal: section };
   }
 
+  const A11yHtml = React.useMemo(() => {
+    return (
+      <Html
+        style={{ width: '0px' }}
+        position={
+          // @ts-ignore
+          children.props.position ? children.props.position : 0
+        }
+        tag={parentTag}
+        {...portal}
+        a11yElAttr={a11yParentElAttr}
+      >
+        {AltText}
+        {HtmlAccessibleElement}
+      </Html>
+    );
+  }, [
+    description,
+    a11yState,
+    hidden,
+    tabIndex,
+    href,
+    disabled,
+    startPressed,
+    tag,
+    actionCall,
+    focusCall,
+    a11yElAttrRef.current,
+    a11yParentElAttrRef.current,
+  ]);
+
   return (
     <A11yContext.Provider
       value={{
@@ -492,18 +527,7 @@ export const A11y: React.FC<Props> = ({
         onPointerOut={handleOnPointerOut}
       >
         {children}
-        <Html
-          style={{ width: '0px' }}
-          position={
-            // @ts-ignore
-            children.props.position ? children.props.position : 0
-          }
-          tag={parentTag}
-          {...portal}
-        >
-          {AltText}
-          {HtmlAccessibleElement}
-        </Html>
+        {A11yHtml}
       </group>
     </A11yContext.Provider>
   );

From c3c29a4ea09c2795b69aeaa1133a878768dfd1a0 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:34:30 +0200
Subject: [PATCH 14/40] test

---
 src/A11y.tsx | 45 +++++++++++++--------------------------------
 src/Html.tsx |  4 +---
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 3c9a541..2cf9237 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -469,37 +469,6 @@ export const A11y: React.FC<Props> = ({
     portal = { portal: section };
   }
 
-  const A11yHtml = React.useMemo(() => {
-    return (
-      <Html
-        style={{ width: '0px' }}
-        position={
-          // @ts-ignore
-          children.props.position ? children.props.position : 0
-        }
-        tag={parentTag}
-        {...portal}
-        a11yElAttr={a11yParentElAttr}
-      >
-        {AltText}
-        {HtmlAccessibleElement}
-      </Html>
-    );
-  }, [
-    description,
-    a11yState,
-    hidden,
-    tabIndex,
-    href,
-    disabled,
-    startPressed,
-    tag,
-    actionCall,
-    focusCall,
-    a11yElAttrRef.current,
-    a11yParentElAttrRef.current,
-  ]);
-
   return (
     <A11yContext.Provider
       value={{
@@ -527,7 +496,19 @@ export const A11y: React.FC<Props> = ({
         onPointerOut={handleOnPointerOut}
       >
         {children}
-        {A11yHtml}
+        <Html
+          style={{ width: '0px' }}
+          position={
+            // @ts-ignore
+            children.props.position ? children.props.position : 0
+          }
+          tag={parentTag}
+          {...portal}
+          a11yElAttr={a11yParentElAttr}
+        >
+          {AltText}
+          {HtmlAccessibleElement}
+        </Html>
       </group>
     </A11yContext.Provider>
   );
diff --git a/src/Html.tsx b/src/Html.tsx
index b860738..c4440d3 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -141,9 +141,7 @@ export const Html = ({
   //   };
   // }, [style, size]);
 
-  React.useLayoutEffect(() => {
-    ReactDOM.render(<>{children}</>, el);
-  });
+  ReactDOM.render(<>{children}</>, el);
 
   useFrame(() => {
     if (group.current) {

From a1ae37594b810f28cedfd57a40a3fffdcddde552 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:46:25 +0200
Subject: [PATCH 15/40] test

---
 src/A11y.tsx    |   2 +-
 src/Html.tsx    |   4 +-
 src/OldHtml.tsx | 186 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 190 insertions(+), 2 deletions(-)
 create mode 100644 src/OldHtml.tsx

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 2cf9237..852ab5d 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
 import useAnnounceStore from './announceStore';
 import { useA11yTagContext } from './A11yTag';
 import { stylesHiddenButScreenreadable } from './A11yConsts';
-import { Html } from './Html';
+import { Html } from './OldHtml';
 import isDeepEqual from 'fast-deep-equal/react';
 
 interface A11yCommonProps {
diff --git a/src/Html.tsx b/src/Html.tsx
index c4440d3..b860738 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -141,7 +141,9 @@ export const Html = ({
   //   };
   // }, [style, size]);
 
-  ReactDOM.render(<>{children}</>, el);
+  React.useLayoutEffect(() => {
+    ReactDOM.render(<>{children}</>, el);
+  });
 
   useFrame(() => {
     if (group.current) {
diff --git a/src/OldHtml.tsx b/src/OldHtml.tsx
new file mode 100644
index 0000000..dfc5acd
--- /dev/null
+++ b/src/OldHtml.tsx
@@ -0,0 +1,186 @@
+//https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {
+  Vector3,
+  Group,
+  Object3D,
+  Camera,
+  PerspectiveCamera,
+  OrthographicCamera,
+} from 'three';
+import { Assign } from 'utility-types';
+import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
+import isDeepEqual from 'fast-deep-equal/react';
+
+const v1 = new Vector3();
+const v2 = new Vector3();
+const v3 = new Vector3();
+
+function calculatePosition(
+  el: Object3D,
+  camera: Camera,
+  size: { width: number; height: number }
+) {
+  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+  objectPos.project(camera);
+  const widthHalf = size.width / 2;
+  const heightHalf = size.height / 2;
+  return [
+    objectPos.x * widthHalf + widthHalf,
+    -(objectPos.y * heightHalf) + heightHalf,
+  ];
+}
+
+function isObjectBehindCamera(el: Object3D, camera: Camera) {
+  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+  const deltaCamObj = objectPos.sub(cameraPos);
+  const camDir = camera.getWorldDirection(v3);
+  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
+}
+
+function objectZIndex(
+  el: Object3D,
+  camera: Camera,
+  zIndexRange: Array<number>
+) {
+  if (
+    camera instanceof PerspectiveCamera ||
+    camera instanceof OrthographicCamera
+  ) {
+    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+    const dist = objectPos.distanceTo(cameraPos);
+    const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
+    const B = zIndexRange[1] - A * camera.far;
+    return Math.round(A * dist + B);
+  }
+  return undefined;
+}
+
+export interface HtmlProps
+  extends Omit<
+    Assign<
+      React.HTMLAttributes<HTMLDivElement>,
+      ReactThreeFiber.Object3DNode<Group, typeof Group>
+    >,
+    'ref'
+  > {
+  eps?: number;
+  portal?: React.MutableRefObject<HTMLElement>;
+  zIndexRange?: Array<number>;
+  tag?: 'div' | 'li';
+  a11yElAttr?: Object;
+}
+
+export const Html = React.forwardRef(
+  (
+    {
+      children,
+      eps = 0.001,
+      style,
+      className,
+      portal,
+      zIndexRange = [16777271, 0],
+      tag = 'div',
+      a11yElAttr,
+      ...props
+    }: HtmlProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const gl = useThree(({ gl }) => gl);
+    const camera = useThree(({ camera }) => camera);
+    const scene = useThree(({ scene }) => scene);
+    const size = useThree(({ size }) => size);
+    const [el] = React.useState(() => document.createElement(tag));
+    const group = React.useRef<Group>(null);
+    const oldZoom = React.useRef(0);
+    const oldPosition = React.useRef([0, 0]);
+    const target = portal?.current ?? gl.domElement.parentNode;
+
+    const a11yElAttrRef = React.useRef(a11yElAttr);
+    if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
+      a11yElAttrRef.current = a11yElAttr;
+    }
+
+    React.useEffect(() => {
+      if (group.current) {
+        scene.updateMatrixWorld();
+        const vec = calculatePosition(group.current, camera, size);
+        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+        if (target) {
+          target.appendChild(el);
+        }
+        return () => {
+          if (target) target.removeChild(el);
+          ReactDOM.unmountComponentAtNode(el);
+        };
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [target]);
+
+    React.useEffect(() => {
+      if (group.current) {
+        if (a11yElAttr) {
+          for (const property in a11yElAttr) {
+            el.setAttribute(
+              property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+              //@ts-ignore
+              a11yElAttr[property]
+            );
+          }
+        }
+        return () => {};
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [a11yElAttrRef.current]);
+
+    const styles: React.CSSProperties = React.useMemo(() => {
+      return {
+        position: 'absolute',
+        transform: 'none',
+        ...style,
+      };
+    }, [style, size]);
+
+    React.useLayoutEffect(() => {
+      ReactDOM.render(
+        <div
+          ref={ref}
+          style={styles}
+          className={className}
+          children={children}
+        />,
+        el
+      );
+    });
+
+    useFrame(() => {
+      if (group.current) {
+        camera.updateMatrixWorld();
+        const vec = calculatePosition(group.current, camera, size);
+
+        if (
+          Math.abs(oldZoom.current - camera.zoom) > eps ||
+          Math.abs(oldPosition.current[0] - vec[0]) > eps ||
+          Math.abs(oldPosition.current[1] - vec[1]) > eps
+        ) {
+          el.style.display = !isObjectBehindCamera(group.current, camera)
+            ? 'block'
+            : 'none';
+          el.style.zIndex = `${objectZIndex(
+            group.current,
+            camera,
+            zIndexRange
+          )}`;
+          el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1)`;
+          oldPosition.current = vec;
+          oldZoom.current = camera.zoom;
+        }
+      }
+    });
+
+    return <group {...props} ref={group} />;
+  }
+);

From 10eacb91ecb2b487b38f7db74856f86144ed6164 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:50:00 +0200
Subject: [PATCH 16/40] test

---
 src/OldHtml.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/OldHtml.tsx b/src/OldHtml.tsx
index dfc5acd..3daaf45 100644
--- a/src/OldHtml.tsx
+++ b/src/OldHtml.tsx
@@ -120,22 +120,6 @@ export const Html = React.forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [target]);
 
-    React.useEffect(() => {
-      if (group.current) {
-        if (a11yElAttr) {
-          for (const property in a11yElAttr) {
-            el.setAttribute(
-              property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
-              //@ts-ignore
-              a11yElAttr[property]
-            );
-          }
-        }
-        return () => {};
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [a11yElAttrRef.current]);
-
     const styles: React.CSSProperties = React.useMemo(() => {
       return {
         position: 'absolute',

From abb09fdb868d30f440aa53ec8782098adb62cc01 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 01:51:30 +0200
Subject: [PATCH 17/40] test

---
 src/A11y.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 852ab5d..594ce34 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -504,7 +504,6 @@ export const A11y: React.FC<Props> = ({
           }
           tag={parentTag}
           {...portal}
-          a11yElAttr={a11yParentElAttr}
         >
           {AltText}
           {HtmlAccessibleElement}

From 433eeea6d70aafa08429110355124185b0bf1bf1 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 02:06:58 +0200
Subject: [PATCH 18/40] test

---
 src/A11y.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 594ce34..6cbe42b 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -15,7 +15,7 @@ interface A11yCommonProps {
   debug?: boolean;
   a11yElStyle?: Object;
   a11yElAttr?: Object;
-  a11yParentElAttr?: Object;
+  parentElAttr?: Object;
   hidden?: boolean;
   parentTag?: 'li' | 'div';
 }
@@ -103,7 +103,7 @@ export const A11y: React.FC<Props> = ({
   debug = false,
   a11yElStyle,
   a11yElAttr,
-  a11yParentElAttr,
+  parentElAttr,
   startPressed = false,
   tag = 'p',
   hidden = false,
@@ -121,9 +121,9 @@ export const A11y: React.FC<Props> = ({
   if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
     a11yElAttrRef.current = a11yElAttr;
   }
-  const a11yParentElAttrRef = useRef(a11yParentElAttr);
-  if (!isDeepEqual(a11yParentElAttrRef.current, a11yParentElAttr)) {
-    a11yParentElAttrRef.current = a11yParentElAttr;
+  const parentElAttrRef = useRef(parentElAttr);
+  if (!isDeepEqual(parentElAttrRef.current, parentElAttr)) {
+    parentElAttrRef.current = parentElAttr;
   }
 
   const [a11yState, setA11yState] = useState({

From 33ea6a37530420493528943ca07763f80e358d31 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 02:11:45 +0200
Subject: [PATCH 19/40] test

---
 example/src/App.js | 2 +-
 src/A11y.tsx       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/example/src/App.js b/example/src/App.js
index d399417..79e9a49 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -66,7 +66,7 @@ function Nav({ left }) {
         href="#"
         description={`Spin ${left ? "left" : "right"} shape`}
         a11yElAttr={state.active === 4 ? { role: "treeitem", "aria-expanded": "false" } : {}}
-        a11yParentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
+        parentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
         activationMsg="shape showing"
         parentTag="li"
         actionCall={() => {
diff --git a/src/A11y.tsx b/src/A11y.tsx
index 6cbe42b..66c509f 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -504,6 +504,7 @@ export const A11y: React.FC<Props> = ({
           }
           tag={parentTag}
           {...portal}
+          a11yElAttr={parentElAttr}
         >
           {AltText}
           {HtmlAccessibleElement}

From 33321bc9d7f95e9803f3355cb648108dbf99f44a Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 02:14:44 +0200
Subject: [PATCH 20/40] test

---
 src/OldHtml.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/OldHtml.tsx b/src/OldHtml.tsx
index 3daaf45..dfc5acd 100644
--- a/src/OldHtml.tsx
+++ b/src/OldHtml.tsx
@@ -120,6 +120,22 @@ export const Html = React.forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [target]);
 
+    React.useEffect(() => {
+      if (group.current) {
+        if (a11yElAttr) {
+          for (const property in a11yElAttr) {
+            el.setAttribute(
+              property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+              //@ts-ignore
+              a11yElAttr[property]
+            );
+          }
+        }
+        return () => {};
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [a11yElAttrRef.current]);
+
     const styles: React.CSSProperties = React.useMemo(() => {
       return {
         position: 'absolute',

From 873a8530448ac85766cb0ea7325e7b27f96135d7 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 02:29:13 +0200
Subject: [PATCH 21/40] test

---
 src/A11y.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index 66c509f..f5c1991 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
 import useAnnounceStore from './announceStore';
 import { useA11yTagContext } from './A11yTag';
 import { stylesHiddenButScreenreadable } from './A11yConsts';
-import { Html } from './OldHtml';
+import { Html } from './Html';
 import isDeepEqual from 'fast-deep-equal/react';
 
 interface A11yCommonProps {

From 7dfe751ffcb476c4eb2aef8aa16d33de7423590f Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 09:58:03 +0200
Subject: [PATCH 22/40] remove test

---
 src/OldHtml.tsx | 186 ------------------------------------------------
 1 file changed, 186 deletions(-)
 delete mode 100644 src/OldHtml.tsx

diff --git a/src/OldHtml.tsx b/src/OldHtml.tsx
deleted file mode 100644
index dfc5acd..0000000
--- a/src/OldHtml.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-//https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {
-  Vector3,
-  Group,
-  Object3D,
-  Camera,
-  PerspectiveCamera,
-  OrthographicCamera,
-} from 'three';
-import { Assign } from 'utility-types';
-import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
-import isDeepEqual from 'fast-deep-equal/react';
-
-const v1 = new Vector3();
-const v2 = new Vector3();
-const v3 = new Vector3();
-
-function calculatePosition(
-  el: Object3D,
-  camera: Camera,
-  size: { width: number; height: number }
-) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  objectPos.project(camera);
-  const widthHalf = size.width / 2;
-  const heightHalf = size.height / 2;
-  return [
-    objectPos.x * widthHalf + widthHalf,
-    -(objectPos.y * heightHalf) + heightHalf,
-  ];
-}
-
-function isObjectBehindCamera(el: Object3D, camera: Camera) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-  const deltaCamObj = objectPos.sub(cameraPos);
-  const camDir = camera.getWorldDirection(v3);
-  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
-}
-
-function objectZIndex(
-  el: Object3D,
-  camera: Camera,
-  zIndexRange: Array<number>
-) {
-  if (
-    camera instanceof PerspectiveCamera ||
-    camera instanceof OrthographicCamera
-  ) {
-    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-    const dist = objectPos.distanceTo(cameraPos);
-    const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
-    const B = zIndexRange[1] - A * camera.far;
-    return Math.round(A * dist + B);
-  }
-  return undefined;
-}
-
-export interface HtmlProps
-  extends Omit<
-    Assign<
-      React.HTMLAttributes<HTMLDivElement>,
-      ReactThreeFiber.Object3DNode<Group, typeof Group>
-    >,
-    'ref'
-  > {
-  eps?: number;
-  portal?: React.MutableRefObject<HTMLElement>;
-  zIndexRange?: Array<number>;
-  tag?: 'div' | 'li';
-  a11yElAttr?: Object;
-}
-
-export const Html = React.forwardRef(
-  (
-    {
-      children,
-      eps = 0.001,
-      style,
-      className,
-      portal,
-      zIndexRange = [16777271, 0],
-      tag = 'div',
-      a11yElAttr,
-      ...props
-    }: HtmlProps,
-    ref: React.Ref<HTMLDivElement>
-  ) => {
-    const gl = useThree(({ gl }) => gl);
-    const camera = useThree(({ camera }) => camera);
-    const scene = useThree(({ scene }) => scene);
-    const size = useThree(({ size }) => size);
-    const [el] = React.useState(() => document.createElement(tag));
-    const group = React.useRef<Group>(null);
-    const oldZoom = React.useRef(0);
-    const oldPosition = React.useRef([0, 0]);
-    const target = portal?.current ?? gl.domElement.parentNode;
-
-    const a11yElAttrRef = React.useRef(a11yElAttr);
-    if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
-      a11yElAttrRef.current = a11yElAttr;
-    }
-
-    React.useEffect(() => {
-      if (group.current) {
-        scene.updateMatrixWorld();
-        const vec = calculatePosition(group.current, camera, size);
-        el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
-        if (target) {
-          target.appendChild(el);
-        }
-        return () => {
-          if (target) target.removeChild(el);
-          ReactDOM.unmountComponentAtNode(el);
-        };
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [target]);
-
-    React.useEffect(() => {
-      if (group.current) {
-        if (a11yElAttr) {
-          for (const property in a11yElAttr) {
-            el.setAttribute(
-              property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
-              //@ts-ignore
-              a11yElAttr[property]
-            );
-          }
-        }
-        return () => {};
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [a11yElAttrRef.current]);
-
-    const styles: React.CSSProperties = React.useMemo(() => {
-      return {
-        position: 'absolute',
-        transform: 'none',
-        ...style,
-      };
-    }, [style, size]);
-
-    React.useLayoutEffect(() => {
-      ReactDOM.render(
-        <div
-          ref={ref}
-          style={styles}
-          className={className}
-          children={children}
-        />,
-        el
-      );
-    });
-
-    useFrame(() => {
-      if (group.current) {
-        camera.updateMatrixWorld();
-        const vec = calculatePosition(group.current, camera, size);
-
-        if (
-          Math.abs(oldZoom.current - camera.zoom) > eps ||
-          Math.abs(oldPosition.current[0] - vec[0]) > eps ||
-          Math.abs(oldPosition.current[1] - vec[1]) > eps
-        ) {
-          el.style.display = !isObjectBehindCamera(group.current, camera)
-            ? 'block'
-            : 'none';
-          el.style.zIndex = `${objectZIndex(
-            group.current,
-            camera,
-            zIndexRange
-          )}`;
-          el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1)`;
-          oldPosition.current = vec;
-          oldZoom.current = camera.zoom;
-        }
-      }
-    });
-
-    return <group {...props} ref={group} />;
-  }
-);

From 4d94c5eca14f6204d7690c57206c6dbf9bb071fa Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 11:20:34 +0200
Subject: [PATCH 23/40] hide group when hidden

---
 src/A11y.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/A11y.tsx b/src/A11y.tsx
index f5c1991..08a4e83 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -494,6 +494,7 @@ export const A11y: React.FC<Props> = ({
         }}
         onPointerOver={handleOnPointerOver}
         onPointerOut={handleOnPointerOut}
+        visible={!hidden}
       >
         {children}
         <Html

From e0909f243a23ec0d3d46a19854375c1c7f808223 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 14:50:40 +0200
Subject: [PATCH 24/40] fix append order

---
 example/src/App.js | 14 +++++++-------
 src/A11y.tsx       |  2 +-
 src/A11yTag.tsx    |  2 +-
 src/Html.tsx       |  9 ++++++---
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 79e9a49..117fce8 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -184,9 +184,7 @@ const CarrousselAll = () => {
 
   return (
     <>
-      <A11ySection
-        label="Shape carousel"
-        description="This carousel contains 5 shapes. Use the Previous and Next buttons to cycle through all the shapes.">
+      <A11yTag tag={"section"} a11yElAttr={{ "aria-label": "Shape carousel" }}>
         <Nav left />
         <Carroussel />
         <Nav />
@@ -203,7 +201,7 @@ const CarrousselAll = () => {
           a11yElStyle={{ marginLeft: "-40px" }}>
           <ToggleButton position={[0, -3, 9]} />
         </A11y>
-      </A11ySection>
+      </A11yTag>
     </>
   )
 }
@@ -225,6 +223,9 @@ export default function App() {
           <pointLight position={[-100, -100, -100]} intensity={1.5} color="red" />
           <ambientLight intensity={snap.disabled ? 0.2 : 0.8} />
           <group position-y={2}>
+            <A11y role="image" description="Je suis un test">
+              <SwitchButton position={[-3, 3, 7]} />
+            </A11y>
             <A11yTag tag="header">
               <A11yTag tag="nav">
                 <A11yTag tag="ul">
@@ -232,9 +233,8 @@ export default function App() {
                 </A11yTag>
               </A11yTag>
             </A11yTag>
-            <A11y role="image" description="Je suis un test">
-              <SwitchButton position={[-3, 3, 7]} />
-            </A11y>
+            <A11yTag tag="footer"></A11yTag>
+
             <A11y
               role="togglebutton"
               startPressed={false}
diff --git a/src/A11y.tsx b/src/A11y.tsx
index 08a4e83..ea7e92e 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -494,7 +494,7 @@ export const A11y: React.FC<Props> = ({
         }}
         onPointerOver={handleOnPointerOver}
         onPointerOut={handleOnPointerOut}
-        visible={!hidden}
+        // visible={!hidden}
       >
         {children}
         <Html
diff --git a/src/A11yTag.tsx b/src/A11yTag.tsx
index 393db9f..e187fec 100644
--- a/src/A11yTag.tsx
+++ b/src/A11yTag.tsx
@@ -86,7 +86,7 @@ export const A11yTag = ({
 
   if (target && target !== el.parentElement) {
     if (!document.body.contains(el)) {
-      target.appendChild(el);
+      target.append(el);
     }
   }
   elRef.current = el;
diff --git a/src/Html.tsx b/src/Html.tsx
index b860738..b4928ee 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -106,9 +106,6 @@ export const Html = ({
       const vec = calculatePosition(group.current, camera, size);
       el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
 
-      if (target) {
-        target.appendChild(el);
-      }
       return () => {
         if (target) target.removeChild(el);
         ReactDOM.unmountComponentAtNode(el);
@@ -133,6 +130,12 @@ export const Html = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [a11yElAttrRef.current]);
 
+  if (target && target !== el.parentElement) {
+    if (!document.body.contains(el)) {
+      target.append(el);
+    }
+  }
+
   // const styles: React.CSSProperties = React.useMemo(() => {
   //   return {
   //     position: 'absolute',

From 344955db1464b1c6c003eaf3661bc796f00a2f7f Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Thu, 15 Jul 2021 16:00:33 +0200
Subject: [PATCH 25/40] role type input

---
 example/src/App.js | 37 ++++++++++++++++++++++++++---
 src/A11y.tsx       | 58 ++++++++++++++++++++++++++++++++++++++++++++--
 src/A11yConsts.tsx |  1 +
 3 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 117fce8..c36af1e 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -1,6 +1,6 @@
 import * as THREE from "three"
 import { Canvas, useFrame, useThree } from "@react-three/fiber"
-import React, { Suspense, useCallback, useEffect, useRef, useContext } from "react"
+import React, { Suspense, useCallback, useEffect, useRef, useContext, useState } from "react"
 import { ContactShadows, Text, Html } from "@react-three/drei"
 import { A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
 import { ResizeObserver } from "@juggle/resize-observer"
@@ -31,7 +31,7 @@ function SwitchButton(props) {
   const a11y = useA11y()
   return (
     <>
-      <mesh {...props} rotation={[0, 0, a11y.pressed ? Math.PI / 4 : -Math.PI / 4]}>
+      <mesh {...props} rotation={[0, 0, a11y.pressed || props.checked ? Math.PI / 4 : -Math.PI / 4]}>
         <boxBufferGeometry args={[0.3, 2, 0.3]} />
         <meshStandardMaterial color={a11y.focus ? "lightsalmon" : a11y.hover ? "lightpink" : "lightblue"} />
       </mesh>
@@ -212,6 +212,7 @@ export default function App() {
   //   sectionRefref.current = node
   // }, [])
   const snap = useProxy(state)
+  const [checkedSize, setcheckedSize] = useState(false)
 
   return (
     <main className={snap.dark ? "dark" : "bright"}>
@@ -234,7 +235,37 @@ export default function App() {
               </A11yTag>
             </A11yTag>
             <A11yTag tag="footer"></A11yTag>
-
+            <A11yTag tag="p">Pick size</A11yTag>
+            <A11y
+              role="input"
+              description="small"
+              a11yElAttr={{
+                type: "radio",
+                name: "drone",
+                value: "small",
+                checked: checkedSize === "small",
+              }}
+              actionCall={() => {
+                setcheckedSize("small")
+              }}
+              description="Je suis input1">
+              <SwitchButton checked={checkedSize === "small"} position={[-1, 3, 7]} />
+            </A11y>
+            <A11y
+              role="input"
+              description="medium"
+              a11yElAttr={{
+                type: "radio",
+                name: "drone",
+                value: "medium",
+                checked: checkedSize === "medium",
+              }}
+              actionCall={() => {
+                setcheckedSize("medium")
+              }}
+              description="Je suis input2">
+              <SwitchButton checked={checkedSize === "medium"} position={[1, 3, 7]} />
+            </A11y>
             <A11y
               role="togglebutton"
               startPressed={false}
diff --git a/src/A11y.tsx b/src/A11y.tsx
index ea7e92e..157e874 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -6,7 +6,7 @@ import { Html } from './Html';
 import isDeepEqual from 'fast-deep-equal/react';
 
 interface A11yCommonProps {
-  role: 'button' | 'togglebutton' | 'link' | 'content' | 'image';
+  role: 'button' | 'togglebutton' | 'link' | 'content' | 'image' | 'input';
   children: React.ReactNode;
   description: string;
   tabIndex?: number;
@@ -70,6 +70,16 @@ type RoleProps =
       disabled?: never;
       startPressed?: never;
       tag?: never;
+    }
+  | {
+      role: 'input';
+      activationMsg?: string;
+      deactivationMsg?: string;
+      actionCall?: () => any;
+      href?: never;
+      disabled?: boolean;
+      startPressed?: never;
+      tag?: never;
     };
 
 type Props = A11yCommonProps & RoleProps;
@@ -381,6 +391,50 @@ export const A11y: React.FC<Props> = ({
             }}
           />
         );
+      } else if (role === 'input') {
+        return (
+          <label
+            style={Object.assign(
+              constHiddenButScreenreadable,
+              hidden
+                ? { visibility: 'hidden' as const }
+                : { visibility: 'visible' as const },
+              { display: 'block' }
+            )}
+            onPointerOver={handleOnPointerOver}
+            onPointerOut={handleOnPointerOut}
+          >
+            {description}
+            <input
+              data-r3f-a11y="true"
+              tabIndex={tabIndex ? tabIndex : 0}
+              {...a11yElAttr}
+              onChange={() => {}}
+              onClick={e => {
+                e.stopPropagation();
+                if (disabled) {
+                  return;
+                }
+                handleBtnClick();
+              }}
+              onBlur={() => {
+                setA11yState({
+                  hovered: a11yState.hovered,
+                  focused: false,
+                  pressed: a11yState.pressed,
+                });
+              }}
+              onFocus={() => {
+                if (typeof focusCall === 'function') focusCall();
+                setA11yState({
+                  hovered: a11yState.hovered,
+                  focused: true,
+                  pressed: a11yState.pressed,
+                });
+              }}
+            />
+          </label>
+        );
       } else {
         const Tag = tag;
         return (
@@ -484,7 +538,7 @@ export const A11y: React.FC<Props> = ({
           if (disabled) {
             return;
           }
-          if (role === 'button') {
+          if (role === 'button' || role === 'input') {
             handleBtnClick();
           } else if (role === 'togglebutton') {
             handleToggleBtnClick();
diff --git a/src/A11yConsts.tsx b/src/A11yConsts.tsx
index a0b8d8a..d0d3dda 100644
--- a/src/A11yConsts.tsx
+++ b/src/A11yConsts.tsx
@@ -9,6 +9,7 @@ let stylesHiddenButScreenreadable = {
   userSelect: 'none' as const,
   WebkitUserSelect: 'none' as const,
   WebkitTouchCallout: 'none' as const,
+  cursor: 'unset',
   margin: 0,
 };
 

From 8ed2b574b3720ed5652436444e44a5a628a07ce5 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 16:34:10 +0200
Subject: [PATCH 26/40] use existing HTML

---
 example/index.html        |  49 +++++++++
 example/public/index.html |  38 ++++---
 example/src/App.js        |  95 ++++-------------
 src/A11y.tsx              |   4 +-
 src/A11yBind.tsx          | 213 ++++++++++++++++++++++++++++++++++++++
 src/Html.tsx              |   2 +-
 src/HtmlBind.tsx          | 116 +++++++++++++++++++++
 src/index.tsx             |   1 +
 8 files changed, 421 insertions(+), 97 deletions(-)
 create mode 100644 src/A11yBind.tsx
 create mode 100644 src/HtmlBind.tsx

diff --git a/example/index.html b/example/index.html
index 90c9ff1..a88ccb0 100644
--- a/example/index.html
+++ b/example/index.html
@@ -8,6 +8,55 @@
   </head>
 
   <body>
+    <header>
+      <img src="" alt="logo" id="mainimg" />
+      <h1>STARTER SELECTION</h1>
+      <nav>
+        <ul role="menu">
+          <li role="none">
+            <button aria-controls="mainnav" aria-expanded="false" role="menuitem" tabindex="0">
+              PICK YOUR STARTER
+            </button>
+          </li>
+          <ul id="mainnav">
+            <li role="none">
+              <a href="/">GRASS TYPE</a>
+            </li>
+            <li>
+              <a href="/red">FIRE TYPE</a>
+            </li>
+            <li>
+              <a href="/blue">WATER TYPE</a>
+            </li>
+          </ul>
+        </ul>
+      </nav>
+    </header>
+    <form>
+      <fieldset>
+        <legend>
+          <p>Select option</p>
+        </legend>
+        <label>
+          Large
+          <input tabindex="0" type="radio" name="sizeoption" value="large" checked="" />
+        </label>
+        <label>
+          Medium
+          <input tabindex="0" type="radio" name="sizeoption" value="medium" />
+        </label>
+        <label>
+          Small
+          <input tabindex="0" type="radio" name="sizeoption" value="small" />
+        </label>
+      </fieldset>
+    </form>
+    <div>
+      <button tabindex="0">rotate left</button>
+    </div>
+    <div>
+      <button tabindex="0">rotate right</button>
+    </div>
     <div id="root"></div>
     <script src="./src/index.js"></script>
   </body>
diff --git a/example/public/index.html b/example/public/index.html
index 42ae2d2..16b054f 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="theme-color" content="#000000">
-	<!--
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +19,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-	<title>React App</title>
-</head>
+    <title>React App</title>
+  </head>
 
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +37,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/example/src/App.js b/example/src/App.js
index c36af1e..e1639fa 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { Canvas, useFrame, useThree } from "@react-three/fiber"
 import React, { Suspense, useCallback, useEffect, useRef, useContext, useState } from "react"
 import { ContactShadows, Text, Html } from "@react-three/drei"
-import { A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
+import { A11yBind, A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
 import { ResizeObserver } from "@juggle/resize-observer"
 import { proxy, useProxy } from "valtio"
 import { EffectComposer, SSAO, SMAA } from "@react-three/postprocessing"
@@ -215,78 +215,25 @@ export default function App() {
   const [checkedSize, setcheckedSize] = useState(false)
 
   return (
-    <main className={snap.dark ? "dark" : "bright"}>
-      <Canvas resize={{ polyfill: ResizeObserver }} camera={{ position: [0, 0, 15], near: 4, far: 30 }} pixelRatio={[1, 1.5]}>
-        <A11yUserPreferences debug={true}>
-          {/* <A11yDebuger /> */}
-          {/* <ResponsiveText /> */}
-          <pointLight position={[100, 100, 100]} intensity={snap.disabled ? 0.2 : 0.5} />
-          <pointLight position={[-100, -100, -100]} intensity={1.5} color="red" />
-          <ambientLight intensity={snap.disabled ? 0.2 : 0.8} />
-          <group position-y={2}>
-            <A11y role="image" description="Je suis un test">
-              <SwitchButton position={[-3, 3, 7]} />
-            </A11y>
-            <A11yTag tag="header">
-              <A11yTag tag="nav">
-                <A11yTag tag="ul">
-                  <CarrousselAll />
-                </A11yTag>
-              </A11yTag>
-            </A11yTag>
-            <A11yTag tag="footer"></A11yTag>
-            <A11yTag tag="p">Pick size</A11yTag>
-            <A11y
-              role="input"
-              description="small"
-              a11yElAttr={{
-                type: "radio",
-                name: "drone",
-                value: "small",
-                checked: checkedSize === "small",
-              }}
-              actionCall={() => {
-                setcheckedSize("small")
-              }}
-              description="Je suis input1">
-              <SwitchButton checked={checkedSize === "small"} position={[-1, 3, 7]} />
-            </A11y>
-            <A11y
-              role="input"
-              description="medium"
-              a11yElAttr={{
-                type: "radio",
-                name: "drone",
-                value: "medium",
-                checked: checkedSize === "medium",
-              }}
-              actionCall={() => {
-                setcheckedSize("medium")
-              }}
-              description="Je suis input2">
-              <SwitchButton checked={checkedSize === "medium"} position={[1, 3, 7]} />
-            </A11y>
-            <A11y
-              role="togglebutton"
-              startPressed={false}
-              description="Power button, click to disable the scene"
-              pressedDescription="Power button, click to turn on the scene"
-              actionCall={() => (state.disabled = !snap.disabled)}
-              activationMsg="Scene activated"
-              deactivationMsg="Scene disabled">
-              <SwitchButton position={[-3, -5, 7]} />
-            </A11y>
-          </group>
-          {/* <Suspense fallback={null}>
-          <EffectComposer multisampling={0}>
-            <SSAO radius={20} intensity={50} luminanceInfluence={0.1} color="#154073" />
-            <SMAA />
-          </EffectComposer>
-        </Suspense> */}
-        </A11yUserPreferences>
-      </Canvas>
-      <Badge />
-      <A11yAnnouncer />
-    </main>
+    <>
+      <main className={snap.dark ? "dark" : "bright"}>
+        <Canvas resize={{ polyfill: ResizeObserver }} camera={{ position: [0, 0, 15], near: 4, far: 30 }} pixelRatio={[1, 1.5]}>
+          <A11yUserPreferences debug={true}>
+            {/* <A11yDebuger /> */}
+            {/* <ResponsiveText /> */}
+            <pointLight position={[100, 100, 100]} intensity={snap.disabled ? 0.2 : 0.5} />
+            <pointLight position={[-100, -100, -100]} intensity={1.5} color="red" />
+            <ambientLight intensity={snap.disabled ? 0.2 : 0.8} />
+            <group position-y={2}>
+              <A11yBind bind="mainimg">
+                <SwitchButton position={[-3, 3, 7]} />
+              </A11yBind>
+            </group>
+          </A11yUserPreferences>
+        </Canvas>
+        <Badge />
+        <A11yAnnouncer />
+      </main>
+    </>
   )
 }
diff --git a/src/A11y.tsx b/src/A11y.tsx
index 157e874..7662849 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -17,7 +17,7 @@ interface A11yCommonProps {
   a11yElAttr?: Object;
   parentElAttr?: Object;
   hidden?: boolean;
-  parentTag?: 'li' | 'div';
+  parentTag?: 'li' | 'div' | 'legend';
 }
 
 type RoleProps =
@@ -29,7 +29,7 @@ type RoleProps =
       href?: never;
       disabled?: never;
       startPressed?: never;
-      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend';
     }
   | {
       role: 'button';
diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
new file mode 100644
index 0000000..f47a743
--- /dev/null
+++ b/src/A11yBind.tsx
@@ -0,0 +1,213 @@
+import React, { useEffect, useRef, useState, useContext } from 'react';
+import useAnnounceStore from './announceStore';
+import { stylesHiddenButScreenreadable } from './A11yConsts';
+import { HtmlBind } from './HtmlBind';
+import isDeepEqual from 'fast-deep-equal/react';
+
+interface Props {
+  children: React.ReactNode;
+  description: string;
+  focusCall?: (...args: any[]) => any;
+  debug?: boolean;
+  a11yElStyle?: Object;
+  a11yElAttr?: Object;
+  hidden?: boolean;
+  activationMsg?: string;
+  actionCall?: () => any;
+  disabled?: boolean;
+  showPointer?: boolean;
+}
+
+const A11yContext = React.createContext({
+  focus: false,
+  hover: false,
+});
+
+A11yContext.displayName = 'A11yContext';
+
+const useA11yBind = () => {
+  return useContext(A11yContext);
+};
+
+export { useA11yBind };
+
+export const A11yBind: React.FC<Props> = ({
+  children,
+  description,
+  activationMsg,
+  actionCall,
+  focusCall,
+  disabled,
+  debug = false,
+  a11yElStyle,
+  a11yElAttr,
+  hidden = false,
+  showPointer = false,
+  ...props
+}) => {
+  const bindedEl = useRef(document.getElementById('mainimg'));
+
+  let constHiddenButScreenreadable = Object.assign(
+    {},
+    stylesHiddenButScreenreadable,
+    { opacity: debug ? 1 : 0 },
+    a11yElStyle
+  );
+
+  const a11yElAttrRef = useRef(a11yElAttr);
+  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
+    a11yElAttrRef.current = a11yElAttr;
+  }
+
+  const [a11yState, setA11yState] = useState({
+    hovered: false,
+    focused: false,
+  });
+
+  const a11yScreenReader = useAnnounceStore(state => state.a11yScreenReader);
+
+  const overHtml = useRef(false);
+  const overMesh = useRef(false);
+
+  const documentElement = document.documentElement;
+
+  // temporary fix to prevent error -> keep track of our component's mounted state
+  const componentIsMounted = useRef(true);
+  useEffect(() => {
+    if (bindedEl.current) {
+      if (bindedEl.current.tagName === 'IMG')
+        bindedEl.current.setAttribute(
+          'src',
+          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
+        );
+      bindedEl.current.setAttribute('data-r3f-a11y', 'true');
+      if (a11yElAttr) {
+        for (const property in a11yElAttr) {
+          bindedEl.current.setAttribute(
+            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+            //@ts-ignore
+            a11yElAttr[property]
+          );
+        }
+      }
+      const styles = Object.assign(
+        constHiddenButScreenreadable,
+        hidden
+          ? { visibility: 'hidden' as const }
+          : { visibility: 'visible' as const }
+      );
+      Object.keys(styles).forEach((key: string) => {
+        bindedEl.current?.style.setProperty(
+          key.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+          //@ts-ignore
+          styles[key]
+        );
+      });
+      bindedEl.current.onpointerover = handleOnPointerOver;
+      bindedEl.current.onpointerout = handleOnPointerOut;
+      bindedEl.current.onclick = e => {
+        e.stopPropagation();
+        if (disabled) {
+          return;
+        }
+        if (typeof actionCall === 'function') actionCall();
+        a11yScreenReader('');
+        window.setTimeout(() => {
+          if (typeof activationMsg === 'string')
+            a11yScreenReader(activationMsg);
+        }, 100);
+      };
+      bindedEl.current.onfocus = () => {
+        if (typeof focusCall === 'function') focusCall();
+        setA11yState({
+          hovered: a11yState.hovered,
+          focused: true,
+        });
+      };
+      bindedEl.current.onblur = () => {
+        setA11yState({
+          hovered: a11yState.hovered,
+          focused: false,
+        });
+      };
+    }
+
+    return () => {
+      documentElement.style.cursor = 'default';
+      componentIsMounted.current = false;
+    };
+  }, []);
+
+  React.Children.only(children);
+  // @ts-ignore
+  const handleOnPointerOver = e => {
+    if (e.eventObject) {
+      overMesh.current = true;
+    } else {
+      overHtml.current = true;
+    }
+    if (overHtml.current || overMesh.current) {
+      if (
+        bindedEl.current?.tagName === 'A' ||
+        bindedEl.current?.tagName === 'BUTTON' ||
+        showPointer
+      ) {
+        documentElement.style.cursor = 'pointer';
+      }
+      setA11yState({
+        hovered: true,
+        focused: a11yState.focused,
+      });
+    }
+  };
+  // @ts-ignore
+  const handleOnPointerOut = e => {
+    if (e.eventObject) {
+      overMesh.current = false;
+    } else {
+      overHtml.current = false;
+    }
+    if (!overHtml.current && !overMesh.current) {
+      if (componentIsMounted.current) {
+        documentElement.style.cursor = 'default';
+        setA11yState({
+          hovered: false,
+          focused: a11yState.focused,
+        });
+      }
+    }
+  };
+
+  return (
+    <A11yContext.Provider
+      value={{
+        hover: a11yState.hovered,
+        focus: a11yState.focused,
+      }}
+    >
+      <group
+        {...props}
+        onClick={e => {
+          e.stopPropagation();
+          if (disabled) {
+            return;
+          }
+          if (typeof actionCall === 'function') actionCall();
+        }}
+        onPointerOver={handleOnPointerOver}
+        onPointerOut={handleOnPointerOut}
+        // visible={!hidden}
+      >
+        {children}
+        <HtmlBind
+          style={{ width: '0px' }}
+          position={
+            // @ts-ignore
+            children.props.position ? children.props.position : 0
+          }
+          target={bindedEl}
+        ></HtmlBind>
+      </group>
+    </A11yContext.Provider>
+  );
+};
diff --git a/src/Html.tsx b/src/Html.tsx
index b4928ee..481b84e 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -70,7 +70,7 @@ export interface HtmlProps
   eps?: number;
   portal?: React.MutableRefObject<HTMLElement>;
   zIndexRange?: Array<number>;
-  tag?: 'div' | 'li';
+  tag?: 'div' | 'li' | 'legend';
   a11yElAttr?: Object;
 }
 
diff --git a/src/HtmlBind.tsx b/src/HtmlBind.tsx
new file mode 100644
index 0000000..5123d14
--- /dev/null
+++ b/src/HtmlBind.tsx
@@ -0,0 +1,116 @@
+//https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
+import * as React from 'react';
+import {
+  Vector3,
+  Group,
+  Object3D,
+  Camera,
+  PerspectiveCamera,
+  OrthographicCamera,
+} from 'three';
+import { Assign } from 'utility-types';
+import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
+
+const v1 = new Vector3();
+const v2 = new Vector3();
+const v3 = new Vector3();
+
+function calculatePosition(
+  el: Object3D,
+  camera: Camera,
+  size: { width: number; height: number }
+) {
+  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+  objectPos.project(camera);
+  const widthHalf = size.width / 2;
+  const heightHalf = size.height / 2;
+  return [
+    objectPos.x * widthHalf + widthHalf,
+    -(objectPos.y * heightHalf) + heightHalf,
+  ];
+}
+
+function isObjectBehindCamera(el: Object3D, camera: Camera) {
+  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+  const deltaCamObj = objectPos.sub(cameraPos);
+  const camDir = camera.getWorldDirection(v3);
+  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
+}
+
+function objectZIndex(
+  el: Object3D,
+  camera: Camera,
+  zIndexRange: Array<number>
+) {
+  if (
+    camera instanceof PerspectiveCamera ||
+    camera instanceof OrthographicCamera
+  ) {
+    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+    const dist = objectPos.distanceTo(cameraPos);
+    const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
+    const B = zIndexRange[1] - A * camera.far;
+    return Math.round(A * dist + B);
+  }
+  return undefined;
+}
+
+export interface HtmlProps
+  extends Omit<
+    Assign<
+      React.HTMLAttributes<HTMLDivElement>,
+      ReactThreeFiber.Object3DNode<Group, typeof Group>
+    >,
+    'ref'
+  > {
+  eps?: number;
+  target: React.MutableRefObject<HTMLElement | null>;
+  zIndexRange?: Array<number>;
+}
+
+export const HtmlBind = ({
+  eps = 0.001,
+  target,
+  zIndexRange = [16777271, 0],
+  ...props
+}: HtmlProps) => {
+  const camera = useThree(({ camera }) => camera);
+  const size = useThree(({ size }) => size);
+  const group = React.useRef<Group>(null);
+  const oldZoom = React.useRef(0);
+  const oldPosition = React.useRef([0, 0]);
+
+  useFrame(() => {
+    if (group.current) {
+      camera.updateMatrixWorld();
+      const vec = calculatePosition(group.current, camera, size);
+
+      if (
+        Math.abs(oldZoom.current - camera.zoom) > eps ||
+        Math.abs(oldPosition.current[0] - vec[0]) > eps ||
+        Math.abs(oldPosition.current[1] - vec[1]) > eps
+      ) {
+        if (target.current) {
+          target.current.style.display = !isObjectBehindCamera(
+            group.current,
+            camera
+          )
+            ? 'block'
+            : 'none';
+          target.current.style.zIndex = `${objectZIndex(
+            group.current,
+            camera,
+            zIndexRange
+          )}`;
+          target.current.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1) translate(-50%,-50%)`;
+        }
+        oldPosition.current = vec;
+        oldZoom.current = camera.zoom;
+      }
+    }
+  });
+
+  return <group {...props} ref={group} />;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 8c27451..b26a69e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
 export * from './A11y';
+export * from './A11yBind';
 export * from './A11yUserPreferences';
 export * from './A11yAnnouncer';
 export * from './A11yDebuger';

From 0983e932d178c827581d65626bc42da6cd2d7b59 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 18:38:37 +0200
Subject: [PATCH 27/40] save

---
 src/A11yBind.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index f47a743..e96def6 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -6,7 +6,7 @@ import isDeepEqual from 'fast-deep-equal/react';
 
 interface Props {
   children: React.ReactNode;
-  description: string;
+  textContent: string;
   focusCall?: (...args: any[]) => any;
   debug?: boolean;
   a11yElStyle?: Object;
@@ -33,7 +33,7 @@ export { useA11yBind };
 
 export const A11yBind: React.FC<Props> = ({
   children,
-  description,
+  textContent,
   activationMsg,
   actionCall,
   focusCall,
@@ -103,6 +103,7 @@ export const A11yBind: React.FC<Props> = ({
           styles[key]
         );
       });
+      bindedEl.current.textContent = textContent;
       bindedEl.current.onpointerover = handleOnPointerOver;
       bindedEl.current.onpointerout = handleOnPointerOut;
       bindedEl.current.onclick = e => {

From 09a0e269adbb36af4a7ca0bd98f5aee7189f3d02 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 18:44:41 +0200
Subject: [PATCH 28/40] remove deprecated components

---
 src/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index b26a69e..ed60f96 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
-export * from './A11y';
+// export * from './A11y';
 export * from './A11yBind';
 export * from './A11yUserPreferences';
 export * from './A11yAnnouncer';
 export * from './A11yDebuger';
-export { A11ySection } from './A11ySection';
-export { A11yTag } from './A11yTag';
+// export { A11ySection } from './A11ySection';
+// export { A11yTag } from './A11yTag';

From 9190bab591b0bd19dad5100a3094aa73313fd2a2 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 19:58:22 +0200
Subject: [PATCH 29/40] change text only when set

---
 example/index.html |   4 +-
 example/src/App.js | 278 +++++++++++++++++++++++----------------------
 src/A11yBind.tsx   |   2 +-
 3 files changed, 145 insertions(+), 139 deletions(-)

diff --git a/example/index.html b/example/index.html
index a88ccb0..0ad96ae 100644
--- a/example/index.html
+++ b/example/index.html
@@ -9,7 +9,9 @@
 
   <body>
     <header>
-      <img src="" alt="logo" id="mainimg" />
+      <button id="mainimg" aria-controls="mainnav" aria-expanded="false" role="menuitem" tabindex="0">
+        PICK YOUR STARTER
+      </button>
       <h1>STARTER SELECTION</h1>
       <nav>
         <ul role="menu">
diff --git a/example/src/App.js b/example/src/App.js
index e1639fa..d83ab7e 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { Canvas, useFrame, useThree } from "@react-three/fiber"
 import React, { Suspense, useCallback, useEffect, useRef, useContext, useState } from "react"
 import { ContactShadows, Text, Html } from "@react-three/drei"
-import { A11yBind, A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
+import { A11yBind, useA11yBind, A11yAnnouncer, A11yUserPreferences, useUserPreferences } from "../../"
 import { ResizeObserver } from "@juggle/resize-observer"
 import { proxy, useProxy } from "valtio"
 import { EffectComposer, SSAO, SMAA } from "@react-three/postprocessing"
@@ -17,21 +17,21 @@ const geometries = [
   new THREE.IcosahedronBufferGeometry(1.5),
 ]
 
-function ToggleButton(props) {
-  const a11y = useA11y()
-  return (
-    <mesh {...props}>
-      <torusGeometry args={[0.5, a11y.pressed ? 0.28 : 0.25, 16, 32]} />
-      <meshStandardMaterial color={a11y.focus ? "lightsalmon" : a11y.hover ? "lightpink" : "lightblue"} />
-    </mesh>
-  )
-}
+// function ToggleButton(props) {
+//   const a11y = useA11yBind()
+//   return (
+//     <mesh {...props}>
+//       <torusGeometry args={[0.5, a11y.pressed ? 0.28 : 0.25, 16, 32]} />
+//       <meshStandardMaterial color={a11y.focus ? "lightsalmon" : a11y.hover ? "lightpink" : "lightblue"} />
+//     </mesh>
+//   )
+// }
 
 function SwitchButton(props) {
-  const a11y = useA11y()
+  const a11y = useA11yBind()
   return (
     <>
-      <mesh {...props} rotation={[0, 0, a11y.pressed || props.checked ? Math.PI / 4 : -Math.PI / 4]}>
+      <mesh {...props} rotation={[0, 0, props.checked ? Math.PI / 4 : -Math.PI / 4]}>
         <boxBufferGeometry args={[0.3, 2, 0.3]} />
         <meshStandardMaterial color={a11y.focus ? "lightsalmon" : a11y.hover ? "lightpink" : "lightblue"} />
       </mesh>
@@ -43,80 +43,80 @@ function SwitchButton(props) {
   )
 }
 
-function Floor(props) {
-  return (
-    <>
-      <ContactShadows rotation-x={Math.PI / 2} position={[0, -5, 0]} opacity={0.4} width={30} height={30} blur={1} far={15} />
-      <mesh {...props} position={[0, -5.1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeBufferGeometry args={[30, 30, 1]} />
-        <meshStandardMaterial color={"#eef5f7"} />
-      </mesh>
-    </>
-  )
-}
+// function Floor(props) {
+//   return (
+//     <>
+//       <ContactShadows rotation-x={Math.PI / 2} position={[0, -5, 0]} opacity={0.4} width={30} height={30} blur={1} far={15} />
+//       <mesh {...props} position={[0, -5.1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+//         <planeBufferGeometry args={[30, 30, 1]} />
+//         <meshStandardMaterial color={"#eef5f7"} />
+//       </mesh>
+//     </>
+//   )
+// }
 
-function Nav({ left }) {
-  const snap = useProxy(state)
-  const viewport = useThree(state => state.viewport)
-  const radius = Math.min(12, viewport.width / 2.5)
-  return (
-    <A11yTag tag="li" a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}>
-      <A11y
-        role="button"
-        href="#"
-        description={`Spin ${left ? "left" : "right"} shape`}
-        a11yElAttr={state.active === 4 ? { role: "treeitem", "aria-expanded": "false" } : {}}
-        parentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
-        activationMsg="shape showing"
-        parentTag="li"
-        actionCall={() => {
-          state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1)
-          state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1
-        }}
-        disabled={snap.disabled}>
-        <Diamond position={[left ? -radius : radius, 0, 0]} rotation={[0, 0, -Math.PI / 4]} />
-      </A11y>
-    </A11yTag>
-  )
-}
+// function Nav({ left }) {
+//   const snap = useProxy(state)
+//   const viewport = useThree(state => state.viewport)
+//   const radius = Math.min(12, viewport.width / 2.5)
+//   return (
+//     <A11yTag tag="li" a11yElAttr={{ role: "treeitem", "aria-expanded": "false" }}>
+//       <A11y
+//         role="button"
+//         href="#"
+//         description={`Spin ${left ? "left" : "right"} shape`}
+//         a11yElAttr={state.active === 4 ? { role: "treeitem", "aria-expanded": "false" } : {}}
+//         parentElAttr={{ role: "treeitem", "aria-expanded": "false" }}
+//         activationMsg="shape showing"
+//         parentTag="li"
+//         actionCall={() => {
+//           state.rotation = snap.rotation + ((Math.PI * 2) / 5) * (left ? -1 : 1)
+//           state.active = left ? (snap.active === 0 ? 4 : snap.active - 1) : snap.active === 4 ? 0 : snap.active + 1
+//         }}
+//         disabled={snap.disabled}>
+//         <Diamond position={[left ? -radius : radius, 0, 0]} rotation={[0, 0, -Math.PI / 4]} />
+//       </A11y>
+//     </A11yTag>
+//   )
+// }
 
-function Diamond({ position, rotation }) {
-  const a11y = useA11y()
-  return (
-    <mesh position={position} rotation={rotation}>
-      <tetrahedronBufferGeometry />
-      <meshPhongMaterial color={a11y.focus ? "lightsalmon" : a11y.hover ? "lightpink" : "lightblue"} />
-    </mesh>
-  )
-}
+// function Diamond({ position, rotation }) {
+//   const a11y = useA11yBind()
+//   return (
+//     <mesh position={position} rotation={rotation}>
+//       <tetrahedronBufferGeometry />
+//       <meshPhongMaterial color={a11y.focus ? "lightsalmon" : a11y.hover ? "lightpink" : "lightblue"} />
+//     </mesh>
+//   )
+// }
 
-function Shape({ index, active, ...props }) {
-  const snap = useProxy(state)
-  const vec = new THREE.Vector3()
-  const ref = useRef()
-  const { a11yPrefersState } = useUserPreferences()
-  useFrame((state, delta) => {
-    if (snap.disabled) {
-      return
-    }
-    if (a11yPrefersState.prefersReducedMotion) {
-      const s = active ? 2 : 1
-      ref.current.scale.set(s, s, s)
-      ref.current.rotation.y = ref.current.rotation.x = active ? 1.5 : 4
-      ref.current.position.y = 0
-    } else {
-      const s = active ? 2 : 1
-      ref.current.scale.lerp(vec.set(s, s, s), 0.1)
-      ref.current.rotation.y = ref.current.rotation.x += delta / (active ? 1.5 : 4)
-      ref.current.position.y = active ? Math.sin(state.clock.elapsedTime) / 2 : 0
-    }
-  })
-  return (
-    <mesh rotation-y={index * 2000} ref={ref} {...props} geometry={geometries[index]}>
-      <meshPhongMaterial color={a11yPrefersState.prefersDarkScheme ? "#000000" : "#ffffff"} />
-    </mesh>
-  )
-}
+// function Shape({ index, active, ...props }) {
+//   const snap = useProxy(state)
+//   const vec = new THREE.Vector3()
+//   const ref = useRef()
+//   const { a11yPrefersState } = useUserPreferences()
+//   useFrame((state, delta) => {
+//     if (snap.disabled) {
+//       return
+//     }
+//     if (a11yPrefersState.prefersReducedMotion) {
+//       const s = active ? 2 : 1
+//       ref.current.scale.set(s, s, s)
+//       ref.current.rotation.y = ref.current.rotation.x = active ? 1.5 : 4
+//       ref.current.position.y = 0
+//     } else {
+//       const s = active ? 2 : 1
+//       ref.current.scale.lerp(vec.set(s, s, s), 0.1)
+//       ref.current.rotation.y = ref.current.rotation.x += delta / (active ? 1.5 : 4)
+//       ref.current.position.y = active ? Math.sin(state.clock.elapsedTime) / 2 : 0
+//     }
+//   })
+//   return (
+//     <mesh rotation-y={index * 2000} ref={ref} {...props} geometry={geometries[index]}>
+//       <meshPhongMaterial color={a11yPrefersState.prefersDarkScheme ? "#000000" : "#ffffff"} />
+//     </mesh>
+//   )
+// }
 
 // const ResponsiveText = () => {
 //   const { viewport } = useThree()
@@ -150,61 +150,61 @@ function Shape({ index, active, ...props }) {
 //   )
 // }
 
-function Carroussel() {
-  const viewport = useThree(state => state.viewport)
-  const snap = useProxy(state)
-  const group = useRef()
-  const radius = Math.min(6, viewport.width / 5)
-  const { a11yPrefersState } = useUserPreferences()
-  useFrame(() => {
-    if (a11yPrefersState.prefersReducedMotion) {
-      group.current.rotation.y = snap.rotation - Math.PI / 2
-    } else {
-      group.current.rotation.y = THREE.MathUtils.lerp(group.current.rotation.y, snap.rotation - Math.PI / 2, 0.1)
-    }
-  })
-  return (
-    <group ref={group}>
-      {["sphere", "pyramid", "donut", "octahedron", "icosahedron"].map((name, i) => (
-        <A11y key={name} role="content" tag="p" description={`a ${name}`} tabIndex={-1} hidden={snap.active !== i}>
-          <Shape
-            index={i}
-            position={[radius * Math.cos(i * ((Math.PI * 2) / 5)), 0, radius * Math.sin(i * ((Math.PI * 2) / 5))]}
-            active={snap.active === i}
-            color={name}
-          />
-        </A11y>
-      ))}
-    </group>
-  )
-}
+// function Carroussel() {
+//   const viewport = useThree(state => state.viewport)
+//   const snap = useProxy(state)
+//   const group = useRef()
+//   const radius = Math.min(6, viewport.width / 5)
+//   const { a11yPrefersState } = useUserPreferences()
+//   useFrame(() => {
+//     if (a11yPrefersState.prefersReducedMotion) {
+//       group.current.rotation.y = snap.rotation - Math.PI / 2
+//     } else {
+//       group.current.rotation.y = THREE.MathUtils.lerp(group.current.rotation.y, snap.rotation - Math.PI / 2, 0.1)
+//     }
+//   })
+//   return (
+//     <group ref={group}>
+//       {["sphere", "pyramid", "donut", "octahedron", "icosahedron"].map((name, i) => (
+//         <A11y key={name} role="content" tag="p" description={`a ${name}`} tabIndex={-1} hidden={snap.active !== i}>
+//           <Shape
+//             index={i}
+//             position={[radius * Math.cos(i * ((Math.PI * 2) / 5)), 0, radius * Math.sin(i * ((Math.PI * 2) / 5))]}
+//             active={snap.active === i}
+//             color={name}
+//           />
+//         </A11y>
+//       ))}
+//     </group>
+//   )
+// }
 
-const CarrousselAll = () => {
-  const snap = useProxy(state)
+// const CarrousselAll = () => {
+//   const snap = useProxy(state)
 
-  return (
-    <>
-      <A11yTag tag={"section"} a11yElAttr={{ "aria-label": "Shape carousel" }}>
-        <Nav left />
-        <Carroussel />
-        <Nav />
-        <Floor />
-        <A11y
-          role="togglebutton"
-          description="Light lowering button"
-          pressedDescription="Light lowering button, activated"
-          actionCall={() => (state.dark = !snap.dark)}
-          activationMsg="Lower light enabled"
-          deactivationMsg="Lower light disabled"
-          disabled={snap.disabled}
-          debug={true}
-          a11yElStyle={{ marginLeft: "-40px" }}>
-          <ToggleButton position={[0, -3, 9]} />
-        </A11y>
-      </A11yTag>
-    </>
-  )
-}
+//   return (
+//     <>
+//       <A11yTag tag={"section"} a11yElAttr={{ "aria-label": "Shape carousel" }}>
+//         <Nav left />
+//         <Carroussel />
+//         <Nav />
+//         <Floor />
+//         <A11y
+//           role="togglebutton"
+//           description="Light lowering button"
+//           pressedDescription="Light lowering button, activated"
+//           actionCall={() => (state.dark = !snap.dark)}
+//           activationMsg="Lower light enabled"
+//           deactivationMsg="Lower light disabled"
+//           disabled={snap.disabled}
+//           debug={true}
+//           a11yElStyle={{ marginLeft: "-40px" }}>
+//           <ToggleButton position={[0, -3, 9]} />
+//         </A11y>
+//       </A11yTag>
+//     </>
+//   )
+// }
 
 export default function App() {
   // const sectionRef = useCallback(node => {
@@ -225,7 +225,11 @@ export default function App() {
             <pointLight position={[-100, -100, -100]} intensity={1.5} color="red" />
             <ambientLight intensity={snap.disabled ? 0.2 : 0.8} />
             <group position-y={2}>
-              <A11yBind bind="mainimg">
+              <A11yBind
+                bind="mainimg"
+                actionCall={() => {
+                  console.log("okok")
+                }}>
                 <SwitchButton position={[-3, 3, 7]} />
               </A11yBind>
             </group>
diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index e96def6..ffa86e3 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -103,7 +103,7 @@ export const A11yBind: React.FC<Props> = ({
           styles[key]
         );
       });
-      bindedEl.current.textContent = textContent;
+      if (textContent) bindedEl.current.textContent = textContent;
       bindedEl.current.onpointerover = handleOnPointerOver;
       bindedEl.current.onpointerout = handleOnPointerOut;
       bindedEl.current.onclick = e => {

From cb9954667327862e96ff329ac20f5af97d66b48e Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 20:17:45 +0200
Subject: [PATCH 30/40] fix bind

---
 src/A11yBind.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index ffa86e3..b353137 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -6,6 +6,7 @@ import isDeepEqual from 'fast-deep-equal/react';
 
 interface Props {
   children: React.ReactNode;
+  bind: string;
   textContent: string;
   focusCall?: (...args: any[]) => any;
   debug?: boolean;
@@ -33,6 +34,7 @@ export { useA11yBind };
 
 export const A11yBind: React.FC<Props> = ({
   children,
+  bind,
   textContent,
   activationMsg,
   actionCall,
@@ -45,7 +47,7 @@ export const A11yBind: React.FC<Props> = ({
   showPointer = false,
   ...props
 }) => {
-  const bindedEl = useRef(document.getElementById('mainimg'));
+  const bindedEl = useRef(document.getElementById(bind));
 
   let constHiddenButScreenreadable = Object.assign(
     {},

From 4f30c7e2ec50184bdcad18211a9a53af1327e2d5 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 21:05:08 +0200
Subject: [PATCH 31/40] test

---
 src/A11yBind.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index b353137..12946e0 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -47,7 +47,7 @@ export const A11yBind: React.FC<Props> = ({
   showPointer = false,
   ...props
 }) => {
-  const bindedEl = useRef(document.getElementById(bind));
+  const bindedEl = useRef<HTMLElement | null>(null);
 
   let constHiddenButScreenreadable = Object.assign(
     {},
@@ -76,6 +76,7 @@ export const A11yBind: React.FC<Props> = ({
   // temporary fix to prevent error -> keep track of our component's mounted state
   const componentIsMounted = useRef(true);
   useEffect(() => {
+    bindedEl.current = document.getElementById(bind);
     if (bindedEl.current) {
       if (bindedEl.current.tagName === 'IMG')
         bindedEl.current.setAttribute(

From baeb896190327b6dc1341095281e6732a3417a42 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 21:21:10 +0200
Subject: [PATCH 32/40] test

---
 src/A11yBind.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index 12946e0..833a4ae 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -77,6 +77,7 @@ export const A11yBind: React.FC<Props> = ({
   const componentIsMounted = useRef(true);
   useEffect(() => {
     bindedEl.current = document.getElementById(bind);
+    console.log(bind, bindedEl.current);
     if (bindedEl.current) {
       if (bindedEl.current.tagName === 'IMG')
         bindedEl.current.setAttribute(

From 1b54a14f503e75baa98d5b11a315dfe4ae458ff7 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 22:10:15 +0200
Subject: [PATCH 33/40] useEffectdep

---
 example/src/App.js | 3 ++-
 src/A11yBind.tsx   | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index d83ab7e..3d1b28e 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -228,7 +228,8 @@ export default function App() {
               <A11yBind
                 bind="mainimg"
                 actionCall={() => {
-                  console.log("okok")
+                  console.log(checkedSize)
+                  setcheckedSize(!checkedSize)
                 }}>
                 <SwitchButton position={[-3, 3, 7]} />
               </A11yBind>
diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index 833a4ae..09e8b2a 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -77,7 +77,6 @@ export const A11yBind: React.FC<Props> = ({
   const componentIsMounted = useRef(true);
   useEffect(() => {
     bindedEl.current = document.getElementById(bind);
-    console.log(bind, bindedEl.current);
     if (bindedEl.current) {
       if (bindedEl.current.tagName === 'IMG')
         bindedEl.current.setAttribute(
@@ -141,7 +140,7 @@ export const A11yBind: React.FC<Props> = ({
       documentElement.style.cursor = 'default';
       componentIsMounted.current = false;
     };
-  }, []);
+  }, [actionCall, focusCall, bind, a11yElAttrRef.current]);
 
   React.Children.only(children);
   // @ts-ignore

From dccafe2ec9a0384264f7e0ed299e7528cefb79f0 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Sun, 25 Jul 2021 23:07:44 +0200
Subject: [PATCH 34/40] useEffectdep

---
 src/A11yBind.tsx | 94 +++++++++++++++++++++++++-----------------------
 1 file changed, 50 insertions(+), 44 deletions(-)

diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index 09e8b2a..4bd5c17 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -73,10 +73,57 @@ export const A11yBind: React.FC<Props> = ({
 
   const documentElement = document.documentElement;
 
-  // temporary fix to prevent error -> keep track of our component's mounted state
   const componentIsMounted = useRef(true);
   useEffect(() => {
     bindedEl.current = document.getElementById(bind);
+    editEl();
+    return () => {
+      bindedEl.current = null;
+      documentElement.style.cursor = 'default';
+      componentIsMounted.current = false;
+    };
+  }, [bind]);
+
+  // @ts-ignore
+  const handleOnPointerOver = e => {
+    if (e.eventObject) {
+      overMesh.current = true;
+    } else {
+      overHtml.current = true;
+    }
+    if (overHtml.current || overMesh.current) {
+      if (
+        bindedEl.current?.tagName === 'A' ||
+        bindedEl.current?.tagName === 'BUTTON' ||
+        showPointer
+      ) {
+        documentElement.style.cursor = 'pointer';
+      }
+      setA11yState({
+        hovered: true,
+        focused: a11yState.focused,
+      });
+    }
+  };
+  // @ts-ignore
+  const handleOnPointerOut = e => {
+    if (e.eventObject) {
+      overMesh.current = false;
+    } else {
+      overHtml.current = false;
+    }
+    if (!overHtml.current && !overMesh.current) {
+      if (componentIsMounted.current) {
+        documentElement.style.cursor = 'default';
+        setA11yState({
+          hovered: false,
+          focused: a11yState.focused,
+        });
+      }
+    }
+  };
+
+  const editEl = () => {
     if (bindedEl.current) {
       if (bindedEl.current.tagName === 'IMG')
         bindedEl.current.setAttribute(
@@ -135,52 +182,11 @@ export const A11yBind: React.FC<Props> = ({
         });
       };
     }
+  };
 
-    return () => {
-      documentElement.style.cursor = 'default';
-      componentIsMounted.current = false;
-    };
-  }, [actionCall, focusCall, bind, a11yElAttrRef.current]);
+  editEl();
 
   React.Children.only(children);
-  // @ts-ignore
-  const handleOnPointerOver = e => {
-    if (e.eventObject) {
-      overMesh.current = true;
-    } else {
-      overHtml.current = true;
-    }
-    if (overHtml.current || overMesh.current) {
-      if (
-        bindedEl.current?.tagName === 'A' ||
-        bindedEl.current?.tagName === 'BUTTON' ||
-        showPointer
-      ) {
-        documentElement.style.cursor = 'pointer';
-      }
-      setA11yState({
-        hovered: true,
-        focused: a11yState.focused,
-      });
-    }
-  };
-  // @ts-ignore
-  const handleOnPointerOut = e => {
-    if (e.eventObject) {
-      overMesh.current = false;
-    } else {
-      overHtml.current = false;
-    }
-    if (!overHtml.current && !overMesh.current) {
-      if (componentIsMounted.current) {
-        documentElement.style.cursor = 'default';
-        setA11yState({
-          hovered: false,
-          focused: a11yState.focused,
-        });
-      }
-    }
-  };
 
   return (
     <A11yContext.Provider

From a52f413813d7761162c1db8176f78755ce3f8034 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Tue, 27 Jul 2021 14:05:05 +0200
Subject: [PATCH 35/40] fix overlaying html position

---
 example/src/App.js    | 11 +++++++++++
 example/src/index.js  |  8 +++++++-
 example/src/index.tsx | 17 ++++++++++-------
 src/A11yBind.tsx      |  2 +-
 src/A11yConsts.tsx    |  1 -
 src/HtmlBind.tsx      |  1 +
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 3d1b28e..9703fdc 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -216,8 +216,18 @@ export default function App() {
 
   return (
     <>
+      <h2 id="h2test">test</h2>
       <main className={snap.dark ? "dark" : "bright"}>
         <Canvas resize={{ polyfill: ResizeObserver }} camera={{ position: [0, 0, 15], near: 4, far: 30 }} pixelRatio={[1, 1.5]}>
+          <A11yBind bind="h1id">
+            <SwitchButton position={[-3, 0, 7]} />
+          </A11yBind>
+          <A11yBind bind="h2test">
+            <SwitchButton position={[-3, -3, 7]} />
+          </A11yBind>
+          <A11yBind bind="h3test">
+            <SwitchButton position={[0, 0, 7]} />
+          </A11yBind>
           <A11yUserPreferences debug={true}>
             {/* <A11yDebuger /> */}
             {/* <ResponsiveText /> */}
@@ -239,6 +249,7 @@ export default function App() {
         <Badge />
         <A11yAnnouncer />
       </main>
+      <h3 id="h3test">test</h3>
     </>
   )
 }
diff --git a/example/src/index.js b/example/src/index.js
index 0c418c0..59700a8 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -4,4 +4,10 @@ import "./styles.css"
 import App from "./App"
 
 const rootElement = document.getElementById("root")
-ReactDOM.render(<App />, rootElement)
+ReactDOM.render(
+  <>
+    <h1 id="h1id">test h1 render</h1>
+    <App />
+  </>,
+  rootElement,
+)
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 16b01be..0de53af 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import ReactDOM from "react-dom"
 import React, { useRef, useState } from "react"
 import { Canvas, useFrame } from "@react-three/fiber"
-import { A11y, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
+import { A11yBind, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
 
 /* just to test tsx autocomplete etc */
 function Box(props: JSX.IntrinsicElements["mesh"]) {
@@ -27,11 +27,14 @@ function Box(props: JSX.IntrinsicElements["mesh"]) {
 }
 
 ReactDOM.render(
-  <Canvas>
-    <ambientLight />
-    <pointLight position={[10, 10, 10]} />
-    <Box position={[-1.2, 0, 0]} />
-    <Box position={[1.2, 0, 0]} />
-  </Canvas>,
+  <>
+    <h1 id="h1id">test h1 render</h1>
+    <Canvas>
+      <ambientLight />
+      <pointLight position={[10, 10, 10]} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+    </Canvas>
+  </>,
   document.getElementById("root"),
 )
diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
index 4bd5c17..f6ee250 100644
--- a/src/A11yBind.tsx
+++ b/src/A11yBind.tsx
@@ -52,7 +52,7 @@ export const A11yBind: React.FC<Props> = ({
   let constHiddenButScreenreadable = Object.assign(
     {},
     stylesHiddenButScreenreadable,
-    { opacity: debug ? 1 : 0 },
+    { opacity: debug ? 1 : 0, position: 'fixed', top: 0, left: 0 },
     a11yElStyle
   );
 
diff --git a/src/A11yConsts.tsx b/src/A11yConsts.tsx
index d0d3dda..52c399e 100644
--- a/src/A11yConsts.tsx
+++ b/src/A11yConsts.tsx
@@ -4,7 +4,6 @@ let stylesHiddenButScreenreadable = {
   width: '50px',
   height: '50px',
   overflow: 'hidden',
-  transform: 'translateX(-50%) translateY(-50%)',
   display: 'inline-block',
   userSelect: 'none' as const,
   WebkitUserSelect: 'none' as const,
diff --git a/src/HtmlBind.tsx b/src/HtmlBind.tsx
index 5123d14..ad44137 100644
--- a/src/HtmlBind.tsx
+++ b/src/HtmlBind.tsx
@@ -104,6 +104,7 @@ export const HtmlBind = ({
             camera,
             zIndexRange
           )}`;
+          console.log(vec[0], vec[1]);
           target.current.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1) translate(-50%,-50%)`;
         }
         oldPosition.current = vec;

From 648fe89da3b37e1c0185c79c09da12eb0ac337a6 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Tue, 27 Jul 2021 15:10:17 +0200
Subject: [PATCH 36/40] cleaning and remove auto display none

---
 example/src/App.js    |  24 +-
 example/src/index.tsx |   2 +-
 src/A11y.tsx          | 509 +++++++-----------------------------------
 src/A11yBind.tsx      | 223 ------------------
 src/A11ySection.tsx   |  94 --------
 src/A11yTag.tsx       | 103 ---------
 src/Html.tsx          |  83 +------
 src/HtmlBind.tsx      | 117 ----------
 src/index.tsx         |   6 +-
 9 files changed, 105 insertions(+), 1056 deletions(-)
 delete mode 100644 src/A11yBind.tsx
 delete mode 100644 src/A11ySection.tsx
 delete mode 100644 src/A11yTag.tsx
 delete mode 100644 src/HtmlBind.tsx

diff --git a/example/src/App.js b/example/src/App.js
index 9703fdc..e029473 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { Canvas, useFrame, useThree } from "@react-three/fiber"
 import React, { Suspense, useCallback, useEffect, useRef, useContext, useState } from "react"
 import { ContactShadows, Text, Html } from "@react-three/drei"
-import { A11yBind, useA11yBind, A11yAnnouncer, A11yUserPreferences, useUserPreferences } from "../../"
+import { A11y, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences } from "../../"
 import { ResizeObserver } from "@juggle/resize-observer"
 import { proxy, useProxy } from "valtio"
 import { EffectComposer, SSAO, SMAA } from "@react-three/postprocessing"
@@ -18,7 +18,7 @@ const geometries = [
 ]
 
 // function ToggleButton(props) {
-//   const a11y = useA11yBind()
+//   const a11y = useA11y()
 //   return (
 //     <mesh {...props}>
 //       <torusGeometry args={[0.5, a11y.pressed ? 0.28 : 0.25, 16, 32]} />
@@ -28,7 +28,7 @@ const geometries = [
 // }
 
 function SwitchButton(props) {
-  const a11y = useA11yBind()
+  const a11y = useA11y()
   return (
     <>
       <mesh {...props} rotation={[0, 0, props.checked ? Math.PI / 4 : -Math.PI / 4]}>
@@ -81,7 +81,7 @@ function SwitchButton(props) {
 // }
 
 // function Diamond({ position, rotation }) {
-//   const a11y = useA11yBind()
+//   const a11y = useA11y()
 //   return (
 //     <mesh position={position} rotation={rotation}>
 //       <tetrahedronBufferGeometry />
@@ -219,15 +219,15 @@ export default function App() {
       <h2 id="h2test">test</h2>
       <main className={snap.dark ? "dark" : "bright"}>
         <Canvas resize={{ polyfill: ResizeObserver }} camera={{ position: [0, 0, 15], near: 4, far: 30 }} pixelRatio={[1, 1.5]}>
-          <A11yBind bind="h1id">
+          <A11y bind="h1id">
             <SwitchButton position={[-3, 0, 7]} />
-          </A11yBind>
-          <A11yBind bind="h2test">
+          </A11y>
+          <A11y bind="h2test">
             <SwitchButton position={[-3, -3, 7]} />
-          </A11yBind>
-          <A11yBind bind="h3test">
+          </A11y>
+          <A11y bind="h3test">
             <SwitchButton position={[0, 0, 7]} />
-          </A11yBind>
+          </A11y>
           <A11yUserPreferences debug={true}>
             {/* <A11yDebuger /> */}
             {/* <ResponsiveText /> */}
@@ -235,14 +235,14 @@ export default function App() {
             <pointLight position={[-100, -100, -100]} intensity={1.5} color="red" />
             <ambientLight intensity={snap.disabled ? 0.2 : 0.8} />
             <group position-y={2}>
-              <A11yBind
+              <A11y
                 bind="mainimg"
                 actionCall={() => {
                   console.log(checkedSize)
                   setcheckedSize(!checkedSize)
                 }}>
                 <SwitchButton position={[-3, 3, 7]} />
-              </A11yBind>
+              </A11y>
             </group>
           </A11yUserPreferences>
         </Canvas>
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 0de53af..38e9003 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three"
 import ReactDOM from "react-dom"
 import React, { useRef, useState } from "react"
 import { Canvas, useFrame } from "@react-three/fiber"
-import { A11yBind, A11yTag, useA11y, A11yAnnouncer, A11yUserPreferences, useUserPreferences, A11ySection, A11yDebuger } from "../../"
+import { A11y } from "../../"
 
 /* just to test tsx autocomplete etc */
 function Box(props: JSX.IntrinsicElements["mesh"]) {
diff --git a/src/A11y.tsx b/src/A11y.tsx
index 7662849..f2c9a4e 100644
--- a/src/A11y.tsx
+++ b/src/A11y.tsx
@@ -1,93 +1,27 @@
 import React, { useEffect, useRef, useState, useContext } from 'react';
 import useAnnounceStore from './announceStore';
-import { useA11yTagContext } from './A11yTag';
 import { stylesHiddenButScreenreadable } from './A11yConsts';
 import { Html } from './Html';
 import isDeepEqual from 'fast-deep-equal/react';
 
-interface A11yCommonProps {
-  role: 'button' | 'togglebutton' | 'link' | 'content' | 'image' | 'input';
+interface Props {
   children: React.ReactNode;
-  description: string;
-  tabIndex?: number;
-  showAltText?: boolean;
+  bind: string;
+  textContent: string;
   focusCall?: (...args: any[]) => any;
   debug?: boolean;
   a11yElStyle?: Object;
   a11yElAttr?: Object;
-  parentElAttr?: Object;
   hidden?: boolean;
-  parentTag?: 'li' | 'div' | 'legend';
+  activationMsg?: string;
+  actionCall?: () => any;
+  disabled?: boolean;
+  showPointer?: boolean;
 }
 
-type RoleProps =
-  | {
-      role: 'content';
-      activationMsg?: never;
-      deactivationMsg?: never;
-      actionCall?: never;
-      href?: never;
-      disabled?: never;
-      startPressed?: never;
-      tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend';
-    }
-  | {
-      role: 'button';
-      activationMsg?: string;
-      deactivationMsg?: never;
-      actionCall?: () => any;
-      href?: never;
-      disabled?: boolean;
-      startPressed?: never;
-      tag?: never;
-    }
-  | {
-      role: 'togglebutton';
-      activationMsg?: string;
-      deactivationMsg?: string;
-      actionCall?: () => any;
-      href?: never;
-      disabled?: boolean;
-      startPressed?: boolean;
-      tag?: never;
-    }
-  | {
-      role: 'link';
-      activationMsg?: never;
-      deactivationMsg?: never;
-      actionCall: () => any;
-      href: string;
-      disabled?: never;
-      startPressed?: never;
-      tag?: never;
-    }
-  | {
-      role: 'image';
-      activationMsg?: never;
-      deactivationMsg?: never;
-      actionCall?: never;
-      href?: never;
-      disabled?: never;
-      startPressed?: never;
-      tag?: never;
-    }
-  | {
-      role: 'input';
-      activationMsg?: string;
-      deactivationMsg?: string;
-      actionCall?: () => any;
-      href?: never;
-      disabled?: boolean;
-      startPressed?: never;
-      tag?: never;
-    };
-
-type Props = A11yCommonProps & RoleProps;
-
 const A11yContext = React.createContext({
   focus: false,
   hover: false,
-  pressed: false,
 });
 
 A11yContext.displayName = 'A11yContext';
@@ -100,30 +34,25 @@ export { useA11y };
 
 export const A11y: React.FC<Props> = ({
   children,
-  description,
+  bind,
+  textContent,
   activationMsg,
-  deactivationMsg,
-  tabIndex,
-  href,
-  role,
-  showAltText = false,
   actionCall,
   focusCall,
   disabled,
   debug = false,
   a11yElStyle,
   a11yElAttr,
-  parentElAttr,
-  startPressed = false,
-  tag = 'p',
   hidden = false,
-  parentTag,
+  showPointer = false,
   ...props
 }) => {
+  const bindedEl = useRef<HTMLElement | null>(null);
+
   let constHiddenButScreenreadable = Object.assign(
     {},
     stylesHiddenButScreenreadable,
-    { opacity: debug ? 1 : 0 },
+    { opacity: debug ? 1 : 0, position: 'fixed', top: 0, left: 0 },
     a11yElStyle
   );
 
@@ -131,15 +60,10 @@ export const A11y: React.FC<Props> = ({
   if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
     a11yElAttrRef.current = a11yElAttr;
   }
-  const parentElAttrRef = useRef(parentElAttr);
-  if (!isDeepEqual(parentElAttrRef.current, parentElAttr)) {
-    parentElAttrRef.current = parentElAttr;
-  }
 
   const [a11yState, setA11yState] = useState({
     hovered: false,
     focused: false,
-    pressed: startPressed ? startPressed : false,
   });
 
   const a11yScreenReader = useAnnounceStore(state => state.a11yScreenReader);
@@ -149,16 +73,17 @@ export const A11y: React.FC<Props> = ({
 
   const documentElement = document.documentElement;
 
-  // temporary fix to prevent error -> keep track of our component's mounted state
   const componentIsMounted = useRef(true);
   useEffect(() => {
+    bindedEl.current = document.getElementById(bind);
+    editEl();
     return () => {
+      bindedEl.current = null;
       documentElement.style.cursor = 'default';
       componentIsMounted.current = false;
     };
-  }, []); // Using an empty dependency array ensures this on
+  }, [bind]);
 
-  React.Children.only(children);
   // @ts-ignore
   const handleOnPointerOver = e => {
     if (e.eventObject) {
@@ -167,13 +92,16 @@ export const A11y: React.FC<Props> = ({
       overHtml.current = true;
     }
     if (overHtml.current || overMesh.current) {
-      if (role !== 'content' && role !== 'image' && !disabled) {
+      if (
+        bindedEl.current?.tagName === 'A' ||
+        bindedEl.current?.tagName === 'BUTTON' ||
+        showPointer
+      ) {
         documentElement.style.cursor = 'pointer';
       }
       setA11yState({
         hovered: true,
         focused: a11yState.focused,
-        pressed: a11yState.pressed,
       });
     }
   };
@@ -190,345 +118,81 @@ export const A11y: React.FC<Props> = ({
         setA11yState({
           hovered: false,
           focused: a11yState.focused,
-          pressed: a11yState.pressed,
         });
       }
     }
   };
 
-  function handleBtnClick() {
-    //msg is the same need to be clean for it to trigger again in case of multiple press in a row
-    a11yScreenReader('');
-    window.setTimeout(() => {
-      if (typeof activationMsg === 'string') a11yScreenReader(activationMsg);
-    }, 100);
-    if (typeof actionCall === 'function') actionCall();
-  }
-
-  function handleToggleBtnClick() {
-    if (a11yState.pressed) {
-      if (typeof deactivationMsg === 'string')
-        a11yScreenReader(deactivationMsg);
-    } else {
-      if (typeof activationMsg === 'string') a11yScreenReader(activationMsg);
-    }
-    setA11yState({
-      hovered: a11yState.hovered,
-      focused: a11yState.focused,
-      pressed: !a11yState.pressed,
-    });
-    if (typeof actionCall === 'function') actionCall();
-  }
-
-  const returnHtmlA11yEl = () => {
-    if (role === 'button' || role === 'togglebutton') {
-      let disabledBtnAttr = disabled
-        ? {
-            disabled: true,
-          }
-        : null;
-      if (role === 'togglebutton') {
-        return (
-          <button
-            data-r3f-a11y="true"
-            {...disabledBtnAttr}
-            {...a11yElAttr}
-            aria-pressed={a11yState.pressed ? 'true' : 'false'}
-            tabIndex={tabIndex ? tabIndex : 0}
-            style={Object.assign(
-              constHiddenButScreenreadable,
-              disabled ? { cursor: 'default' } : { cursor: 'pointer' },
-              hidden
-                ? { visibility: 'hidden' as const }
-                : { visibility: 'visible' as const }
-            )}
-            onPointerOver={handleOnPointerOver}
-            onPointerOut={handleOnPointerOut}
-            onClick={e => {
-              e.stopPropagation();
-              if (disabled) {
-                return;
-              }
-              handleToggleBtnClick();
-            }}
-            onFocus={() => {
-              if (typeof focusCall === 'function') focusCall();
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: true,
-                pressed: a11yState.pressed,
-              });
-            }}
-            onBlur={() => {
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: false,
-                pressed: a11yState.pressed,
-              });
-            }}
-          >
-            {description}
-          </button>
-        );
-      } else {
-        //regular btn
-        return (
-          <button
-            data-r3f-a11y="true"
-            {...disabledBtnAttr}
-            {...a11yElAttr}
-            tabIndex={tabIndex ? tabIndex : 0}
-            style={Object.assign(
-              constHiddenButScreenreadable,
-              disabled ? { cursor: 'default' } : { cursor: 'pointer' },
-              hidden
-                ? { visibility: 'hidden' as const }
-                : { visibility: 'visible' as const }
-            )}
-            onPointerOver={handleOnPointerOver}
-            onPointerOut={handleOnPointerOut}
-            onClick={e => {
-              e.stopPropagation();
-              if (disabled) {
-                return;
-              }
-              handleBtnClick();
-            }}
-            onFocus={() => {
-              if (typeof focusCall === 'function') focusCall();
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: true,
-                pressed: a11yState.pressed,
-              });
-            }}
-            onBlur={() => {
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: false,
-                pressed: a11yState.pressed,
-              });
-            }}
-          >
-            {description}
-          </button>
+  const editEl = () => {
+    if (bindedEl.current) {
+      if (bindedEl.current.tagName === 'IMG')
+        bindedEl.current.setAttribute(
+          'src',
+          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
         );
+      bindedEl.current.setAttribute('data-r3f-a11y', 'true');
+      if (a11yElAttr) {
+        for (const property in a11yElAttr) {
+          bindedEl.current.setAttribute(
+            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+            //@ts-ignore
+            a11yElAttr[property]
+          );
+        }
       }
-    } else if (role === 'link') {
-      return (
-        <a
-          data-r3f-a11y="true"
-          {...a11yElAttr}
-          style={Object.assign(
-            constHiddenButScreenreadable,
-            hidden
-              ? { visibility: 'hidden' as const }
-              : { visibility: 'visible' as const }
-          )}
-          href={href}
-          onPointerOver={handleOnPointerOver}
-          onPointerOut={handleOnPointerOut}
-          onClick={e => {
-            e.stopPropagation();
-            e.preventDefault();
-            if (typeof actionCall === 'function') actionCall();
-          }}
-          onFocus={() => {
-            if (typeof focusCall === 'function') focusCall();
-            setA11yState({
-              hovered: a11yState.hovered,
-              focused: true,
-              pressed: a11yState.pressed,
-            });
-          }}
-          onBlur={() => {
-            setA11yState({
-              hovered: a11yState.hovered,
-              focused: false,
-              pressed: a11yState.pressed,
-            });
-          }}
-        >
-          {description}
-        </a>
+      const styles = Object.assign(
+        constHiddenButScreenreadable,
+        hidden
+          ? { visibility: 'hidden' as const }
+          : { visibility: 'visible' as const }
       );
-    } else {
-      let tabIndexP = tabIndex
-        ? {
-            tabIndex: tabIndex,
-          }
-        : null;
-      if (role === 'image') {
-        return (
-          <img
-            data-r3f-a11y="true"
-            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
-            alt={description}
-            {...tabIndexP}
-            {...a11yElAttr}
-            style={Object.assign(
-              constHiddenButScreenreadable,
-              hidden
-                ? { visibility: 'hidden' as const }
-                : { visibility: 'visible' as const }
-            )}
-            onPointerOver={handleOnPointerOver}
-            onPointerOut={handleOnPointerOut}
-            onBlur={() => {
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: false,
-                pressed: a11yState.pressed,
-              });
-            }}
-            onFocus={() => {
-              if (typeof focusCall === 'function') focusCall();
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: true,
-                pressed: a11yState.pressed,
-              });
-            }}
-          />
-        );
-      } else if (role === 'input') {
-        return (
-          <label
-            style={Object.assign(
-              constHiddenButScreenreadable,
-              hidden
-                ? { visibility: 'hidden' as const }
-                : { visibility: 'visible' as const },
-              { display: 'block' }
-            )}
-            onPointerOver={handleOnPointerOver}
-            onPointerOut={handleOnPointerOut}
-          >
-            {description}
-            <input
-              data-r3f-a11y="true"
-              tabIndex={tabIndex ? tabIndex : 0}
-              {...a11yElAttr}
-              onChange={() => {}}
-              onClick={e => {
-                e.stopPropagation();
-                if (disabled) {
-                  return;
-                }
-                handleBtnClick();
-              }}
-              onBlur={() => {
-                setA11yState({
-                  hovered: a11yState.hovered,
-                  focused: false,
-                  pressed: a11yState.pressed,
-                });
-              }}
-              onFocus={() => {
-                if (typeof focusCall === 'function') focusCall();
-                setA11yState({
-                  hovered: a11yState.hovered,
-                  focused: true,
-                  pressed: a11yState.pressed,
-                });
-              }}
-            />
-          </label>
-        );
-      } else {
-        const Tag = tag;
-        return (
-          <Tag
-            data-r3f-a11y="true"
-            {...tabIndexP}
-            {...a11yElAttr}
-            style={Object.assign(
-              constHiddenButScreenreadable,
-              hidden
-                ? { visibility: 'hidden' as const }
-                : { visibility: 'visible' as const }
-            )}
-            onPointerOver={handleOnPointerOver}
-            onPointerOut={handleOnPointerOut}
-            onBlur={() => {
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: false,
-                pressed: a11yState.pressed,
-              });
-            }}
-            onFocus={() => {
-              if (typeof focusCall === 'function') focusCall();
-              setA11yState({
-                hovered: a11yState.hovered,
-                focused: true,
-                pressed: a11yState.pressed,
-              });
-            }}
-          >
-            {description}
-          </Tag>
+      Object.keys(styles).forEach((key: string) => {
+        bindedEl.current?.style.setProperty(
+          key.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
+          //@ts-ignore
+          styles[key]
         );
-      }
+      });
+      if (textContent) bindedEl.current.textContent = textContent;
+      bindedEl.current.onpointerover = handleOnPointerOver;
+      bindedEl.current.onpointerout = handleOnPointerOut;
+      bindedEl.current.onclick = e => {
+        e.stopPropagation();
+        if (disabled) {
+          return;
+        }
+        if (typeof actionCall === 'function') actionCall();
+        a11yScreenReader('');
+        window.setTimeout(() => {
+          if (typeof activationMsg === 'string')
+            a11yScreenReader(activationMsg);
+        }, 100);
+      };
+      bindedEl.current.onfocus = () => {
+        if (typeof focusCall === 'function') focusCall();
+        setA11yState({
+          hovered: a11yState.hovered,
+          focused: true,
+        });
+      };
+      bindedEl.current.onblur = () => {
+        setA11yState({
+          hovered: a11yState.hovered,
+          focused: false,
+        });
+      };
     }
   };
 
-  const HtmlAccessibleElement = React.useMemo(returnHtmlA11yEl, [
-    description,
-    a11yState,
-    hidden,
-    tabIndex,
-    href,
-    disabled,
-    startPressed,
-    tag,
-    actionCall,
-    focusCall,
-    a11yElAttrRef.current,
-  ]);
+  editEl();
 
-  let AltText: JSX.Element = <></>;
-  if (showAltText && a11yState.hovered) {
-    AltText = (
-      <div
-        aria-hidden={true}
-        style={{
-          width: 'auto',
-          maxWidth: '300px',
-          display: 'block',
-          position: 'absolute',
-          top: '0px',
-          left: '0px',
-          transform: 'translate(-50%,-50%)',
-          background: 'white',
-          borderRadius: '4px',
-          padding: '4px',
-        }}
-      >
-        <p
-          aria-hidden={true}
-          style={{
-            margin: '0px',
-          }}
-        >
-          {description}
-        </p>
-      </div>
-    );
-  }
-
-  const section = useA11yTagContext();
-  let portal = {};
-  if (section.current instanceof HTMLElement) {
-    portal = { portal: section };
-  }
+  React.Children.only(children);
 
   return (
     <A11yContext.Provider
       value={{
         hover: a11yState.hovered,
         focus: a11yState.focused,
-        pressed: a11yState.pressed,
       }}
     >
       <group
@@ -538,13 +202,7 @@ export const A11y: React.FC<Props> = ({
           if (disabled) {
             return;
           }
-          if (role === 'button' || role === 'input') {
-            handleBtnClick();
-          } else if (role === 'togglebutton') {
-            handleToggleBtnClick();
-          } else {
-            if (typeof actionCall === 'function') actionCall();
-          }
+          if (typeof actionCall === 'function') actionCall();
         }}
         onPointerOver={handleOnPointerOver}
         onPointerOut={handleOnPointerOut}
@@ -557,13 +215,8 @@ export const A11y: React.FC<Props> = ({
             // @ts-ignore
             children.props.position ? children.props.position : 0
           }
-          tag={parentTag}
-          {...portal}
-          a11yElAttr={parentElAttr}
-        >
-          {AltText}
-          {HtmlAccessibleElement}
-        </Html>
+          target={bindedEl}
+        ></Html>
       </group>
     </A11yContext.Provider>
   );
diff --git a/src/A11yBind.tsx b/src/A11yBind.tsx
deleted file mode 100644
index f6ee250..0000000
--- a/src/A11yBind.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import useAnnounceStore from './announceStore';
-import { stylesHiddenButScreenreadable } from './A11yConsts';
-import { HtmlBind } from './HtmlBind';
-import isDeepEqual from 'fast-deep-equal/react';
-
-interface Props {
-  children: React.ReactNode;
-  bind: string;
-  textContent: string;
-  focusCall?: (...args: any[]) => any;
-  debug?: boolean;
-  a11yElStyle?: Object;
-  a11yElAttr?: Object;
-  hidden?: boolean;
-  activationMsg?: string;
-  actionCall?: () => any;
-  disabled?: boolean;
-  showPointer?: boolean;
-}
-
-const A11yContext = React.createContext({
-  focus: false,
-  hover: false,
-});
-
-A11yContext.displayName = 'A11yContext';
-
-const useA11yBind = () => {
-  return useContext(A11yContext);
-};
-
-export { useA11yBind };
-
-export const A11yBind: React.FC<Props> = ({
-  children,
-  bind,
-  textContent,
-  activationMsg,
-  actionCall,
-  focusCall,
-  disabled,
-  debug = false,
-  a11yElStyle,
-  a11yElAttr,
-  hidden = false,
-  showPointer = false,
-  ...props
-}) => {
-  const bindedEl = useRef<HTMLElement | null>(null);
-
-  let constHiddenButScreenreadable = Object.assign(
-    {},
-    stylesHiddenButScreenreadable,
-    { opacity: debug ? 1 : 0, position: 'fixed', top: 0, left: 0 },
-    a11yElStyle
-  );
-
-  const a11yElAttrRef = useRef(a11yElAttr);
-  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
-    a11yElAttrRef.current = a11yElAttr;
-  }
-
-  const [a11yState, setA11yState] = useState({
-    hovered: false,
-    focused: false,
-  });
-
-  const a11yScreenReader = useAnnounceStore(state => state.a11yScreenReader);
-
-  const overHtml = useRef(false);
-  const overMesh = useRef(false);
-
-  const documentElement = document.documentElement;
-
-  const componentIsMounted = useRef(true);
-  useEffect(() => {
-    bindedEl.current = document.getElementById(bind);
-    editEl();
-    return () => {
-      bindedEl.current = null;
-      documentElement.style.cursor = 'default';
-      componentIsMounted.current = false;
-    };
-  }, [bind]);
-
-  // @ts-ignore
-  const handleOnPointerOver = e => {
-    if (e.eventObject) {
-      overMesh.current = true;
-    } else {
-      overHtml.current = true;
-    }
-    if (overHtml.current || overMesh.current) {
-      if (
-        bindedEl.current?.tagName === 'A' ||
-        bindedEl.current?.tagName === 'BUTTON' ||
-        showPointer
-      ) {
-        documentElement.style.cursor = 'pointer';
-      }
-      setA11yState({
-        hovered: true,
-        focused: a11yState.focused,
-      });
-    }
-  };
-  // @ts-ignore
-  const handleOnPointerOut = e => {
-    if (e.eventObject) {
-      overMesh.current = false;
-    } else {
-      overHtml.current = false;
-    }
-    if (!overHtml.current && !overMesh.current) {
-      if (componentIsMounted.current) {
-        documentElement.style.cursor = 'default';
-        setA11yState({
-          hovered: false,
-          focused: a11yState.focused,
-        });
-      }
-    }
-  };
-
-  const editEl = () => {
-    if (bindedEl.current) {
-      if (bindedEl.current.tagName === 'IMG')
-        bindedEl.current.setAttribute(
-          'src',
-          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"
-        );
-      bindedEl.current.setAttribute('data-r3f-a11y', 'true');
-      if (a11yElAttr) {
-        for (const property in a11yElAttr) {
-          bindedEl.current.setAttribute(
-            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
-            //@ts-ignore
-            a11yElAttr[property]
-          );
-        }
-      }
-      const styles = Object.assign(
-        constHiddenButScreenreadable,
-        hidden
-          ? { visibility: 'hidden' as const }
-          : { visibility: 'visible' as const }
-      );
-      Object.keys(styles).forEach((key: string) => {
-        bindedEl.current?.style.setProperty(
-          key.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
-          //@ts-ignore
-          styles[key]
-        );
-      });
-      if (textContent) bindedEl.current.textContent = textContent;
-      bindedEl.current.onpointerover = handleOnPointerOver;
-      bindedEl.current.onpointerout = handleOnPointerOut;
-      bindedEl.current.onclick = e => {
-        e.stopPropagation();
-        if (disabled) {
-          return;
-        }
-        if (typeof actionCall === 'function') actionCall();
-        a11yScreenReader('');
-        window.setTimeout(() => {
-          if (typeof activationMsg === 'string')
-            a11yScreenReader(activationMsg);
-        }, 100);
-      };
-      bindedEl.current.onfocus = () => {
-        if (typeof focusCall === 'function') focusCall();
-        setA11yState({
-          hovered: a11yState.hovered,
-          focused: true,
-        });
-      };
-      bindedEl.current.onblur = () => {
-        setA11yState({
-          hovered: a11yState.hovered,
-          focused: false,
-        });
-      };
-    }
-  };
-
-  editEl();
-
-  React.Children.only(children);
-
-  return (
-    <A11yContext.Provider
-      value={{
-        hover: a11yState.hovered,
-        focus: a11yState.focused,
-      }}
-    >
-      <group
-        {...props}
-        onClick={e => {
-          e.stopPropagation();
-          if (disabled) {
-            return;
-          }
-          if (typeof actionCall === 'function') actionCall();
-        }}
-        onPointerOver={handleOnPointerOver}
-        onPointerOut={handleOnPointerOut}
-        // visible={!hidden}
-      >
-        {children}
-        <HtmlBind
-          style={{ width: '0px' }}
-          position={
-            // @ts-ignore
-            children.props.position ? children.props.position : 0
-          }
-          target={bindedEl}
-        ></HtmlBind>
-      </group>
-    </A11yContext.Provider>
-  );
-};
diff --git a/src/A11ySection.tsx b/src/A11ySection.tsx
deleted file mode 100644
index 018c63c..0000000
--- a/src/A11ySection.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, {
-  useContext,
-  useEffect,
-  useRef,
-  MutableRefObject,
-  createRef,
-} from 'react';
-import { useThree } from '@react-three/fiber';
-import { stylesHiddenButScreenreadable } from './A11yConsts';
-
-interface Props {
-  children: React.ReactNode;
-  label: string;
-  description: string;
-}
-
-const A11ySectionContext = React.createContext<
-  MutableRefObject<HTMLElement | null>
->(createRef());
-
-A11ySectionContext.displayName = 'A11ySectionContext';
-
-const useA11ySectionContext = () => {
-  return useContext(A11ySectionContext);
-};
-
-export { useA11ySectionContext };
-
-export const A11ySection: React.FC<Props> = ({
-  children,
-  label,
-  description,
-}) => {
-  const ref = useRef<HTMLElement | null>(null);
-  const refpDesc = useRef<HTMLParagraphElement | null>(null);
-  const gl = useThree(state => state.gl);
-  const [el] = React.useState(() => document.createElement('section'));
-  const target = gl.domElement.parentNode;
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    if (label) {
-      el.setAttribute('aria-label', label);
-    }
-    el.setAttribute('data-r3f-a11y', 'true');
-    el.setAttribute(
-      'style',
-      (styles => {
-        return Object.keys(styles).reduce(
-          (acc, key) =>
-            acc +
-            key
-              .split(/(?=[A-Z])/)
-              .join('-')
-              .toLowerCase() +
-            ':' +
-            (styles as any)[key] +
-            ';',
-          ''
-        );
-      })(stylesHiddenButScreenreadable)
-    );
-    if (description) {
-      if (refpDesc.current === null) {
-        const pDesc = document.createElement('p');
-        pDesc.innerHTML = description;
-        pDesc.style.cssText =
-          'border: 0!important;clip: rect(1px,1px,1px,1px)!important;-webkit-clip-path: inset(50%)!important;clip-path: inset(50%)!important;height: 1px!important;margin: -1px!important;overflow: hidden!important;padding: 0!important;position: absolute!important;width: 1px!important;white-space: nowrap!important;';
-        el.prepend(pDesc);
-        refpDesc.current = pDesc;
-      } else {
-        refpDesc.current.innerHTML = description;
-      }
-    }
-    return () => {
-      if (target) target.removeChild(el);
-    };
-  }, [description, label]);
-
-  if (ref.current === null) {
-    if (target) {
-      target.appendChild(el);
-    }
-    ref.current = el;
-  }
-
-  return (
-    <>
-      <A11ySectionContext.Provider value={ref}>
-        {children}
-      </A11ySectionContext.Provider>
-    </>
-  );
-};
diff --git a/src/A11yTag.tsx b/src/A11yTag.tsx
deleted file mode 100644
index e187fec..0000000
--- a/src/A11yTag.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-//https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
-import * as React from 'react';
-// import * as ReactDOM from 'react-dom';
-import { Group } from 'three';
-import { Assign } from 'utility-types';
-import { ReactThreeFiber, useThree } from '@react-three/fiber';
-import isDeepEqual from 'fast-deep-equal/react';
-
-const A11yTagContext = React.createContext<
-  React.MutableRefObject<HTMLElement | null>
->(React.createRef());
-
-A11yTagContext.displayName = 'A11yTagContext';
-
-const useA11yTagContext = () => {
-  return React.useContext(A11yTagContext);
-};
-
-export { useA11yTagContext };
-
-export interface HtmlProps
-  extends Omit<
-    Assign<
-      React.HTMLAttributes<HTMLDivElement>,
-      ReactThreeFiber.Object3DNode<Group, typeof Group>
-    >,
-    'ref'
-  > {
-  eps?: number;
-  tag?: string;
-  portal?: React.MutableRefObject<HTMLElement>;
-  zIndexRange?: Array<number>;
-  a11yElAttr?: Object;
-}
-
-export const A11yTag = ({
-  children,
-  eps = 0.001,
-  style,
-  className,
-  portal,
-  zIndexRange = [16777271, 0],
-  tag = 'div',
-  a11yElAttr,
-  ...props
-}: HtmlProps) => {
-  const gl = useThree(({ gl }) => gl);
-  const [el] = React.useState(() => document.createElement(tag));
-  const group = React.useRef<Group>(null);
-
-  const tagContext = useA11yTagContext();
-  const target = tagContext?.current ?? gl.domElement.parentNode;
-  const elRef = React.useRef<HTMLElement | null>(null);
-
-  const a11yElAttrRef = React.useRef(a11yElAttr);
-  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
-    a11yElAttrRef.current = a11yElAttr;
-  }
-
-  React.useEffect(() => {
-    if (group.current) {
-      el.style.cssText = `position:absolute;top:0;left:0;`;
-
-      return () => {
-        elRef.current = null;
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target]);
-
-  React.useEffect(() => {
-    if (group.current) {
-      if (a11yElAttr) {
-        for (const property in a11yElAttr) {
-          el.setAttribute(
-            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
-            //@ts-ignore
-            a11yElAttr[property]
-          );
-        }
-      }
-      return () => {};
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [a11yElAttrRef.current]);
-
-  if (target && target !== el.parentElement) {
-    if (!document.body.contains(el)) {
-      target.append(el);
-    }
-  }
-  elRef.current = el;
-
-  return (
-    <>
-      <A11yTagContext.Provider value={elRef}>
-        <group {...props} ref={group}>
-          {children}
-        </group>
-      </A11yTagContext.Provider>
-    </>
-  );
-};
diff --git a/src/Html.tsx b/src/Html.tsx
index 481b84e..5e392fc 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -1,6 +1,5 @@
 //https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Vector3,
   Group,
@@ -11,7 +10,6 @@ import {
 } from 'three';
 import { Assign } from 'utility-types';
 import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
-import isDeepEqual from 'fast-deep-equal/react';
 
 const v1 = new Vector3();
 const v2 = new Vector3();
@@ -68,85 +66,21 @@ export interface HtmlProps
     'ref'
   > {
   eps?: number;
-  portal?: React.MutableRefObject<HTMLElement>;
+  target: React.MutableRefObject<HTMLElement | null>;
   zIndexRange?: Array<number>;
-  tag?: 'div' | 'li' | 'legend';
-  a11yElAttr?: Object;
 }
 
 export const Html = ({
-  children,
   eps = 0.001,
-  style,
-  className,
-  portal,
+  target,
   zIndexRange = [16777271, 0],
-  tag = 'div',
-  a11yElAttr,
   ...props
 }: HtmlProps) => {
-  const gl = useThree(({ gl }) => gl);
   const camera = useThree(({ camera }) => camera);
-  const scene = useThree(({ scene }) => scene);
   const size = useThree(({ size }) => size);
-  const [el] = React.useState(() => document.createElement(tag));
   const group = React.useRef<Group>(null);
   const oldZoom = React.useRef(0);
   const oldPosition = React.useRef([0, 0]);
-  const target = portal?.current ?? gl.domElement.parentNode;
-
-  const a11yElAttrRef = React.useRef(a11yElAttr);
-  if (!isDeepEqual(a11yElAttrRef.current, a11yElAttr)) {
-    a11yElAttrRef.current = a11yElAttr;
-  }
-
-  React.useEffect(() => {
-    if (group.current) {
-      scene.updateMatrixWorld();
-      const vec = calculatePosition(group.current, camera, size);
-      el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
-
-      return () => {
-        if (target) target.removeChild(el);
-        ReactDOM.unmountComponentAtNode(el);
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target]);
-
-  React.useEffect(() => {
-    if (group.current) {
-      if (a11yElAttr) {
-        for (const property in a11yElAttr) {
-          el.setAttribute(
-            property.replace(/[A-Z]/g, m => '-' + m.toLowerCase()),
-            //@ts-ignore
-            a11yElAttr[property]
-          );
-        }
-      }
-      return () => {};
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [a11yElAttrRef.current]);
-
-  if (target && target !== el.parentElement) {
-    if (!document.body.contains(el)) {
-      target.append(el);
-    }
-  }
-
-  // const styles: React.CSSProperties = React.useMemo(() => {
-  //   return {
-  //     position: 'absolute',
-  //     transform: 'none',
-  //     ...style,
-  //   };
-  // }, [style, size]);
-
-  React.useLayoutEffect(() => {
-    ReactDOM.render(<>{children}</>, el);
-  });
 
   useFrame(() => {
     if (group.current) {
@@ -158,11 +92,14 @@ export const Html = ({
         Math.abs(oldPosition.current[0] - vec[0]) > eps ||
         Math.abs(oldPosition.current[1] - vec[1]) > eps
       ) {
-        el.style.display = !isObjectBehindCamera(group.current, camera)
-          ? 'block'
-          : 'none';
-        el.style.zIndex = `${objectZIndex(group.current, camera, zIndexRange)}`;
-        el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1)`;
+        if (target.current) {
+          target.current.style.zIndex = `${objectZIndex(
+            group.current,
+            camera,
+            zIndexRange
+          )}`;
+          target.current.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1) translate(-50%,-50%)`;
+        }
         oldPosition.current = vec;
         oldZoom.current = camera.zoom;
       }
diff --git a/src/HtmlBind.tsx b/src/HtmlBind.tsx
deleted file mode 100644
index ad44137..0000000
--- a/src/HtmlBind.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-//https://raw.githubusercontent.com/pmndrs/drei/master/src/web/Html.tsx
-import * as React from 'react';
-import {
-  Vector3,
-  Group,
-  Object3D,
-  Camera,
-  PerspectiveCamera,
-  OrthographicCamera,
-} from 'three';
-import { Assign } from 'utility-types';
-import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
-
-const v1 = new Vector3();
-const v2 = new Vector3();
-const v3 = new Vector3();
-
-function calculatePosition(
-  el: Object3D,
-  camera: Camera,
-  size: { width: number; height: number }
-) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  objectPos.project(camera);
-  const widthHalf = size.width / 2;
-  const heightHalf = size.height / 2;
-  return [
-    objectPos.x * widthHalf + widthHalf,
-    -(objectPos.y * heightHalf) + heightHalf,
-  ];
-}
-
-function isObjectBehindCamera(el: Object3D, camera: Camera) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-  const deltaCamObj = objectPos.sub(cameraPos);
-  const camDir = camera.getWorldDirection(v3);
-  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
-}
-
-function objectZIndex(
-  el: Object3D,
-  camera: Camera,
-  zIndexRange: Array<number>
-) {
-  if (
-    camera instanceof PerspectiveCamera ||
-    camera instanceof OrthographicCamera
-  ) {
-    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-    const dist = objectPos.distanceTo(cameraPos);
-    const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
-    const B = zIndexRange[1] - A * camera.far;
-    return Math.round(A * dist + B);
-  }
-  return undefined;
-}
-
-export interface HtmlProps
-  extends Omit<
-    Assign<
-      React.HTMLAttributes<HTMLDivElement>,
-      ReactThreeFiber.Object3DNode<Group, typeof Group>
-    >,
-    'ref'
-  > {
-  eps?: number;
-  target: React.MutableRefObject<HTMLElement | null>;
-  zIndexRange?: Array<number>;
-}
-
-export const HtmlBind = ({
-  eps = 0.001,
-  target,
-  zIndexRange = [16777271, 0],
-  ...props
-}: HtmlProps) => {
-  const camera = useThree(({ camera }) => camera);
-  const size = useThree(({ size }) => size);
-  const group = React.useRef<Group>(null);
-  const oldZoom = React.useRef(0);
-  const oldPosition = React.useRef([0, 0]);
-
-  useFrame(() => {
-    if (group.current) {
-      camera.updateMatrixWorld();
-      const vec = calculatePosition(group.current, camera, size);
-
-      if (
-        Math.abs(oldZoom.current - camera.zoom) > eps ||
-        Math.abs(oldPosition.current[0] - vec[0]) > eps ||
-        Math.abs(oldPosition.current[1] - vec[1]) > eps
-      ) {
-        if (target.current) {
-          target.current.style.display = !isObjectBehindCamera(
-            group.current,
-            camera
-          )
-            ? 'block'
-            : 'none';
-          target.current.style.zIndex = `${objectZIndex(
-            group.current,
-            camera,
-            zIndexRange
-          )}`;
-          console.log(vec[0], vec[1]);
-          target.current.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(1) translate(-50%,-50%)`;
-        }
-        oldPosition.current = vec;
-        oldZoom.current = camera.zoom;
-      }
-    }
-  });
-
-  return <group {...props} ref={group} />;
-};
diff --git a/src/index.tsx b/src/index.tsx
index ed60f96..95c7080 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,3 @@
-// export * from './A11y';
-export * from './A11yBind';
+export * from './A11y';
 export * from './A11yUserPreferences';
 export * from './A11yAnnouncer';
-export * from './A11yDebuger';
-// export { A11ySection } from './A11ySection';
-// export { A11yTag } from './A11yTag';

From 84d7697bd5f91249681478faeb1cbbba3ebe3857 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Tue, 27 Jul 2021 15:15:14 +0200
Subject: [PATCH 37/40] clean

---
 src/Html.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/Html.tsx b/src/Html.tsx
index 5e392fc..cec8731 100644
--- a/src/Html.tsx
+++ b/src/Html.tsx
@@ -13,7 +13,6 @@ import { ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
 
 const v1 = new Vector3();
 const v2 = new Vector3();
-const v3 = new Vector3();
 
 function calculatePosition(
   el: Object3D,
@@ -30,14 +29,6 @@ function calculatePosition(
   ];
 }
 
-function isObjectBehindCamera(el: Object3D, camera: Camera) {
-  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
-  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
-  const deltaCamObj = objectPos.sub(cameraPos);
-  const camDir = camera.getWorldDirection(v3);
-  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
-}
-
 function objectZIndex(
   el: Object3D,
   camera: Camera,

From 3a48bf2dc9a5997c6b581d37f4c0288a86d76550 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 29 Sep 2021 14:07:59 +0200
Subject: [PATCH 38/40] support older browser with MediaQueryList

---
 src/A11yUserPreferences.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/A11yUserPreferences.tsx b/src/A11yUserPreferences.tsx
index 607a537..8bfd136 100644
--- a/src/A11yUserPreferences.tsx
+++ b/src/A11yUserPreferences.tsx
@@ -58,23 +58,31 @@ export const A11yUserPreferences: React.FC<Props> = ({ children }) => {
       });
     };
 
-    prefersReducedMotionMediaQuery.addEventListener(
-      'change',
-      handleReducedMotionPrefChange
-    );
-    prefersDarkSchemeMediaQuery.addEventListener(
-      'change',
-      handleDarkSchemePrefChange
-    );
-    return () => {
-      prefersReducedMotionMediaQuery.removeEventListener(
+    if (prefersReducedMotionMediaQuery) {
+      prefersReducedMotionMediaQuery.addEventListener(
         'change',
         handleReducedMotionPrefChange
       );
-      prefersDarkSchemeMediaQuery.removeEventListener(
+    }
+    if (prefersDarkSchemeMediaQuery) {
+      prefersDarkSchemeMediaQuery.addEventListener(
         'change',
         handleDarkSchemePrefChange
       );
+    }
+    return () => {
+      if (prefersReducedMotionMediaQuery) {
+        prefersReducedMotionMediaQuery.removeEventListener(
+          'change',
+          handleReducedMotionPrefChange
+        );
+      }
+      if (prefersDarkSchemeMediaQuery) {
+        prefersDarkSchemeMediaQuery.removeEventListener(
+          'change',
+          handleDarkSchemePrefChange
+        );
+      }
     };
   }, []);
 

From d3a0b818a771922575293742f0e119b45b780efd Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 29 Sep 2021 14:09:10 +0200
Subject: [PATCH 39/40] 2.2.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ba5c4ee..b39b376 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-three/a11y",
-  "version": "2.2.0-alpha.1",
+  "version": "2.2.0",
   "description": "👩‍🦯 Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support",
   "keywords": [
     "a11y",

From aec36da774ac4706c0b093596c28b6f23914e299 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Wed, 29 Sep 2021 14:10:19 +0200
Subject: [PATCH 40/40] 2.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b39b376..81f5659 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-three/a11y",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "👩‍🦯 Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support",
   "keywords": [
     "a11y",