Самый эффективный способ переключения роли, нажатой aria, в React для веб-доступности

У меня есть несколько div и span, которые я использую в качестве кнопок, и мне нужно переключаться между состоянием нажатия aria на «true» и «false». Конечно, это можно сделать с помощью aria-press = {this.state.pressed}, но для этого мне потребуется иметь состояние aria для каждой кнопки (их много).

Мое альтернативное решение состояло в том, чтобы использовать троичный и условно отображать разные div. Например,

{ this.state.buttonChange? <div onClick=(this.buttonChange} aria-pressed="true></div> : <div onClick=(this.buttonChange} aria-pressed="false"></div>}

Но это приведет к созданию большого количества дублированного кода и, возможно, будет менее эффективным, чем просто наличие кучи разных состояний арии.

Каков наиболее эффективный способ решения этой проблемы в React без использования встроенного элемента кнопки html?


person Dog    schedule 17.08.2018    source источник
comment
Поверьте, вы не хотите делать условный рендеринг. Кнопки потеряют любые потенциальные состояния фокуса, что сделает их недоступными с клавиатуры.   -  person Jason T Featheringham    schedule 17.08.2018


Ответы (2)


Один из способов, который я думаю, - использовать тернарный оператор с присвоением элементов div переменной для повторного использования.

let button = <div onClick=(this.buttonChange} aria-pressed={this.state.pressed}></div>;
{ this.state.buttonChange? {button} : {button}}

Или, если вы визуализируете кнопки динамически на основе динамических данных, вы можете поместить все элементы div в массив и отобразить его.

person Hemadri Dasari    schedule 17.08.2018

<div onClick=(this.buttonChange} aria-pressed={this.state.buttonChange}></div>

поэтому вам нужно только установить значение aria-press в зависимости от состояния.

person Vynart    schedule 17.08.2018