我有以下问题。比方说,我有组件加载与以下道具loadContext。屏幕阅读器没有读取反应组件中的html元素
正常情况下,我有一个按钮,文本“加载更多”,当用户点击它出现微调(加载组件),然后它加载下一个内容在网页上。
但这个代码只是简化版本,按钮包含微调。屏幕阅读器读取和 html标签,但没有加载组件。
加载组件:
export default class Loading extends React.Component {
static get propTypes() {
return {
loadContext: React.PropTypes.string.isRequired,
};
}
shouldComponentUpdate() {
return false;
}
render() {
const els = [];
if(this.props.loadContext) {
els.push( {this.props.loadContext});
}
els.push(
const maybeDelay = (children) => {
if (typeof this.props.delay === 'number') {
return (
{children}
);
}
return children;
};
return maybeDelay(
{els}
);
}
}
我想要做什么:如果按钮用户点击,然后屏幕阅读器将读取通过道具loadContext在span标签的文本。
带有来自道具loadContext的文本的span标记具有类loader-context-hidden(在css文件中意味着visibility:hidden)。
渲染加载组件:
{this.props.loadContext}
问:我怎样才能做到这一点的屏幕阅读器看看加载组件,将读取范围的标记文字。我必须从aria中使用role =“status”。
2017-01-19
Morten