From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Wed, 26 Jun 2019 18:41:18 +0000 (-0400)
Subject: Bug 1558096 - [a11y] Fix remaining accessibility issues on modal UI
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a31f63cb6fc863c2c827cd8aa1dd6f3c12212241;p=thirdparty%2Fbugzilla.git

Bug 1558096 - [a11y] Fix remaining accessibility issues on modal UI
---

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 5d33e8649..29824419f 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
@@ -8,12 +8,12 @@
 
 <div id="comment-actions">
   [% IF user.id && user.settings.comment_box_position.value == 'after_comments' %]
-    <button type="button" id="add-comment-btn" class="secondary">Add Comment &darr;</button>
+    <button type="button" id="add-comment-btn" class="secondary" aria-label="Add Comment">Add Comment &darr;</button>
   [% ELSE %]
-    <button type="button" id="bottom-btn" class="secondary">Bottom &darr;</button>
+    <button type="button" id="bottom-btn" class="secondary" aria-label="Go to Page Bottom">Bottom &darr;</button>
   [% END %]
   <div class="dropdown">
-    <button type="button" id="comment-tags-btn" arai-haspopup="true" aria-label="Tags Menu"
+    <button type="button" id="comment-tags-btn" aria-haspopup="true" aria-label="Tags"
       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 left" style="display:none">
       <li role="presentation">
@@ -22,7 +22,7 @@
     </ul>
   </div>
   <div class="dropdown">
-    <button type="button" id="view-menu-btn" arai-haspopup="true" aria-label="View Menu"
+    <button type="button" id="view-menu-btn" aria-haspopup="true" aria-label="View"
       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 left" style="display:none">
       <li role="presentation">
@@ -84,11 +84,11 @@
   <div id="ctag" style="display:none">
     <input id="ctag-add" size="10" placeholder="add tag"
       maxlength="[% constants.MAX_COMMENT_TAG_LENGTH FILTER html %]">
-    <button type="button" id="ctag-close" class="minor">X</button>
+    <button type="button" id="ctag-close" class="minor" aria-label="Close">x</button>
     <a href="https://wiki.mozilla.org/BMO/comment_tagging" target="_blank" rel="noopener noreferrer" title="About Comment Tagging">Help</a>
   </div>
   <div id="ctag-error" style="display:none">
-    <a href="#" class="close-btn" data-for="ctag-error">x</a>
+    <a href="#" class="close-btn" data-for="ctag-error" aria-label="Close">x</a>
     <span id="ctag-error-message"></span>
   </div>
 [% END %]
