Fix [ #315438 ] JAWS/508-compliance: Dialog select: selection area ca…

…n steal focus on Firefox and content isn't read by screen reader
orbeon · Sep 10, 2010 · 5cebcc9 · 5cebcc9
1 parent b41a968
commit 5cebcc9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/resources-packaged/xbl/orbeon/dialog-select/dialog-select.xbl b/src/resources-packaged/xbl/orbeon/dialog-select/dialog-select.xbl
@@ -111,7 +111,9 @@
                         <!-- If a separator is specified, output a string, otherwise output ul/li -->
                         <xxforms:variable name="separator" xbl:attr="xbl:text=separator" as="xs:string">ED9A0AC4-F526-ECCD-869A-D59A3AEDE4A8</xxforms:variable>
                         <xforms:group ref=".[$separator != 'ED9A0AC4-F526-ECCD-869A-D59A3AEDE4A8']">
-                            <xforms:output value="string-join($items[value = $selected]/label, $separator)"/>
+                            <!-- Add tabindex so the element doesn't steal the focus on Firefox when styled with overflow-y: scroll.
+                                 This isn't done by default, but can be done by the application, as is the case in the test-dialog-select.xthml -->
+                            <xforms:output value="string-join($items[value = $selected]/label, $separator)" tabindex="-1"/>
                         </xforms:group>
                         <xforms:group ref=".[$separator = 'ED9A0AC4-F526-ECCD-869A-D59A3AEDE4A8']">
                             <xhtml:ul>

diff --git a/src/resources/apps/xforms-sandbox/samples/test-dialog-select.xhtml b/src/resources/apps/xforms-sandbox/samples/test-dialog-select.xhtml
@@ -53,7 +53,7 @@
         <xhtml:style type="text/css">
             .with-comma .xbl-fr-dialog-select .xforms-label { vertical-align: top }
             .with-comma .xbl-fr-dialog-select .xbl-fr-button { vertical-align: top }
-            .with-comma .xbl-fr-dialog-select .xforms-output {
+            .with-comma .xbl-fr-dialog-select .xforms-output-output {
                 border: 1px solid #999; padding: 2px; display: inline-block;
                 margin: 0 .5em 0 1em; overflow-y: scroll; width: 10em; height: 5em;
                 background-color: #eee }
@@ -81,5 +81,7 @@
             </fr:dialog-select>
         </xhtml:div>
 
+        <xforms:output value="'  '"/>
+
     </xhtml:body>
 </xhtml:html>