React.js Blueprint Accessibility JavaScript API

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 JavaScript API. 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 and this behavior is managed by a JavaScript API called FocusStyleManager.

We may explicitly enable this feature in our app using the FocusStyleManager component of Blueprint. FocusStyleManager has 3 methods:

1. FocusStyleManager.isActive(): It denotes whether the FocusStyleManager is currently running or not.
2. FocusStyleManager.onlyShowFocusOnTabs(): It enables the behavior of hiding focus styles during mouse interaction.
3. FocusStyleManager.alwaysShowFocus(): It is used to stop the behavior and let the focus styles be visible always.

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. appname, 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 alwayShowFocus() method of focus in an InputGroup component.

Javascript

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

FocusStyleManager.alwaysShowFocus();

function App() {
    return (
        <div>
            <div style={{ textAlign: "center",
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Accessibility JavaScript API
                </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 onlyShowFocusOnTabs() method of focus in a Button component.

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 JavaScript API
                </h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <Button text="Click me" />
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/accessibility.javascript-api