Браузер автоматически присваивает значение tabindex - PullRequest
0 голосов
/ 14 июля 2020

Я задал вопрос о доступности здесь-> Модальное окно, расположенное на 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

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