Я задал вопрос о доступности здесь-> Модальное окно, расположенное на 2-м уровне, не может быть сфокусировано , на который, к сожалению, не получил ответа. Я все еще сталкиваюсь с этой проблемой. Я понял, что это произошло из-за того, что браузер присвоил моим модальным элементам собственные значения tabindex. Может ли значение tabindex автоматически присваиваться элементам? Может ли назначенное значение tabindex автоматически измениться ??
<div *ngIf="sidePanelVisible" role="region" tabindex=0 attr.aria-label="View side panel"
#sidePanelEle id="sidepanelContainer" class="fixedSidepanel"
[ngClass]="{'sidePanelBoxOpen' : sidePanelVisible && showTransition, 'sidePanelBox': !sidePanelVisible">
<!-- main code for panel here -->
<!-- following component contains the button which opens the exportModal -->
<app-view-entity></app-view-entity>
</div>
<!-- exportModal code -->
<div class="modal fade" bsModal #exportModal="bs-modal" tabindex=0 role="dialog" aria-label="Export modal"
aria-hidden="true">
<div class="md-dialog modal-md">
<div class="md-content">
<div class="md-header">
<div tabindex=0 class="md-title pull-left">
<div class="subTitle-export"> Export </div>
</div>
<button type="button" class="close-popup" (click)="hideExportModal()">
<img src="{{ pathImg }}/close.png" alt="Close Icon" (mouseover)="changeCloseIconOnHover('close-popup5')" (mouseout)="changeCloseIcon('close-popup5')" id="close-popup5">
</button>
</div>
<div class="md-body-export poup-body-text margin-top-10">
<div>
<div tabindex=0 class="line-height_1_5">
Select Export file format
</div>
</div>
</div>
<div class="md-footer font-14">
<button class="ts-btn ts-btn-secondary" (click)="actionExport('xls')">Export as .xls</button>
<button class="ts-btn ts-btn-secondary margin-left10" (click)="actionExport('xml')">Export as .csv</button>
</div>
</div>
</div>
</div>
В приведенном выше коде кнопки модального атрибута tabindex
добавляются автоматически, тогда как для элементов с tabindex=0
он превращается в tabindex=-1