Элемент управления должен быть связан с текстовой меткой - PullRequest
Новая
       106

Элемент управления должен быть связан с текстовой меткой

1 голос
/ 13 октября 2019

Я получаю сообщение об ошибке:

Элемент управления должен быть связан с текстовой меткой.

Код: 

 <i
   role="button"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />

Эта ошибка связана с этим правилом eslint .

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

В чем проблема?

РЕДАКТИРОВАТЬ

Как указал @rickdenhaan, правильное правило для применения: это .

1 Ответ

2 голосов
/ 13 октября 2019

Это сообщение фактически приходит из правила control-has-label * .

Правило запускается атрибутом role="button". Это превращает ваш <i /> в элемент управления, поэтому для удобства доступа ему нужна текстовая метка (чтобы программы чтения с экрана знали, что считать, например). Чтобы соответствовать правилу, вы можете указать текстовое содержимое «кнопки» или добавить атрибут aria-label: 

<i
   role="button"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
>
  Mute volume
</i>

<i
   role="button"
   aria-label="Mute volume"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />
...