Chakra UI Disclosure Visually Hidden
Last Updated :
30 Jan, 2024
The Chakra UI Disclosure Visually Hidden Component facilitates content concealment while conveying information to screen readers, enhancing accessibility in disclosure patterns. Practical examples demonstrate its utility effectively.
Prerequisites:
Approach:
We have created a Chakra UI Disclosure Visually Hidden component that mainly hides the description toggle count information visually while still making it accessible for screen readers. When the “Show Description” button is clicked, the hidden text inside VisuallyHidden actions toggles the description along with the count it has been toggled. This toggling count is kept hidden from the user.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app chakra
Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:
cd chakra
Step 3: After creating the React application, Install the required package using the following command:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Project Structure:
The updated dependencies are in the package.json file:
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Below is the practical implementation of the Chakra UI Disclosure Visually Hidden:
Javascript
import React,
{ useState } from 'react' ;
import {
ChakraProvider, Box,
Button, Heading, Text
} from '@chakra-ui/react' ;
import {
VisuallyHidden
} from '@chakra-ui/react' ;
function App() {
const [show_Desc, set_show_Desc] = useState( false );
const [togg_Cnt, set_Togg_Cnt] = useState(0);
const toggDescFn = () => {
set_show_Desc((prev) => !prev);
set_Togg_Cnt((prev) => prev + 1);
};
return (
<ChakraProvider>
<Box p={8} maxW= "md" mx= "auto"
textAlign= "center" >
<Heading as= "h1" size= "2xl"
color= "green.500" mb={4}>
GeeksforGeeks
</Heading>
<Heading as= "h3" size= "lg"
color= "gray.600" mb={4}>
Chakra UI Disclosure Visually Hidden
</Heading>
<Button
colorScheme={
show_Desc ?
'red' : 'teal'
}
onClick={toggDescFn}
_hover={
{
bg: show_Desc ?
'red.500' :
'teal.500'
}}>
{
show_Desc ?
'Hide Description' :
'Show Description'
}
</Button>
<Box mt={6}>
<Heading as= "h2" size= "md" >
About GeeksforGeeks
</Heading>
<VisuallyHidden>
{
show_Desc
? `Description toggled ${togg_Cnt}
${togg_Cnt === 1 ? 'time' : 'times' }.`
: ''
}
</VisuallyHidden>
{show_Desc && (
<Text mt={2} fontSize= "sm"
color= "gray.600" >
GeeksforGeeks is a computer science portal
for geeks. It provides well-written articles,
tutorials, and quizzes to help individuals
learn and excel in various programming concepts.
</Text>
)}
</Box>
</Box>
</ChakraProvider>
);
}
export default App;
|
Step to run the Application:
npm start
Output: Now go to http://localhost:3000 in your browser:
Share your thoughts in the comments
Please Login to comment...