Блог

Главная - Вопросы по программированию - Использование атрибута aria в компоненте Angular вызывает ошибку

Использование атрибута aria в компоненте Angular вызывает ошибку

#angular #angular-components #wai-aria

#angular #угловые компоненты #вай-ария #angular-components #wai-aria

Вопрос:

У меня есть интерактивная карточка, которую я хотел бы превратить в компонент. Я хочу создать @Input для уникального имени (id) экземпляра do, которое я могу использовать aria-labelledby в названии карточки:

     <div
      class="card card-default category-widget"
      id="{{ widgetID }}"
      matRipple
      aria-labelledby="{{widgetTitle}}"
      role="button"
      tabindex="0"
    >
      <div class="card-body category-widget-icon" aria-hidden="true">
        <i class="pbi-icon-outline pbi-wifi"></i>
      </div>
      <div class="card-footer">
        <h4 class="category-widget-title" id="{{ widgetTitle }}">Widget Title</h4>
        <p class="category-widget-description">
          Widget description text
        </p>
      </div>
    </div>

За исключением того, что это выдает ошибку:

Can't bind to 'aria-labelledby' since it isn't a known property of 'div'.

Без aria-labelledby компонент работает нормально.

Ответ №1:

Вместо этого используйте [attr.aria-labelledby]="widgetTitle" , потому что это атрибут adhoc. Angular ни во что не запекается для многих атрибутов, как для свойств DOM и т.д. Поэтому такие вещи, как ARIA или, скажем, data-* атрибуты, должны быть указаны как атрибут через attr. и одностороннюю привязку.

Комментарии:

1. Спасибо. Будет ли aria по-прежнему работать, поскольку она относится к содержимому компонента, а не к самому экземпляру? Другими словами, в DOM есть <app-cat-widget> с моей картой внутри, но я собираюсь применить обработчик щелчков к <app-cat-widget> экземпляру.

2. Да, все должно быть в порядке, хотя иногда вы можете столкнуться с проблемами с привязкой событий к области щелчка на уровне компонента, и иногда вам нужно добавить like :host { display: block/inline-block/whatever the case } в component.scss, чтобы область попадания находилась там, где вы ожидаете по отношению к его дочерним элементам.

3. @ChrisW. "Angular doesn't bake in anything for many attributes like it does for DOM properties" . Это очень плохо. Атрибуты ARIA являются обычными свойствами DOM. Они должны обрабатываться так же, как и любое другое свойство DOM, и если angular ничего не содержит или обрабатывает их иначе, чем другие свойства, я рассматриваю это как недостаток angular.

4.@slugolicious это все же недостаток? ….и на самом деле, если мы останемся верны спецификации, они являются атрибутами элементов HTML DOM (не хочу вас поправлять, но это правда, за исключением таких знаковых элементов, как <nav> etc, которые по умолчанию являются ARIA). В любом случае, одно простое изменение в предоставлении требований, и мы легко сможем придерживаться всех стандартных стандартов доступности, которые вам могут потребоваться, или, в принципе, angular довольно аккуратен. 🙂

5. Наконец, кто-то это понимает. Взлетай, да.