Bug 1339775 - Add role="checkbox" for specially styled in-content checkboxes. r?jaws draft
authorMike Conley <mconley@mozilla.com>
Thu, 23 Mar 2017 00:05:03 -0400
changeset 503355 6140faf387f99536f6e77871dc68021e38bed064
parent 503306 7513b3f42058e9bcf9950d4acf4647d4ad2240f0
child 550403 ba2409e2a4ee197c1a3848572a3e413ae210ef4d
push id50552
push usermconley@mozilla.com
push dateThu, 23 Mar 2017 04:19:47 +0000
reviewersjaws
bugs1339775
milestone55.0a1
Bug 1339775 - Add role="checkbox" for specially styled in-content checkboxes. r?jaws MozReview-Commit-ID: IZhRECggz4j
browser/base/content/aboutNetError.xhtml
browser/base/content/aboutTabCrashed.xhtml
devtools/client/aboutdebugging/components/addons/controls.js
toolkit/components/aboutperformance/content/aboutPerformance.xhtml
toolkit/content/aboutNetworking.xhtml
--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -625,17 +625,17 @@
       <div id="netErrorButtonContainer" class="button-container">
         <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
       </div>
 
       <!-- UI for option to report certificate errors to Mozilla. Removed on
            init for other error types .-->
       <div id="certificateErrorReporting">
         <p class="toggle-container-with-text">
-          <input type="checkbox" id="automaticallyReportInFuture" />
+          <input type="checkbox" id="automaticallyReportInFuture" role="checkbox" />
           <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
         </p>
       </div>
 
       <div id="advancedPanelContainer">
         <div id="badCertAdvancedPanel" class="advanced-panel">
           <p id="badCertTechnicalInfo"/>
           <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
--- a/browser/base/content/aboutTabCrashed.xhtml
+++ b/browser/base/content/aboutTabCrashed.xhtml
@@ -44,43 +44,43 @@
 
       <div id="reportBox">
         <h2>&tabCrashed.requestHelp;</h2>
         <p>&tabCrashed.requestHelpMessage;</p>
 
         <h2>&tabCrashed.requestReport;</h2>
 
         <div class="checkbox-with-label">
-          <input type="checkbox" id="sendReport"/>
+          <input type="checkbox" id="sendReport" role="checkbox"/>
           <label for="sendReport">&tabCrashed.sendReport2;</label>
         </div>
 
         <ul id="options">
           <li>
             <textarea id="comments" placeholder="&tabCrashed.commentPlaceholder2;" rows="4"></textarea>
           </li>
 
           <li class="checkbox-with-label">
-            <input type="checkbox" id="includeURL"/>
+            <input type="checkbox" id="includeURL" role="checkbox"/>
             <label for="includeURL">&tabCrashed.includeURL2;</label>
           </li>
 
           <li id="requestEmail" hidden="true">
             <div class="checkbox-with-label">
-              <input type="checkbox" id="emailMe"/>
+              <input type="checkbox" id="emailMe" role="checkbox"/>
               <label for="emailMe">&tabCrashed.emailMe;</label>
             </div>
             <input type="text" id="email" placeholder="&tabCrashed.emailPlaceholder;"/>
           </li>
         </ul>
 
         <div id="requestAutoSubmit" hidden="true">
           <h2>&tabCrashed.requestAutoSubmit2;</h2>
           <div class="checkbox-with-label">
-            <input type="checkbox" id="autoSubmit"/>
+            <input type="checkbox" id="autoSubmit" role="checkbox"/>
             <label for="autoSubmit">&tabCrashed.autoSubmit2;</label>
           </div>
         </div>
       </div>
 
       <p id="reportSent">&tabCrashed.reportSent;</p>
 
       <div class="button-container">
--- a/devtools/client/aboutdebugging/components/addons/controls.js
+++ b/devtools/client/aboutdebugging/components/addons/controls.js
@@ -72,16 +72,17 @@ module.exports = createClass({
     return dom.div({ className: "addons-top" },
       dom.div({ className: "addons-controls" },
         dom.div({ className: "addons-options toggle-container-with-text" },
           dom.input({
             id: "enable-addon-debugging",
             type: "checkbox",
             checked: !debugDisabled,
             onChange: this.onEnableAddonDebuggingChange,
+            role: "checkbox",
           }),
           dom.label({
             className: "addons-debugging-label",
             htmlFor: "enable-addon-debugging",
             title: Strings.GetStringFromName("addonDebugging.tooltip")
           }, Strings.GetStringFromName("addonDebugging.label")),
           "(",
           dom.a({ href: MORE_INFO_URL, target: "_blank" },
--- a/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.xhtml
@@ -161,21 +161,21 @@
           <th>Process ID</th>
           <th title="RSS measures the pages resident in the main memory for the process">Resident Set Size</th>
           <th title="USS gives a count of unshared pages, unique to the process">Unique Set Size</th>
         </tr>
       </table>
     </div>
     <div class="options">
       <div class="toggle-container-with-text">
-        <input type="checkbox" checked="false" id="check-display-recent"></input>
+        <input type="checkbox" checked="false" id="check-display-recent" role="checkbox"></input>
         <label for="check-display-recent" id="label-display-recent">Display only the last few seconds.</label>
       </div>
       <div class="toggle-container-with-text">
-        <input type="checkbox" checked="true" id="check-autorefresh"></input>
+        <input type="checkbox" checked="true" id="check-autorefresh" role="checkbox"></input>
         <label for="check-autorefresh">Refresh automatically</label>
       </div>
     </div>
     <div>
       <h2>Performance of Add-ons</h2>
       <div id="addons" class="measuring">
       </div>
     </div>
--- a/toolkit/content/aboutNetworking.xhtml
+++ b/toolkit/content/aboutNetworking.xhtml
@@ -17,17 +17,17 @@
         <link rel="stylesheet" href="chrome://mozapps/skin/aboutNetworking.css" type="text/css" />
         <script type="application/javascript" src="chrome://global/content/aboutNetworking.js" />
     </head>
     <body id="body">
         <div id="warning_message" class="warningBackground" hidden="true">
             <div class="container">
                 <h1 class="title">&aboutNetworking.warning;</h1>
                 <div class="toggle-container-with-text">
-                    <input id="warncheck" type="checkbox" checked="yes" />
+                    <input id="warncheck" type="checkbox" checked="yes" role="checkbox" />
                     <label for="warncheck">&aboutNetworking.showNextTime;</label>
                 </div>
                 <div>
                     <button id="confpref" class="primary">&aboutNetworking.ok;</button>
                 </div>
             </div>
         </div>
         <div id="categories">
@@ -53,17 +53,17 @@
         </div>
         <div class="main-content">
             <div class="header">
                 <div id="sectionTitle" class="header-name">
                     &aboutNetworking.HTTP;
                 </div>
                 <div id="refreshDiv" class="toggle-container-with-text">
                     <button id="refreshButton">&aboutNetworking.refresh;</button>
-                    <input id="autorefcheck" type="checkbox" name="Autorefresh" />
+                    <input id="autorefcheck" type="checkbox" name="Autorefresh" role="checkbox" />
                     <label for="autorefcheck">&aboutNetworking.autoRefresh;</label>
                 </div>
             </div>
 
           <div id="http" class="tab active">
               <table>
                   <thead>
                       <tr>