Chakra UI Disclosure Visually Hidden

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

// App.js
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;