Тег, скрытый с помощью углового «[attr.aria-hidden]», по-прежнему доступен и доступен для нажатия, используя вкладку и введите

Question

У меня есть тег с условным [attr.aria-hidden], как показано ниже:

<a type="button" class="btn btn-link" id="landing-login-btn" href="#"
   *ngIf="!loggedInState"
   (click)="openLoginModal()"
   [attr.aria-hidden]="navigateToNext" 
   [innerHTML]="secondaryBtn">
</a>

После выполнения события (нажатие кнопки):

1. 'a'тег не отображается на экране
2. В инструментах разработчика я вижу, что для тега' aria-hidden 'установлено значение true.

Однако на вкладке этот тег все еще доступен и его можно щелкнуть с помощью клавиши «enter».Что мне здесь не хватает?Нужно ли полностью скрывать кнопку, чтобы она не нажимала?

Answer 1

Однако на вкладке этот тег все еще доступен и его можно щелкнуть, нажав «Ввод».

Это правильно.Атрибут aria-hidden является подсказкой для программ чтения с экрана, что элемент не должен отображаться для программ чтения с экрана.То есть он «скрыт» от программ чтения с экрана.

Однако атрибуты ARIA не обеспечивают любое поведение .То есть установка aria-hidden="true" не будет скрывать элемент визуально и не будет препятствовать перемещению фокуса на него.Если вы хотите, чтобы <a> был скрыт для всех, просто используйте CSS display:none.Вам не понадобится aria-hidden в этом случае.

Answer 2

Вы можете попробовать с [attr.aria-hidden] = "navigateToNext? 'Hidden': null" как

<a type="button" class="btn btn-link" id="landing-login-btn" href="#"
                                    *ngIf="!loggedInState"
                                    (click)="openLoginModal()"
                                    [attr.aria-hidden]="navigateToNext? 'hidden' : null"
                                    [innerHTML]="secondaryBtn"></a>