Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

Cannot access the Close icon in modal window with keyboard

SA-2259

Summary



Users report that the red X on the modal dialog is not accessible by the keyboard. However, they can click the red X with the mouse to close it. When accessibility is turned on, it becomes challenging to close the modal dialog if the Close button is not available. When this situation occurs, users cannot close ithe modal dialog at all.

Error Messages



None

Steps to Reproduce

  1. Open a modal dialog window.
  2. Try to close it with the keyboard only when you have the red X and you do not have the Close button.

Root Cause



The modal dialog's red X is not designed to be accessed through the keyboard.

Resolution



Perform the following local-change:
  1. To the container DIV, add the HMTL5/ARIA attribute role=dialog to inform assistive technologies of the type of rich internet application component the code represents (semantics).

    <div role="dialog" <%if(!tools.hasInputEnabled()){%>readonly='true'<%}%> class='sectionDivStyle' id='RULE_KEY' node_type='MAIN_RULE' <%=tools.getParamValue("section_base_ref")%><%tools.putParamValue("section_base_ref","");%> node_name='<pega:reference name="$stream-definition(pyStreamName)"/>' expandRL='<p:r n="param.expandRL"/>'  <pega:when test='param.expandRL == "true"'>INDEX='<p:r n="param.index"/>'</pega:when>  version='1' objclass='<pega:reference name="$stream-definition(pxObjClass)"/>'  pyclassname='<pega:reference name="$stream-definition(pyClassName)"/>' uniqueID='<p:r n="$save(sectionUniqueID)" />' <pega:when test="param.newSectionID != ''">outerGadget='<p:r n="param.newSectionID"/>'</pega:when>>
     
  2. Change the HTML rule header Include from the final rule pzModalHeader to a newly created (non-auto generated) section ModalHeader: <pega:when test='param.RenderSingle == ""'>
    <pega:include type="Rule-HTML-Section" name="ModalHeader"/></pega:when>
     
  3. Change the ModalHeader code (header wrapper) to a more semantic HTML header tag: 
    <h4 class="hd" id="modaldialog_hd">
    <span id="modaldialog_hd_title"><pega:include type="Rule-HTML-Property" name="pzModalTitle"/></span>
    <pega:include name="pzModalHelp" type="Rule-HTML-Property" />
    </h4>

     
  4.  In the ModalHeader, remove the Close icon because no items in the header ever take the focus, even when the icon is changed to a link or button.
  5. Move the Close icon to a newly created HTML rule called ModalClose and include that at the bottom of the GridModalTemplate code – just before closing the container DIV.
    <%-- GenerateSectionBodyHTML: End --%></pega:when>
    <%-- move the close icon here from ModalHeader section so it is after the 1st input and can take natural tab focus without Pega JS lib interferring. CSS positions it top right so visual display is unaffected --%>
    <pega:include name="ModalClose" type="Rule-HTML-Property" />
    <% tools.putSaveValue("ContainerID", "");%>
     
  6. The icon has absolute Pega-provided CSS positioning; therefore, it always appears in the top right of the modal dialog regardless of the natural flow order of the HTML.
  7. Change the icon to a button and specify the role, tabindex, and title to enhance accessibility while allowing for natural focus (because it is a button):
    <button role="navigation" tabindex="0" title="close dialogue window" class='container-close' id="container_close">&nbsp;</button>
     
  8. Despite the fact that this visually displays the Close button in a different order of the the flow of the HTML, the functionality is identical to what is required:
  • Focus goes onto the first data input element on the screen when loading.
  • User is able to Shift-Tab to move the cursor to the Close button because the tabbing loops through the focusable items in the modal dialogue code with role=dialog.
  • If the user tabs all the way through the modal dialog, the focus goes to the Close button after the OK and Cancel buttons.
Suggest Edit

Published November 29, 2018 - Updated October 8, 2020

Did you find this content helpful? Yes No

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us