search

gwtproject / gwt

GWT Open Source Project
http://www.gwtproject.org
1.52k stars 374 forks source link

Section 508 Accessibility - Hidden Boxes #9255

Open aglynn opened 8 years ago

aglynn commented 8 years ago

When CSS is disabled, from the login page, two boxes appear at the top of the page. This is a global issue as it also occurs on the home page.

This deals with Section 508 of the US Rehabilitation Act. Specifically, 11 Web Stylesheet Dependence: D. **Programming code or other confusing elements are revealed on the page (22(d), B22)

hiddenboxes

AppVet Code: AppVet Code: /src/gov/nist/gwt/client/gui/LoginPanel.java (https://github.com/AppVet/appvet/blob/master/src/gov/nist/appvet/gwt/client/gui/LoginPanel.java) and AppVetPanel.java (https://github.com/AppVet/appvet/blob/master/src/gov/nist/appvet/gwt/client/gui/AppVetPanel.java)

Problem: Two empty boxes are displayed at the top of the page.

GWT generates AJAX from Java code and is dependent on CSS for correct rendering of a web page (and widgets on that page). Java developers using GWT do not have direct access to control all HTML or CSS. (GWT 2.6.1)

aglynn commented 8 years ago

I just wanted to follow up to see if this issue could be triaged? I know you guys have a lot on your plate so I appreciate any assistance. Thank you.

tbroyer commented 8 years ago

Any idea where those inputs come from? It's quite possible that they come from FocusPanel internals that creates a hidden input… for accessibility purpose (sic!) https://github.com/gwtproject/gwt/blob/516d503f188402ef5d3541da96d5216e432a9081/user/src/com/google/gwt/user/client/ui/impl/FocusImplStandard.java#L34-L38 This is used in a few places, when naturally-non-focusable elements needs to be focusable, such as PushButton, MenuBar, and MenuItem, which you happen to use in your two panels.

If you don't care about access keys, a workaround would be to add the following to your GWT module:

  <replace-with class="com.google.gwt.user.client.ui.impl.FocusImpl">
    <when-type-is class="com.google.gwt.user.client.ui.impl.FocusImpl"/>
    <any>
      <when-property-is name="user.agent" value="gecko1_8"/>
      <when-property-is name="user.agent" value="safari"/>
    </any>
  </replace-with>

IMO, this is unlikely to be fixed unless you contribute the patch (e.g. only creating the hidden input in FocusImplStandard when setting an access key), or if you can point us to proofs that this trick is no longer need (it was added more than 5 years ago, and Firefox and Safari/Chrome/etc. have changed a lot during this time; a quick check suggests that this might still be needed in Chrome though), in which case I'd happily remove it. Or we may even remove support for access keys altogether, given how badly implemented they are: http://webaim.org/techniques/keyboard/accesskey (and WCAG 2.0 no longer recommends using them, contrary to WCAG 1.0)

AppVet commented 8 years ago

When I use the Chrome Web Developer plugin on the above page and select "Disable Inline Styles", the two boxes appear. Thus, it seems that these two boxes are associated with GWT widgets that are using inline styles. However, I don't see in the source code (or GWT Designer) where an inline style is being used. The only thing I see is that both LoginPanel and AppVetPanel extend DockLayoutPanel and call super(Unit.PX), where Unit.PX is in the com.google.gwt.dom.client.Style.Unit package. Could this call to super(Unix.PX) be generating these empty boxes? I'm also wondering if these two boxes are being generated by widgets attributes that I do not have direct access to. Is there a way to disable (default) inline styles set by GWT?

AppVet commented 8 years ago

Here is a screenshot of the default GWT example with no modifications. When I disable inline styles (using the Chrome Web Developer plugin), the two empty boxes appear.

empty-boxes

AppVet commented 8 years ago

Ok, I am able to remove one of these mystery boxes. When creating a GWT Web Application project, GWT generates an HTML file which contains an optional iframe element for history support. When this iframe element is commented-out, one of the boxes disappears. I have tried removing all other lines in this file, except the main GWT script, but could not remove the last box. Thus, the last box must somehow be due to the generated javascript. Any help in tracking down this issue is appreciated.

empty-boxes2

AppVet commented 8 years ago

After a bit more research, it appears that this second "mystery" box is due to a hidden iframe in the GWT-generated javascript code. To verify this, I removed all source code in my onModule() method and re-ran the code. Then, using the Web Developer plugin, I selected the box to get information about this object.

empty-boxes3

As you can see, the box is associated with an iframe. It turns out this iframe is hidden and automatically generated by GWT. From the GWT FAQ on Debugging and Compiling, this iframe is explained in Step 4 and 5 of the bootstrap procedure which says that the JavaScript code in .nocache.js creates a hidden