Как сделать компонент фильтра доступным

Question

У нас есть простая страница со списком продуктов. Чтобы отфильтровать этот список, мы используем Microsoft FilterBar компонент .

Проблема? Программы чтения с экрана не объявляют количество результатов после того, как пользователь что-то ввел в панель фильтров.

Как видно из приведенной выше ссылки, нет никаких перехватчиков для предоставления меток aria непосредственно через компонент.

Мы также попытались обернуть FilterBar в div, где мы динамически устанавливаем метку aria, а также атрибут aria-live. Тогда возникает проблема, что программа чтения с экрана объявляет результаты дважды - сначала старое состояние, а затем новое состояние.

Вот (упрощенная) версия кода:

<main>
   <div className="product-page">
      {this.props.showFilterBar &&
         <FilterBar filter={this.state.filter}>
            <KeywordFilterBarItem filterItemKey="keywords" />
         </FilterBar>}
         <div className="product-list">
            <DetailsList
               ...
             />
         </div>
   </div>
</main>

Как мы можем установить соответствующие атрибуты aria, чтобы, когда пользователь вводит что-то в компонент FilterBar, программа чтения с экрана объявляет количество результатов поиска?