React.js Blueprint Accessibility Focus management

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Accessibility Focus management. The Blueprint provides the utility that manages the appearance of focus styles in which the blue glowy outline around the active element is shown when clicked using the mouse or by pressing the tab key. We may explicitly enable this feature in our app using the FocusStyleManager component of Blueprint. 

Syntax:

import { FocusStyleManager } from "@blueprintjs/core";
FocusStyleManager.onlyShowFocusOnTabs();

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. app name, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

Step 4: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of the focus in an InputGroup component. Here, the InputGroup is focused only when we have presses the Tab key because the onlyShowFocusOnTabs() method is used.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { InputGroup, FocusStyleManager } from "@blueprintjs/core";

FocusStyleManager.onlyShowFocusOnTabs();

function App() {
    return (
        <div>
            <div style={{ textAlign: "center",
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Accessibility Focus management
                </h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <InputGroup placeholder=
                    "Click here for focus"
                    style={{ width: 400 }} />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: The below example demonstrates the usage of the focus in a Button component. Here, the button is focused only when we have presses the Tab key and is not focused on the click of the mouse because the onlyShowFocusOnTabs() method is used.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, FocusStyleManager } from "@blueprintjs/core";

FocusStyleManager.onlyShowFocusOnTabs();

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Accessibility Focus management
                </h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Button text="Click here for focus" />
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/accessibility.focus-management