reactjs - 设置屏幕阅读器的输入参考值

Question

我在尝试在 blueprintjsSelect组件上设置输入 ref 值时遇到了麻烦。从视觉上看，该组件工作正常，但我需要屏幕阅读器读取当前突出显示的选项。出于某种原因，屏幕阅读器（NVDA）读取最后选择/突出显示的值而不是当前值。

目前，我的代码只是使用突出显示的选项更新输入值。这是我的代码：

renderItem = (item, { handleClick, modifiers, query }) => {
    if (!modifiers.matchesPredicate) {
        return null;
    }
    const text = `${item.attributes.project_name}`;
    return (
        <MenuItem
            active={modifiers.active}
            disabled={modifiers.disabled}
            key={item.attributes.project_name}
            onClick={handleClick}
            text={highlightText(text, query)}
        />
    );
};

filterItem = (query, item) => {
    return `${item.attributes.project_name}`.toLowerCase().indexOf(query.toLowerCase()) >= 0;
};

setActiveItem = (item) => {
    let activeItem = item && item.attributes ? item.attributes.project_name : null
    this.inputElement ? this.inputElement.value = activeItem : null
    this.setState({activeItem})
};

render() {
    return (

        <Box style={{width: '100%', marginBottom: '10px'}}>

            {this.props.projects ?
                <Select
                    itemPredicate={this.filterItem}
                    itemRenderer={this.renderItem}
                    items={this.props.projects}
                    onActiveItemChange={this.setActiveItem}
                    inputProps={{value: this.state.activeItem,
                        inputRef: el => this.inputElement = el}}

                    noResults={<MenuItem disabled={true} text="No results."/>}
                    onItemSelect={this.props.onProjectSelect}
                    popoverProps={{minimal: true, popoverClassName: 'search-popover'}}
                >

                    <Button text="Select a Project" icon="projects" style={{width: '225px'}}
                            rightIcon="double-caret-vertical"/>
                </Select>
                : null}
        </Box>
    );
}

Answer 1

我认为 Blueprintjs 没有直接的方法来做到这一点。我建议使用styled-components。您可以设置选择的打开状态并将 onFocus 应用于当前悬停的元素。