@@ -98,7 +98,7 @@
        data-tags="[% comment.tags.join(' ') FILTER html %]">
     [%# normal comment header %]
     <table class="layout-table change-head [% extra_class FILTER none %]" id="ch-[% comment.count FILTER none %]"
-      [% IF comment.collapsed +%] style="display:none"[% END %]>
+      [% IF comment.collapsed +%] style="display:none"[% END %] role="presentation">
       <tr>
         <td rowspan="2" class="change-gravatar">
           [% INCLUDE bug_modal/user.html.tmpl
@@ -130,28 +130,26 @@
               <input type="checkbox" name="isprivate_[% comment.id FILTER none %]"
                   id="is-private-[% comment.id FILTER none %]"
                   class="is-private" value="1" [%= "checked" IF comment.is_private %]>
-              <label for="is-private-[% comment.id FILTER none %]">Private</label>
+              <label for="is-private-[% comment.id FILTER none %]" aria-label="Mark as Private">Private</label>
             </div>
           [% END %]
           [% Hook.process('comment_action', 'bug_modal/activity_stream.html.tmpl') %]
           [% IF user.id %]
             [% IF user.can_tag_comments %]
-              <button type="button" class="tag-btn minor iconic" title="Add a tag to this comment" aria-label="Tag"
+              <button type="button" class="tag-btn minor iconic" aria-label="Tag"
                       data-id="[% comment.id FILTER none %]" data-no="[% comment.count FILTER none %]">
                 <span class="icon" aria-hidden="true"></span>
               </button>
             [% END %]
-            <button type="button" class="reply-btn minor iconic" title="Reply to this comment" aria-label="Reply"
-                    [% 'disabled' IF !comment.body %]
+            <button type="button" class="reply-btn minor iconic" aria-label="Reply" [% 'disabled' IF !comment.body %]
                     data-id="[% comment.id FILTER none %]" data-no="[% comment.count FILTER none %]"
                     data-reply-name="[% comment.author.name || comment.author.nick FILTER html %]">
               <span class="icon" aria-hidden="true"></span>
             </button>
           [% END %]
           <button type="button" class="change-spinner minor iconic" id="cs-[% comment.count FILTER none %]"
-                  title="Collapse this comment" aria-label="Collapse" aria-expanded="true"
-                  data-strings='{ "collapse_label": "Collapse", "collapse_tooltip": "Collapse this comment",
-                                  "expand_label": "Expanded", "expand_tooltip": "Expanded this comment" }'>
+                  aria-label="Collapse" aria-expanded="true"
+                  data-strings='{ "collapse_label": "Collapse", "expand_label": "Expanded" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
         </div></td>
@@ -176,7 +174,7 @@
         <td colspan="2" class="comment-tags">
           [% FOREACH tag IN comment.tags ~%]
             <span class="comment-tag">
-              [%~ "<a>x</a>" IF user.can_tag_comments %][% tag FILTER html ~%]
+              [%~ '<a role="button" aria-label="Remove">x</a>' IF user.can_tag_comments %][% tag FILTER html ~%]
             </span>
           [%~ END %]
         </td>
@@ -185,7 +183,8 @@
 
     [%# default-collapsed comment header %]
     [% IF comment.collapsed %]
-      <table class="layout-table change-head default-collapsed" id="cc-[% comment.count FILTER none %]">
+      <table class="layout-table change-head default-collapsed" id="cc-[% comment.count FILTER none %]"
+             role="presentation">
       <tr>
         <td class="comment-collapse-reason"
             [% IF user.setting("ui_use_absolute_time") == "on" %]
@@ -197,11 +196,9 @@
         </td>
         <td class="comment-actions">
           <button type="button" class="change-spinner minor iconic" id="ccs-[% comment.count FILTER none %]"
-                  title="[% comment.collapsed ? 'Expand this comment' : 'Collapse this comment' %]"
                   aria-label="[% comment.collapsed ? 'Expand' : 'Collapse' %]"
                   aria-expanded="[% comment.collapsed ? 'false' : 'true' %]"
-                  data-strings='{ "collapse_label": "Collapse", "collapse_tooltip": "Collapse this comment",
-                                  "expand_label": "Expanded", "expand_tooltip": "Expanded this comment" }'>
+                  data-strings='{ "collapse_label": "Collapse", "expand_label": "Expanded" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
         </td>
@@ -214,7 +211,7 @@
 [% BLOCK activity_header %]
   [% action = activities.0 %]
   <div class="change" id="a[% id FILTER none %]">
-    <table class="layout-table change-head [% extra_class FILTER none %]">
+    <table class="layout-table change-head [% extra_class FILTER none %]" role="presentation">
       <tr>
         <td rowspan="2" class="change-gravatar">
           [% INCLUDE bug_modal/user.html.tmpl
@@ -234,9 +231,8 @@
         </td>
         <td rowspan="2" class="comment-actions"><div role="group">
           <button type="button" class="change-spinner minor iconic" id="as-[% id FILTER none %]"
-                  title="Collapse this change" aria-label="Collapse" aria-expanded="true"
-                  data-strings='{ "collapse_label": "Collapse", "collapse_tooltip": "Collapse this change",
-                                  "expand_label": "Expanded", "expand_tooltip": "Expanded this change" }'>
+                  aria-label="Collapse" aria-expanded="true"
+                  data-strings='{ "collapse_label": "Collapse", "expand_label": "Expanded" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
         </div></td>
diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
index a4289a4bc..058599c68 100644
--- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -162,8 +162,8 @@
 
 [%# === header === %]
 
-<div id="xhr-error" style="display:none"></div>
-<div id="floating-message" style="display:none">
+<div role="status" id="xhr-error" style="display:none"></div>
+<div role="status" id="floating-message" style="display:none">
   <div id="floating-message-text"></div>
 </div>
 
@@ -286,7 +286,7 @@
   <div id="mode-container">
     <div>
       [% IF user.id %]
-        <button type="button" id="cancel-btn" class="secondary" style="display:none">Cancel</button>
+        <button type="button" id="cancel-btn" class="secondary" style="display:none" aria-label="Cancel Editing">Cancel</button>
         <button type="button" id="mode-btn" class="primary">
           <span id="mode-btn-readonly" title="Enable editing fields for [% terms.bug %] metadata">Edit [% terms.Bug %]</span>
           <span id="mode-btn-loading">
@@ -309,7 +309,7 @@
         </button>
       [% END %]
       <div class="dropdown">
-        <button type="button" id="action-menu-btn" aria-haspopup="true" aria-label="Actions Menu"
+        <button type="button" id="action-menu-btn" aria-haspopup="true" aria-label="Actions"
           aria-expanded="false" aria-controls="action-menu" class="dropdown-button minor">&#9662;</button>
         <ul class="dropdown-content left" id="action-menu" role="menu" style="display:none;">
           <li role="presentation">
@@ -412,8 +412,9 @@
             hidden        = 1
             throbber      = "product-throbber"
         %]
-        <button id="product-search" type="button" class="secondary">Search</button>
-        <button id="product-search-cancel" type="button" class="secondary" style="display:none">X</button>
+        <button id="product-search" type="button" class="secondary" aria-label="Search Component">Search</button>
+        <button id="product-search-cancel" type="button" class="secondary" style="display:none"
+                aria-label="Stop Searching Component">x</button>
         <img id="product-throbber" src="[% basepath FILTER none %]extensions/BugModal/web/throbber.gif"
           width="16" height="11" style="display:none">
         <img id="product-search-error" class="tt" src="[% basepath FILTER none %]extensions/BugModal/web/error.png"
@@ -786,7 +787,7 @@
       [% END %]
 
       [% IF user.id %]
-        <button type="button" id="add-cc-btn" class="secondary">Add</button>
+        <button type="button" id="add-cc-btn" class="secondary" aria-label="Add Subscriber">Add</button>
       [% END %]
 
       [% IF bug.cc && bug.cc.size %]
@@ -1227,16 +1228,17 @@
     [% IF user.id %]
       <div id="user-story-actions">
         [% IF bug.check_can_change_field('cf_user_story', 0, 1) %]
-          <button type="button" class="secondary" id="user-story-edit-btn">Edit</button>
+          <button type="button" class="secondary" id="user-story-edit-btn" aria-label="Edit User Story">Edit</button>
         [% END %]
         [% IF bug.cf_user_story != "" && bug.check_can_change_field('longdesc', 0, 1) %]
-          <button type="button" class="secondary" id="user-story-reply-btn">Reply</button>
+          <button type="button" class="secondary" id="user-story-reply-btn" aria-label="Reply to User Story">Reply</button>
         [% END %]
       </div>
     [% END %]
     <pre id="user-story">[% bug.cf_user_story FILTER quoteUrls(bug) %]</pre>
     [% IF user.id %]
-      <textarea id="cf_user_story" name="cf_user_story" style="display:none" rows="10" cols="80">
+      <textarea id="cf_user_story" name="cf_user_story" style="display:none" rows="10" cols="80"
+                aria-label="User Story">
         [%~ bug.cf_user_story FILTER html ~%]
       </textarea>
     [% END %]
@@ -1396,9 +1398,9 @@
 
 <div id="bottom-actions">
   <div id="bottom-right-actions">
-    <button type="button" id="top-btn" class="secondary">Top &uarr;</button>
+    <button type="button" id="top-btn" class="secondary" aria-label="Go to Page Top">Top &uarr;</button>
     <div class="dropdown">
-      <button type="button" id="format-btn" aria-haspopup="true" aria-label="Format [% terms.Bug %] Menu"
+      <button type="button" id="format-btn" aria-haspopup="true" aria-label="Format [% terms.Bug %]"
         aria-expanded="false" aria-controls="format-menu" class="dropdown-button minor">Format [% terms.Bug %] &#9652;</button>
       <ul class="dropdown-content left menu-up" id="format-menu" role="menu" style="display:none;">
         <li role="presentation">
@@ -1413,7 +1415,7 @@
     </div>
     [% IF user.id %]
       <div class="dropdown">
-        <button type="button" id="new-bug-btn" aria-haspopup="true" aria-label="New/Clone [% terms.Bug %] Menu"
+        <button type="button" id="new-bug-btn" aria-haspopup="true" aria-label="New/Clone [% terms.Bug %]"
           aria-expanded="false" aria-controls="new-bug-menu" class="dropdown-button minor">New/Clone [% terms.Bug %] &#9652;</button>
         <ul class="dropdown-content left menu-up" id="new-bug-menu" role="menu" style="display:none;">
           <li role="presentation">
@@ -1498,7 +1500,8 @@
                 seen_header = 1;
                 " Resolve as ";
               END;
-              %] <button type="button" class="secondary resolution-btn">[% resolution FILTER html %]</button> [%
+              %] <button type="button" class="secondary resolution-btn"
+                    aria-label="[% 'Resolve as ' _ resolution FILTER html %]">[% resolution FILTER html %]</button> [%
             END;
           ELSE;
             IF bug.choices.bug_status.only("name", "VERIFIED").size && bug.bug_status != "VERIFIED";
diff --git a/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
index fa16ebe81..d37d0e933 100644
--- a/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
@@ -118,8 +118,8 @@ END;
     </div>
   [% END %]
 
-  [% IF aria_label.defined %]
-    [% aria_labelledby_html = BLOCK %]aria-label="[% aria_label FILTER html %]"[% END %]
+  [% IF !aria_labelledby_html && (aria_label.defined || label.defined) %]
+    [% aria_labelledby_html = BLOCK %]aria-label="[% aria_label || label FILTER html %]"[% END %]
   [% END %]
 
   [%# read-only html %]
@@ -392,8 +392,10 @@ END;
   [% END %]
 
   [% IF edit %]
-    <button type="button" id="[% name FILTER html %]-btn" class="bug-urls-btn minor">Add</button>
-    <input id="[% name FILTER html %]" name="[% name FILTER html %]" style="display:none">
+    <button type="button" id="[% name FILTER html %]-btn" class="bug-urls-btn minor"
+            aria-label="[% 'Add ' _ label FILTER html %]">Add</button>
+    <input id="[% name FILTER html %]" name="[% name FILTER html %]" style="display:none"
+           aria-label="[% label FILTER html %]">
   [% END %]
 [% END %]
 
diff --git a/extensions/BugModal/template/en/default/bug_modal/navigate.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/navigate.html.tmpl
index 40a610fce..df021631b 100644
--- a/extensions/BugModal/template/en/default/bug_modal/navigate.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/navigate.html.tmpl
@@ -14,7 +14,7 @@
   this_bug_idx = lsearch(last_bug_list, bug.id);
 %]
 
-<div id="search-nav">
+<nav id="search-nav" aria-labelledby="search-nav-label">
   <span id="search-nav-label">[% terms.Bug %] List:</span>
   ([% this_bug_idx + 1 %] of [% last_bug_list.size %])
   [% INCLUDE nav_link text="&#10096;&#10096; First" bug_id=last_bug_list.first %]
@@ -30,7 +30,7 @@
   [% END %]
   [% INCLUDE nav_link text="Last &#10097;&#10097;" bug_id=last_bug_list.last %]
   <a id="search-nav-reget" href="[% basepath FILTER none %]buglist.cgi?regetlastlist=[% search.id FILTER uri %]">Last search results</a>
-</div>
+</nav>
 
 [% BLOCK nav_link %]
   [% IF bug_id == "" %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
index 440a0b07c..023891203 100644
--- a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
@@ -26,7 +26,7 @@
     >
       <input type="checkbox" name="comment_is_private" id="add-comment-private-cb"
           value="1" comment_id="[% comment.count FILTER none %]">
-      <label for="add-comment-private-cb">Private</label>
+      <label for="add-comment-private-cb" aria-label="Mark as Private">Private</label>
     </div>
   [% END %]
 
diff --git a/extensions/BugModal/web/comments.js b/extensions/BugModal/web/comments.js
index 5378b3dad..ba7bd78f1 100644
--- a/extensions/BugModal/web/comments.js
+++ b/extensions/BugModal/web/comments.js
@@ -14,7 +14,6 @@ $(function() {
         const str = spinner.data('strings');
 
         spinner.attr({
-            'title': expanded ? str.collapse_tooltip : str.expand_tooltip,
             'aria-label': expanded ? str.collapse_label : str.expand_label,
             'aria-expanded': expanded,
         });
@@ -315,7 +314,7 @@ $(function() {
         $.each(tags, function() {
             var span = $('<span/>').addClass('comment-tag').text(this);
             if (BUGZILLA.user.can_tag) {
-                span.prepend($('<a>x</a>').click(deleteTag));
+                span.prepend($('<a role="button" aria-label="Remove">x</a>').click(deleteTag));
             }
             root.append(span);
         });
diff --git a/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl b/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl
index 8ef264ac9..490923b4b 100644
--- a/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl
+++ b/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl
@@ -17,6 +17,6 @@
     || comment.type == constants.CMT_ATTACHMENT_UPDATED;
 %]
 
-<button type="button" class="edit-btn minor iconic" title="Edit this comment" aria-label="Edit">
+<button type="button" class="edit-btn minor iconic" aria-label="Edit">
   <span class="icon" aria-hidden="true"></span>
 </button>
diff --git a/extensions/Needinfo/template/en/default/bug/needinfo.html.tmpl b/extensions/Needinfo/template/en/default/bug/needinfo.html.tmpl
index dc03248bc..10da2cc6b 100644
--- a/extensions/Needinfo/template/en/default/bug/needinfo.html.tmpl
+++ b/extensions/Needinfo/template/en/default/bug/needinfo.html.tmpl
@@ -183,14 +183,12 @@ $(function() {
         <input type="checkbox" name="needinfo" id="needinfo" value="1">
       </td>
       <td>
-        <label for="needinfo" id="needinfo_from_label">
-          Request information from
-        </label>
-        <select name="needinfo_type" id="needinfo_type" style="display:none;">
+        <label for="needinfo" id="needinfo_from_label">Request information</label> from
+        <select name="needinfo_type" id="needinfo_type" style="display:none;" aria-label="Request info actions">
           <option value="needinfo_from" selected="true">Need more information from</option>
           <option value="redirect_to">Redirect needinfo request to</option>
         </select>
-        <select name="needinfo_role" id="needinfo_role">
+        <select name="needinfo_role" id="needinfo_role" aria-label="Request info from">
           <option value="other">other</option>
           [% IF NOT bug.reporter.needinfo_blocked %]
             <option
diff --git a/template/en/default/global/userselect.html.tmpl b/template/en/default/global/userselect.html.tmpl
index 6f59e3702..218ed1ac5 100644
--- a/template/en/default/global/userselect.html.tmpl
+++ b/template/en/default/global/userselect.html.tmpl
@@ -98,5 +98,6 @@
     [% IF mandatory %] required [% END %]
     [% IF multiple %] data-multiple="1" [% END %]
     [% IF request_type %] data-request-type="[% request_type FILTER html %]" [% END %]
+    [% IF aria_labelledby %] aria-labelledby="[% aria_labelledby FILTER html %]" [% END %]
   >
 [% END %]