fix section default styling

Author: AlaricBaraou

src/A11y.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
 import { useThree } from '@react-three/fiber';
 import useAnnounceStore from './announceStore';
 import { useA11ySectionContext } from './A11ySection';
+import { stylesHiddenButScreenreadable } from './A11yConsts';
 import { Html } from './Html';
 
 interface A11yCommonProps {
@@ -104,19 +105,9 @@ export const A11y: React.FC<Props> = ({
   ...props
 }) => {
   let constHiddenButScreenreadable = Object.assign(
-    {
-      opacity: debug ? 1 : 0,
-      borderRadius: '50%',
-      width: '50px',
-      height: '50px',
-      overflow: 'hidden',
-      transform: 'translateX(-50%) translateY(-50%)',
-      display: 'inline-block',
-      userSelect: 'none' as const,
-      WebkitUserSelect: 'none' as const,
-      WebkitTouchCallout: 'none' as const,
-      margin: 0,
-    },
+    {},
+    stylesHiddenButScreenreadable,
+    { opacity: debug ? 1 : 0 },
     a11yElStyle
   );
 

src/A11yConsts.tsx

@@ -0,0 +1,15 @@
+let stylesHiddenButScreenreadable = {
+  opacity: 0,
+  borderRadius: '50%',
+  width: '50px',
+  height: '50px',
+  overflow: 'hidden',
+  transform: 'translateX(-50%) translateY(-50%)',
+  display: 'inline-block',
+  userSelect: 'none' as const,
+  WebkitUserSelect: 'none' as const,
+  WebkitTouchCallout: 'none' as const,
+  margin: 0,
+};
+
+export { stylesHiddenButScreenreadable };

src/A11ySection.tsx

@@ -6,6 +6,7 @@ import React, {
   createRef,
 } from 'react';
 import { useThree } from '@react-three/fiber';
+import { stylesHiddenButScreenreadable } from './A11yConsts';
 
 interface Props {
   children: React.ReactNode;
@@ -42,6 +43,23 @@ export const A11ySection: React.FC<Props> = ({
       el.setAttribute('aria-label', label);
     }
     el.setAttribute('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');