deprecated Hint

pmndrs · Aug 23, 2024 · 6000853 · 6000853
1 parent efb0e77
commit 6000853
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -29,16 +29,16 @@ note: The full documentation can be found on the [pmndrs website](https://docs.p
 First, place the A11yAnnouncer component next to the R3F Canvas component. this componant is critical since it manage some screen-reader features.
 
 ```jsx
-import { Canvas } from '@react-three/fiber'
-import { A11yAnnouncer } from '@react-three/a11y'
+import { Canvas } from '@react-three/fiber';
+import { A11yAnnouncer } from '@react-three/a11y';
 
 function App() {
   return (
     <>
       <Canvas />
       <A11yAnnouncer />
     </>
-  )
+  );
 }
 ```
 
@@ -141,10 +141,8 @@ Uses the `pointer` cursor. Special attributes: `href`.
 
 This role is meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.
 
-<Hint>
-  - Don't forget to provide the href attribute as he is required for screen readers to read it
-  correctly ! - It will have no effect on the navigation, it's just used as information
-</Hint>
+> [!NOTE]
+> Don't forget to provide the href attribute as he is required for screen readers to read it correctly ! - It will have no effect on the navigation, it's just used as information
 
 [Read more about role link](https://docs.pmnd.rs/a11y/roles/link)
 
@@ -183,16 +181,9 @@ Use a custom tabindex with for your A11y components by providing a number to the
 <A11y tabIndex={-1} ... />
 ```
 
-⚠⚠⚠
-<br />
-Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on
-assistive technology to navigate and operate page content. Instead, write the document with the
-elements in a logical sequence.
-<br />
-More about the use of tabIndex on{' '}
-<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">
-  developer.mozilla.org
-</a>
+> [!CAUTION]
+> Avoid using `tabindex` values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content.
+> Instead, write the document with the elements in a logical sequence. More about the use of tabIndex on [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
 
 ### Author:
 

diff --git a/docs/introduction.mdx b/docs/introduction.mdx
@@ -30,16 +30,16 @@ npm install @react-three/a11y
 First, place the A11yAnnouncer component next to the R3F Canvas component. This component is critical since it manage some screen-reader features.
 
 ```jsx
-import { Canvas } from '@react-three/fiber'
-import { A11yAnnouncer } from '@react-three/a11y'
+import { Canvas } from '@react-three/fiber';
+import { A11yAnnouncer } from '@react-three/a11y';
 
 function App() {
   return (
     <>
       <Canvas />
       <A11yAnnouncer />
     </>
-  )
+  );
 }
 ```
 
@@ -142,10 +142,8 @@ Uses the `pointer` cursor. Special attributes: `href`.
 
 This role is meant to emulate the behaviour of a regular html link. It should be used in combination with something that will trigger navigation on click.
 
-<Hint>
-  - Don't forget to provide the href attribute as it is required for screen readers to read it
-  correctly! - It will have no effect on the navigation, it's just used as information
-</Hint>
+> [!NOTE]
+> Don't forget to provide the href attribute as it is required for screen readers to read it correctly! - It will have no effect on the navigation, it's just used as information
 
 [Read more about role link](/a11y/roles/link)
 
@@ -184,15 +182,6 @@ Use a custom tabindex with for your A11y components by providing a number to the
 <A11y tabIndex={-1} ... />
 ```
 
-<Hint>
-  ⚠⚠⚠
-  <br />
-  Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on
-  assistive technology to navigate and operate page content. Instead, write the document with the
-  elements in a logical sequence.
-  <br />
-  More about the use of tabIndex on{' '}
-  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">
-    developer.mozilla.org
-  </a>
-</Hint>
+> [!CAUTION]
+> Avoid using `tabindex` values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content.
+> Instead, write the document with the elements in a logical sequence. More about the use of tabIndex on [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
diff --git a/docs/roles/content.mdx b/docs/roles/content.mdx
@@ -27,10 +27,8 @@ That's it !
 Now if you inspect the dom of your app, you will see that a `<p>` tag has been added with your text inside.
 That way, user with a screenreader will be able to read that text too.
 
-<Hint>
-  For people using screen readers it will also sync some kind of focus indicator natively where your
-  text is so people so screen readers users will know where they're currently in your page.
-</Hint>
+> [!NOTE]
+> For people using screen readers it will also sync some kind of focus indicator natively where your text is so people so screen readers users will know where they're currently in your page.
 
 This role can also be used to serve as a step for a user to navigate your site using Tab for instance.
 For that you would need to add the tabIndex prop and the focusCall prop like so.

diff --git a/docs/roles/link.mdx b/docs/roles/link.mdx
@@ -15,7 +15,7 @@ Since it's meant to emulate the behaviour of a regular html link. It should be u
   role="link"
   href="/page"
   actionCall={() => {
-    router.push(`/page`)
+    router.push(`/page`);
   }}
 >
   <Some3DComponent />
@@ -30,7 +30,7 @@ You can also play with it in [this demo](https://n4rzi.csb.app)
 
 ```jsx
 function Some3DComponent() {
-  const a11y = useA11y()
+  const a11y = useA11y();
   return (
     <mesh>
       <boxBufferGeometry />
@@ -41,12 +41,10 @@ function Some3DComponent() {
         emissive={a11y.focus ? '#cc4444' : a11y.hover ? '#339922' : '#003399'}
       />
     </mesh>
-  )
+  );
 }
 ```
 
-<Hint>
-  Don't forget to provide the href attribute as he is required for screen readers to read it
-  correctly !<br />
-  It will have no effect on the navigation, it's just used as information
-</Hint>
+> [!IMPORTANT]
+> Don't forget to provide the `href` attribute as he is required for screen readers to read it correctly!
+> It will have no effect on the navigation, it's just used as information
diff --git a/docs/roles/togglebutton.mdx b/docs/roles/togglebutton.mdx
@@ -27,18 +27,16 @@ It is also actionnable by user using a screen reader.
 
 Using it like this makes it focusable to all kind of users.
 
-<Hint>
-  You might have noticed the startPressed prop. Depending on your need, you might want to have your
-  button starting in a pressed state. This is what this prop is for.
-</Hint>
+> [!NOTE]
+> You might have noticed the startPressed prop. Depending on your need, you might want to have your button starting in a pressed state. This is what this prop is for.
 
 You should also use the useA11y() hook within the encapsulated components to adjust the rendering on hover and focus and pressed state. Doing so greatly improve the accessibility of your page.
 Take a look at this code sample to see how to use it.
 You can also play with it in [this demo](https://n4rzi.csb.app)
 
 ```jsx
 function Some3DComponent() {
-  const a11y = useA11y() // access pressed, hover and focus
+  const a11y = useA11y(); // access pressed, hover and focus
   return (
     <mesh>
       <boxBufferGeometry />
@@ -49,7 +47,7 @@ function Some3DComponent() {
         emissive={a11y.focus ? '#cc4444' : a11y.hover ? '#339922' : '#003399'}
       />
     </mesh>
-  )
+  );
 }
 ```