Bug 1280363 - [a11y] Make the Actions menu button accessible for keyboard and screen readers

1 files changed, 35 insertions, 13 deletions

diff --git a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
index c658f0642..49817b6a1 100644
--- a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
@@ -14,21 +14,43 @@
   [% END %]
   <button type="button" id="comment-tags-btn" style="display:none" class="minor">Tags &#9662;</button>
   <button type="button" id="view-menu-btn" class="minor">View &#9662;</button>
+  <div class="dropdown">
+    <button type="button" role="button" id="comment-tags-btn" arai-haspopup="true" aria-label="Tags Menu"
+      aria-expanded="false" aria-controls="comment-tags-menu" class="dropdown-button minor">Tags &#9662;</button>
+    <ul id="comment-tags-menu" role="menu" tabindex="0" class="dropdown-content" style="display:none">
+      <li class="dropdown-separator" role="presentation">
+        <a role="menuitem" tabindex="-1" data-comment-tag="">Reset</a>
+      </li>
+    </ul>
+  </div>
+  <div class="dropdown">
+    <button type="button" role="button" id="view-menu-btn" arai-haspopup="true" aria-label="View Menu"
+      aria-expanded="false" aria-controls="view-menu" class="dropdown-button minor">View &#9662;</button>
+    <ul id="view-menu" role="menu" tabindex="0" class="dropdown-content" style="display:none">
+      <li class="dropdown-separator" role="presentation">
+        <a id="view-reset" role="menuitem" tabindex="-1">Reset</a>
+      </li>
+      <li role="presentation">
+        <a id="view-collapse-all" role="menuitem" tabindex="-1">Collapse All</a>
+      </li>
+      <li role="presentation">
+        <a id="view-expand-all" role="menuitem" tabindex="-1">Expand All</a>
+      </li>
+      <li class="dropdown-separator" role="presentation">
+        <a id="view-comments-only" role="menuitem" tabindex="-1">Comments Only</a>
+      </li>
+      <li role="presentation">
+        <a id="view-toggle-cc" role="menuitem" tabindex="-1">Show CC Changes</a>
+      </li>
+      [% IF treeherder %]
+        <li role="presentation">
+          <a id="view-toggle-treeherder" role="menuitem" data-userid="[% treeherder.id FILTER none %]">Hide Treeherder Comments</a>
+        </li>
+      [% END %]
+    </ul>
+   </div>
 </div>
 
-<menu id="view-menu" type="context" style="display:none">
-  <menuitem id="view-reset" label="Reset"></menuitem>
-  <hr>
-  <menuitem id="view-collapse-all" label="Collapse All"></menuitem>
-  <menuitem id="view-expand-all" label="Expand All"></menuitem>
-  <menuitem id="view-comments-only" label="Comments Only"></menuitem>
-  <hr>
-  <menuitem id="view-toggle-cc" label="Show CC Changes"></menuitem>
-  [% IF treeherder %]
-    <menuitem id="view-toggle-treeherder" label="Hide Treeherder Comments" data-userid="[% treeherder.id FILTER none %]"></menuitem>
-  [% END %]
-</menu>
-
 [%
   PROCESS bug/time.html.tmpl;