mardi 30 juin 2020

JAWS reads Headings as clikable even though parent div has not click handler associated

I am working on accessibility testing for an Angular project. I have some code for a modal that is as below

<div class="modal fade" bsModal #cancelConfirmModal="bs-modal" tabindex="-1" role="dialog"
    attr.aria-label="Cancel Modal" aria-hidden="true">
    <div class="md-dialog modal-md">
        <!-- Modal content-->
        <div class="md-content">
            <div class="md-header">
                <div class="md-title pull-left">
                    <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4>
                </div>
                <button type="button" class="close-popup" (click)="hideCancelModal()">
                    <img src="/close.png" alt="Close Icon"
                        (mouseover)="changeCloseIconOnHover('close-popup3')"
                        (mouseout)="changeCloseIcon('close-popup3')" id="close-popup3">
                    <label class="sr-only">Close</label>
                </button>
            </div>
            <div tabindex=0 class="md-body">
                
            </div>
            <div class="md-footer">
                <button type="reset pull-right" class="ts-btn ts-btn-primary no-btm-margin" (click)="revert()">Yes</button>
                <button type="pull-right" (click)="hideCancelModal()"
                    class="ts-btn ts-btn-tertiary margin-left10 no-btm-margin">Cancel</button>
            </div>
        </div>
    </div>
</div>

When I tab over to <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4> it reads Cancel heading level 4 clickable. There is no click event on the parent or even its parent. h4 is made tab reachable as per the QA's preference. How do I stop JAWS from announcing clickable??

Aucun commentaire:

Enregistrer un commentaire