Выберите (выпадающий) вопрос доступности - PullRequest
0 голосов
/ 10 октября 2019

У меня есть HTML-код как

<mat-form-field >
 <mat-label>Favorite food</mat-label>
 <mat-select>
 <mat-option role="option" *ngFor="let food of foods" [value]="food.value">
 {{food.viewValue}}
 </mat-option>
 </mat-select>
 </mat-form-field>

, и ниже HTML отображается в браузере после запуска приложения

<mat-select _ngcontent-c12="" class="form-control mat-select ng-tns-c21-23 mat-
select-empty ng-star-inserted" role="listbox" id="mat-select-10" tabindex="0" aria-labelledby="mat-form-field-label-21" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">
<div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin=""><div class="mat-select-value" ng-reflect-ng-switch="true"><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--><span class="mat-select-placeholder ng-tns-c21-23 ng-star-inserted">&nbsp;</span><!--bindings={
  "ng-reflect-ng-switch-case": "false"
}--></div><div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div></div><!--bindings={
  "ng-reflect-origin": "[object Object]",
  "ng-reflect-positions": "[object Object],[object Object",
  "ng-reflect-offset-y": "-12",
  "ng-reflect-min-width": "325",
  "ng-reflect-backdrop-class": "cdk-overlay-transparent-backdr",
  "ng-reflect-scroll-strategy": "[object Object]",
  "ng-reflect-open": "false",
  "ng-reflect-has-backdrop": "",
  "ng-reflect-lock-position": ""
}--></mat-select>

, когда я открываю раскрывающийся список, я получаю эту нг опции

<mat-option _ngcontent-c12="" class="mat-option ng-star-inserted mat-active" role="option" ng-reflect-value="value1" tabindex="0" id="mat-option-4" aria-disabled="false"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span class="mat-option-text"> viewValue1 </span><div class="mat-option-ripple mat-ripple" mat-ripple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLElement]"></div></mat-option>

Я получаю сообщение об ошибке как Required ARIA child role not present: option, я новичок в этом, я попытался, добавив aria-label, и я дал идентификатор для mat-options, хотя он теперь работает, может любойпомогите мне решить этот вопрос.

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Проблемы с MatSelect и тестированием доступности известны и до сих пор остаются нерешенными. Подробнее см. https://github.com/angular/components/issues/11083.

0 голосов
/ 20 октября 2019

Нет необходимости передавать атрибут роли. Ошибка означает, что «option» является недопустимым значением или атрибутом «role». Без него должно нормально работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...