rich:modalPanel outputs table, breaks accessibility
robertmarkbram May 21, 2010 12:42 AMHi 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