javascript - React - 宣布组件已显示的事实

我必须让屏幕阅读器宣布某个部分已显示。这个部分的显示是基于一个布尔值，当用户点击链接时，该布尔值会发生变化。

到目前为止，它是这样实现的：

 import { Row } from 'react-bootstrap';
    ...
    const [shouldDisplay, setShouldDisplay] = useState<boolean>(false);
    ...
    return(
     {!shouldDisplay && (
        <a href="somepage.com" onClick={setShouldDisplay(true)} />
      )}

      {shouldDisplay && (
        <Row>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </Row>)}
    );

我尝试在 Row 上添加 aria-live="polite"，但屏幕阅读器仍然没有宣布显示了包含 lorem ipsum 的新部分。它应该宣布“Lorem ipsum 部分已显示”，或者至少像使用 react-bootstrap 的 Collapse 并设置 aria-expanded="true" 时那样宣布“已展开”。有没有办法实现这一点？

答案＃1

我认为你在 aria-live 上的做法是正确的：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions

想法：

• 在实际更改的内容上方创建 aria-live 属性。可能在内容首次呈现时不会进行公告
• 像文档中那样添加一个角色属性

• 简化代码

  • 摆脱 Row，可能它导致了这个失败

const [shouldDisplay, setShouldDisplay] = useState<boolean>(false);
return (
  <div role="region" aria-live="polite">
    {!shouldDisplay && (
      <button onClick={() => setShouldDisplay(true)} />
    )}

    {shouldDisplay && (
        <p>Lorem ipsum dolor sit amet...</p>
    )}
  </div>
);

答案＃2

尝试将 Row 包裹在带有 aria 标签的 div 中。

  {shouldDisplay && (
        <div aria-live="polite">
          {/* This region will be announced when the content changes */}
          <Row>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </Row>
        </div>
      )}

Row 是一个函数组件，如果它不接受这些属性作为 props，你不能直接将 DOM 属性应用到它上面。