Fix #2162 "Missing screen reader for button with menus"

- support xf:trigger/@ROLE to place role on generated control - patch bootstrap-dropdown.js to add/remove aria-expanded (already done in Bootstrap 3) - update Home page, grid, section, and repeater - use aria-expanded - use role="menuitem|presentation"
orbeon · Apr 3, 2015 · eab78ad · eab78ad
1 parent de3597f
commit eab78ad
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 83 deletions.
diff --git a/src/main/java/org/orbeon/oxf/xforms/processor/handlers/XFormsBaseHandler.java b/src/main/java/org/orbeon/oxf/xforms/processor/handlers/XFormsBaseHandler.java
@@ -123,6 +123,12 @@ public static void handleAccessibilityAttributes(Attributes srcAttributes, Attri
             if (value != null)
                 destAttributes.addAttribute("", "accesskey", "accesskey", XMLReceiverHelper.CDATA, value);
         }
+        // Handle "role"
+        {
+            final String value = srcAttributes.getValue("role");
+            if (value != null)
+                destAttributes.addAttribute("", "role", "role", XMLReceiverHelper.CDATA, value);
+        }
     }
 
     public static void handleAriaAttributes(boolean required, boolean valid, AttributesImpl destAttributes) {

diff --git a/src/resources-packaged/xbl/orbeon/grid/grid.xbl b/src/resources-packaged/xbl/orbeon/grid/grid.xbl
@@ -45,26 +45,26 @@
         <!-- Keep a single global copy of the grid row menu. It is moved around as needed. -->
         <xxbl:global>
             <div class="dropdown fr-grid-dropdown-menu" xmlns="http://www.w3.org/1999/xhtml">
-                <button class="btn btn-mini dropdown-toggle xforms-hidden" data-toggle="dropdown" tabindex="-1">
+                <button class="btn btn-mini dropdown-toggle xforms-hidden" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
                     <span class="caret"/>
                 </button>
                 <ul class="dropdown-menu" role="menu">
-                    <li class="fr-insert-above">
-                        <a tabindex="-1" href="#"><i class="icon-chevron-up"/><xf:output value="xxf:r('components.grid.insert-above', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="fr-insert-above">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-chevron-up"/><xf:output value="xxf:r('components.grid.insert-above', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="fr-insert-below">
-                        <a tabindex="-1" href="#"><i class="icon-chevron-down"/><xf:output value="xxf:r('components.grid.insert-below', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="fr-insert-below">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-chevron-down"/><xf:output value="xxf:r('components.grid.insert-below', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="divider"/>
-                    <li class="fr-move-up">
-                        <a tabindex="-1" href="#"><i class="icon-arrow-up"/><xf:output value="xxf:r('components.grid.move-up', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="divider"/>
+                    <li role="presentation" class="fr-move-up">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-arrow-up"/><xf:output value="xxf:r('components.grid.move-up', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="fr-move-down">
-                        <a tabindex="-1" href="#"><i class="icon-arrow-down"/><xf:output value="xxf:r('components.grid.move-down', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="fr-move-down">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-arrow-down"/><xf:output value="xxf:r('components.grid.move-down', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="divider"/>
-                    <li class="fr-remove">
-                        <a tabindex="-1" href="#"><i class="icon-minus-sign"/><xf:output value="xxf:r('components.grid.remove', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="divider"/>
+                    <li role="presentation" class="fr-remove">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-minus-sign"/><xf:output value="xxf:r('components.grid.remove', 'fr-fr-resources')"/></a>
                     </li>
                 </ul>
             </div>
@@ -463,7 +463,10 @@
                         <xsl:if test="$is-repeat and not($readonly) and $static-row-pos = 1">
                             <xh:td class="fr-repeat-column-trigger" rowspan="{$static-row-count}" xxf:control="true" ref=".[not($view-mode)]">
                                 <xh:div class="dropdown">
-                                    <xh:button class="btn btn-mini fr-grid-dropdown-button">
+                                    <xh:button
+                                        class="btn btn-mini fr-grid-dropdown-button"
+                                        aria-label="{{xxf:r('components.grid.menu', '|fr-fr-resources|')}}"
+                                        aria-expanded="false">
                                         <xh:span class="caret"/>
                                     </xh:button>
                                 </xh:div>

diff --git a/src/resources-packaged/xbl/orbeon/repeater/repeater.xbl b/src/resources-packaged/xbl/orbeon/repeater/repeater.xbl
@@ -42,26 +42,26 @@
         <!-- Keep a single global copy of the repeat menu. It is moved around as needed. -->
         <xxbl:global>
             <div class="dropdown fr-repeater-dropdown-menu" xmlns="http://www.w3.org/1999/xhtml">
-                <button class="btn btn-mini dropdown-toggle xforms-hidden" data-toggle="dropdown" tabindex="-1">
+                <button class="btn btn-mini dropdown-toggle xforms-hidden" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
                     <span class="caret"/>
                 </button>
                 <ul class="dropdown-menu" role="menu">
-                    <li class="fr-insert-above">
-                        <a tabindex="-1" href="#"><i class="icon-chevron-up"/><xf:output value="xxf:r('components.grid.insert-above', 'fr-fr-resources')"/></a>
+                    <li role="presentation"  class="fr-insert-above">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-chevron-up"/><xf:output value="xxf:r('components.grid.insert-above', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="fr-insert-below">
-                        <a tabindex="-1" href="#"><i class="icon-chevron-down"/><xf:output value="xxf:r('components.grid.insert-below', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="fr-insert-below">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-chevron-down"/><xf:output value="xxf:r('components.grid.insert-below', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="divider"/>
-                    <li class="fr-move-up">
-                        <a tabindex="-1" href="#"><i class="icon-arrow-up"/><xf:output value="xxf:r('components.grid.move-up', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="divider"/>
+                    <li role="presentation" class="fr-move-up">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-arrow-up"/><xf:output value="xxf:r('components.grid.move-up', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="fr-move-down">
-                        <a tabindex="-1" href="#"><i class="icon-arrow-down"/><xf:output value="xxf:r('components.grid.move-down', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="fr-move-down">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-arrow-down"/><xf:output value="xxf:r('components.grid.move-down', 'fr-fr-resources')"/></a>
                     </li>
-                    <li class="divider"/>
-                    <li class="fr-remove">
-                        <a tabindex="-1" href="#"><i class="icon-minus-sign"/><xf:output value="xxf:r('components.grid.remove', 'fr-fr-resources')"/></a>
+                    <li role="presentation" class="divider"/>
+                    <li role="presentation" class="fr-remove">
+                        <a role="menuitem" tabindex="-1" href="#"><i class="icon-minus-sign"/><xf:output value="xxf:r('components.grid.remove', 'fr-fr-resources')"/></a>
                     </li>
                 </ul>
             </div>

diff --git a/src/resources-packaged/xbl/orbeon/section/section.xbl b/src/resources-packaged/xbl/orbeon/section/section.xbl
@@ -123,7 +123,10 @@
                                                     <fr:repeater ref="*" xbl:attr="template origin min max remove-constraint">
                                                         <xsl:if test="not($readonly)">
                                                             <xh:div xxf:control="true" ref=".[not($view-mode)]" class="fr-repeat-menu dropdown">
-                                                                <xh:button class="btn btn-mini fr-repeater-dropdown-button">
+                                                                <xh:button
+                                                                    class="btn btn-mini fr-repeater-dropdown-button"
+                                                                    aria-label="{{xxf:r('components.grid.menu', '|fr-fr-resources|')}}"
+                                                                    aria-expanded="false">
                                                                     <xh:span class="caret"/>
                                                                 </xh:button>
                                                             </xh:div>