2 Replies Latest reply on May 25, 2010 6:28 AM by Nick Belaevski

    rich:modalPanel outputs table, breaks accessibility

    Robert Bram Newbie

      Hi All,

       

      I have the following code:

       
      <!--  LOADING PANEL to display hour glass -->
      <rich:modalPanel id="popupPanelLoading" width="136" height="126" shadowDepth="2">
         <div id="modal-loading" style="text-align:center; vertical-align:middle; margin-left: -3px;">
            <h:graphicImage alt="Loading" value="/images/loading.gif"/>
         </div>
      </rich:modalPanel>
      

       


      This code generates the following:

       

      <!--  LOADING PANEL to display hour glass -->
      <div id="popupPanelLoading" style="display: none;">
         <input id="popupPanelLoadingOpenedState" name="popupPanelLoadingOpenedState" type="hidden">
         <div class="rich-modalpanel" id="popupPanelLoadingContainer" style="position: absolute; display: none; z-index: 100; background-color: inherit;">
            <div class="dr-mpnl-mask-div dr-mpnl-mask-div-opaque rich-mpnl-mask-div" id="popupPanelLoadingDiv" style="z-index: 1;">
               <button class="dr-mpnl-pnl-button" id="popupPanelLoadingFirstHref"></button>
            </div>
            <div class="dr-mpnl-panel rich-mpnl_panel">
               <div class="rich-mp-container" id="popupPanelLoadingCDiv" style="position: absolute; left: 0px; top: 0px; z-index: 9;">
                  <div class="dr-mpnl-shadow rich-mpnl-shadow" id="popupPanelLoadingShadowDiv" style="top: 2px; left: 2px;"></div>
                  <div class="dr-mpnl-ovf-hd dr-mpnl-trim dr-mpnl-pnl rich-mp-content" id="popupPanelLoadingContentDiv">
                     <table border="0" cellpadding="0" cellspacing="0" class="rich-mp-content-table" id="popupPanelLoadingContentTable" style="height: 100%; width: 100%;">
                        <tr style="height: 99%">
                           <td class="dr-mpnl-pnl-b rich-mpnl-body" valign="top"></td>
                        </tr>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      

      The problem is that this output contains a table, which breaks accessibility guidelines for our app - because all tables should have have headers (TH elements). Does anyone know how I can fix this?

       

      Thanks for any advice!

       

      Rob