Modal placed on the 2nd level cannot be focused

问题

I am working on accessibility fixes for an Angular project at work. I am facing an issue accessing a modal. I have a main component which opens another component on top of it covering half the screen. That component opens a modal on button click. This modal is not accessible by tab. And even weirder, the tabindex=0 that you see assigned in the code below automatically gets assigned tabindex=-1 when the modal appears on screen. Even the buttons, which don't even have a tabindex attribute originally. Code structure is as below:

Side panel component

<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>

Modal is opened using modal.show(). Could anyone suggest a solution??

来源：https://stackoverflow.com/questions/62751721/modal-placed-on-the-2nd-level-cannot-be-focused

标签

html

css

angular

accessibility

jaws-screen-reader