React.js Blueprint可访问性JavaScript API

Blueprint 是用于Web的基于React的UI工具包。该库在构建复杂且数据密集的桌面应用程序接口方面非常优化和流行。

在本文中，我们将讨论React.js Blueprint可访问性JavaScript API。Blueprint提供了一种管理焦点样式外观的实用工具，在使用鼠标单击或按下Tab键时显示活动元素周围的蓝色边框轮廓，这种行为由名为FocusStyleManager的JavaScript API管理。

我们可以使用Blueprint的FocusStyleManager组件显式启用此功能。FocusStyleManager有3个方法：

1. FocusStyleManager.isActive()： 它表示FocusStyleManager当前是否正在运行。
2. FocusStyleManager.onlyShowFocusOnTabs()： 它启用了在鼠标交互期间隐藏焦点样式的行为。
3. FocusStyleManager.alwaysShowFocus()： 它用于停止该行为，并使焦点样式始终可见。

语法：

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

创建React应用并安装模块：

步骤1： 使用以下命令创建一个React应用：

npm create-react-app appname

步骤2： 在创建完项目文件夹（即appname）后，使用以下命令移动到该文件夹：

cd appname

步骤3： 在创建ReactJS应用程序之后，使用以下命令安装所需的模块：

npm install @blueprintjs/core

项目结构：

步骤4: 如下运行该项目：

npm start

示例1： 下面的示例演示了在 InputGroup 组件中使用 alwaysShowFocus() 方法的用法。

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; 

输出：

示例2： 下面的示例演示了在按钮组件中使用focus的onlyShowFocusOnTabs（）方法的用法。

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; 

输出：

参考： https://blueprintjs.com/docs/#core/accessibility.javascript-api