From 60008535666d54e7c1c933dfabe44cafb3be7ad2 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Fri, 23 Aug 2024 10:22:36 +0200 Subject: [PATCH] deprecated Hint --- README.md | 25 ++++++++----------------- docs/introduction.mdx | 27 ++++++++------------------- docs/roles/content.mdx | 6 ++---- docs/roles/link.mdx | 14 ++++++-------- docs/roles/togglebutton.mdx | 10 ++++------ 5 files changed, 28 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index e9fe7c2..7393878 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,8 @@ 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 ( @@ -38,7 +38,7 @@ function App() { - ) + ); } ``` @@ -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. - - - 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 - +> [!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 ``` -⚠⚠⚠ -
-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 - +> [!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 index 264478d..070e424 100644 --- a/docs/introduction.mdx +++ b/docs/introduction.mdx @@ -30,8 +30,8 @@ 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 ( @@ -39,7 +39,7 @@ function App() { - ) + ); } ``` @@ -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. - - - 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 - +> [!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 ``` - - ⚠⚠⚠ -
- 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 - - +> [!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 index 399b273..158467e 100644 --- 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 `

` tag has been added with your text inside. That way, user with a screenreader will be able to read that text too. - - 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. - +> [!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 index 4f26fcb..2bb6d2d 100644 --- 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`); }} > @@ -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 ( @@ -41,12 +41,10 @@ function Some3DComponent() { emissive={a11y.focus ? '#cc4444' : a11y.hover ? '#339922' : '#003399'} /> - ) + ); } ``` - - 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 - +> [!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 index 130a903..4d41f9a 100644 --- a/docs/roles/togglebutton.mdx +++ b/docs/roles/togglebutton.mdx @@ -27,10 +27,8 @@ It is also actionnable by user using a screen reader. Using it like this makes it focusable to all kind of users. - - 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. - +> [!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. @@ -38,7 +36,7 @@ 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 ( @@ -49,7 +47,7 @@ function Some3DComponent() { emissive={a11y.focus ? '#cc4444' : a11y.hover ? '#339922' : '#003399'} /> - ) + ); } ```