Javascript 屏幕阅读器未读取react组件中的html元素

我有以下问题。假设我使用下面的props loadContext加载组件

通常我有一个带有文本“加载更多”的按钮，当用户单击它时，它会显示微调器（加载组件），然后它会加载网页上的下一个内容

但这段代码只是简化版本，按钮包含微调器。屏幕阅读器读取

和

html标记，但没有加载组件

<button>
  <a href="#"> 
  <Loading loadContext="browser is loaded context" />
  </a>
</button>

问题：如何实现屏幕阅读器查看加载组件并读取span标记中的文本。我必须使用aria中的role=“status”

你说：

带有prop

loadContext

文本的span标记隐藏了类加载器上下文（这意味着css文件中的

visibility:hidden

）

不要使用

可见性：隐藏
。这将使它对屏幕阅读器不可见。这适用于
display:none
。取而代之的是，使用一种样式来定位元素，使其仍然被视为“可见”，但在所有意图和目的下都是不可见的

看

本文建议使用类似于以下内容的实用程序样式：

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

你说：

带有prop
loadContext
文本的span标记隐藏了类加载器上下文（这意味着css文件中的
visibility:hidden
）

不要使用
可见性：隐藏
。这将使它对屏幕阅读器不可见。这适用于
display:none
。取而代之的是，使用一种样式来定位元素，使其仍然被视为“可见”，但在所有意图和目的下都是不可见的

看

本文建议使用类似于以下内容的实用程序样式：

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}