React-Bootstrap Close Button Accessibility

Close-button accessibility is one of the features that is used to ensure that code and features can also be accessed by users who have disabilities. Close button accessibility provides data to screen readers so that users who have disabilities can understand it.

• aria-label: This attribute is used to enhance the accessibility of the user interface by providing a description or text label for the components that might not have visible text content.

Syntax:

<Button aria-label="relevant Text here...">
    Your Text Here...
</Button>

Example: In this given example we provided the value to aria-label as a Close modal so that the users with disabilities can understand the meaning through screen readers.

Javascript

//CloseButton.jsx

import React from "react";
import { Button } from "react-bootstrap";
import './CloseButton.css';

const CloseButton = ({ show, handleClose }) => {
    return (
        <div className={`component ${show ? "show" : ""}`}>
            <div className="component-dialog">
                <div className="component-content">
                    <div className="component-header">
                        <h5 className="component-title">Close-Button Accessibility</h5>
                        <Button
                            className="close"
                            variant="secondary"
                            onClick={handleClose}
                            aria-label="Close modal"
                        >
                            <span aria-hidden="true">×</span>
                        </Button>
                    </div>
                    <div className="component-body">
                        <p>Hi Geeks, Thank you for viewing this article</p>
                    </div>
                    <div className="component-footer">
                        <Button variant="secondary" onClick={handleClose}>
                            Close
                        </Button>

                    </div>
                </div>
            </div>
        </div>
    );
};

export default CloseButton;

Javascript

//App.js

import React, { useState } from "react";
import CloseButton from "./CloseButton";
import { Button } from "react-bootstrap";
import './App.css';

function App() {
  const [showComponent, setShowComponent] = useState(false);
  const handleShowComponent = () => {
    setShowComponent(true);
  };
  const handleCloseComponent = () => {
    setShowComponent(false);
  };
  return (
    <div>
      <Button variant="success" className="main-button" onClick={handleShowComponent}>Click Here</Button>
      <CloseButton show={showComponent} handleClose={handleCloseComponent} />
    </div>
  );
}
export default App;

CSS

/*CloseButton.css*/

.component {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.component.show {
    display: flex;
}

.component-dialog {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 400px;
}

.component-header {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ccc;
}

.component-title {
    font-size: 1.25rem;
    margin: 0;
}

.component-body {
    padding: 15px;
}

.component-footer {
    padding: 15px;
    border-top: 1px solid #ccc;
    text-align: right;
}

.component .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    padding-top: 2px;
    align-items: center;
    font-size: 20px;
}

.component-footer .btn {
    margin-left: 10px;
    background-color: green;
}

CSS

/*App.css*/

.main-button {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

Output: