导航区域

navigateRegions 是一个 React 高阶组件，用于添加键盘导航功能以在不同标记为“区域”（role=”region”）的 DOM 元素之间切换。这些区域应该是可聚焦的（例如通过添加 tabIndex 属性）。为了更好的无障碍性，这些元素必须正确标注，以便简要描述该区域中内容的用途。更多详情，请参阅 WAI-ARIA 规范 中的 “Landmark Roles” 以及 ARIA Authoring Practices Guide 中的 “Landmark Regions”。

示例：

import { navigateRegions } from '@wordpress/components';

const MyComponentWithNavigateRegions = navigateRegions( () => (
    <div>
        <div role="region" tabIndex="-1" aria-label="Header">
            Header
        </div>
        <div role="region" tabIndex="-1" aria-label="Content">
            Content
        </div>
        <div role="region" tabIndex="-1" aria-label="Sidebar">
            Sidebar
        </div>
    </div>
) );

注意事项：

需要注意的是，ARIA role="region" 是一种 ARIA 地标角色。它应仅保留给那些足够重要、需要在页面摘要中列出的内容部分。请仅在页面的主要部分使用此 ARIA 角色。所有可感知的内容都应位于具有语义意义的地标中，以免用户遗漏内容。