Bug 958825: Use HTML5's attribute "autofocus" instead of onload="element.focus()"

r/a=justdave

13 files changed, 31 insertions, 62 deletions

diff --git a/template/en/default/account/auth/login.html.tmpl b/template/en/default/account/auth/login.html.tmpl
index 2d6a71f2d..27c0690af 100644
--- a/template/en/default/account/auth/login.html.tmpl
+++ b/template/en/default/account/auth/login.html.tmpl
@@ -15,8 +15,7 @@
 [% END %]
 
 [% PROCESS global/header.html.tmpl
-  title = "Log in to $terms.Bugzilla",
-  onload = "document.forms['login'].Bugzilla_login.focus()"
+  title = "Log in to $terms.Bugzilla"
 %]
 
 [% USE Bugzilla %]
@@ -40,7 +39,7 @@
       </th>
       <td>
         <input size="35" id="Bugzilla_login" name="Bugzilla_login"
-               [%- ' type="email"' UNLESS Param('emailsuffix') %]>
+               [%- ' type="email"' UNLESS Param('emailsuffix') %] autofocus>
         [% Param('emailsuffix') FILTER html %]
       </td>
     </tr>
diff --git a/template/en/default/account/create.html.tmpl b/template/en/default/account/create.html.tmpl
index 21d9251b5..1b5a4daa8 100644
--- a/template/en/default/account/create.html.tmpl
+++ b/template/en/default/account/create.html.tmpl
@@ -13,13 +13,9 @@
   # Param("emailsuffix") is used to pre-fill the email field.
   #%]
 
-[% title = BLOCK %]
-  Create a new [% terms.Bugzilla %] account
-[% END %]
-
 [% PROCESS global/header.html.tmpl
-           title = title
-           onload = "document.forms['account_creation_form'].login.focus();" %]
+           title = "Create a new $terms.Bugzilla account"
+%]
 
 <p>
   To create a [% terms.Bugzilla %] account, all you need to do is to enter
@@ -75,7 +71,7 @@
       Email address:
     [% END %]
   </span>
-  <input size="35" id="login" name="login"
+  <input size="35" id="login" name="login" autofocus
          [%- ' type="email"' UNLESS Param('emailsuffix') %]>
   [% Param('emailsuffix') FILTER html %]
   <input type="hidden" id="token" name="token" value="[% issue_hash_token(['create_account']) FILTER html %]">
diff --git a/template/en/default/account/email/confirm-new.html.tmpl b/template/en/default/account/email/confirm-new.html.tmpl
index 45ef5c81c..ec8d5a474 100644
--- a/template/en/default/account/email/confirm-new.html.tmpl
+++ b/template/en/default/account/email/confirm-new.html.tmpl
@@ -15,7 +15,7 @@
 [% title = BLOCK %]Create a new user account for '[% email FILTER html %]'[% END %]
 [% PROCESS "global/header.html.tmpl"
            title = title
-           onload = "document.forms['confirm_account_form'].realname.focus();" %]
+%]
 
 <p>
   To create your account, you must enter a password in the form below.
@@ -33,7 +33,7 @@
     </tr>
     <tr>
       <th><small><i>(OPTIONAL)</i></small> <label for="realname">Real Name</label>:</th>
-      <td><input type="text" id="realname" name="realname" value=""></td>
+      <td><input id="realname" name="realname" autofocus></td>
     </tr>
     <tr>
       <th><label for="passwd1">Type your password</label>:</th>
diff --git a/template/en/default/admin/milestones/create.html.tmpl b/template/en/default/admin/milestones/create.html.tmpl
index 78ef49a8a..d15e43d55 100644
--- a/template/en/default/admin/milestones/create.html.tmpl
+++ b/template/en/default/admin/milestones/create.html.tmpl
@@ -18,7 +18,6 @@
   title = title
   subheader = subheader
   style_urls = ['skins/standard/admin.css']
-  onload = "document.forms['f'].milestone.focus()"
 %]
 
 <form name="f" method="post" action="editmilestones.cgi">
@@ -26,12 +25,11 @@
     <tr>
       <th><label for="milestone">Milestone:</label></th>
       <td><input id="milestone" size="64" maxlength="64" name="milestone"
-                 value=""></td>
+                 autofocus></td>
     </tr>
     <tr>
       <th><label for="sortkey">Sortkey:</label></th>
-      <td><input id="sortkey" size="20" maxlength="20" name="sortkey"
-                 value=""></td>
+      <td><input id="sortkey" size="20" maxlength="20" name="sortkey"></td>
     </tr>
   </table>
   <input type="submit" id="create" value="Add">
diff --git a/template/en/default/admin/users/create.html.tmpl b/template/en/default/admin/users/create.html.tmpl
index 1ca2eb791..279c610a7 100644
--- a/template/en/default/admin/users/create.html.tmpl
+++ b/template/en/default/admin/users/create.html.tmpl
@@ -15,7 +15,6 @@
 [% PROCESS global/header.html.tmpl
   title = "Add user"
   style_urls = ['skins/standard/editusers.css']
-  onload = "document.forms['f'].login.focus()"
   doc_section = "useradmin.html#createnewusers"
 %]
 
diff --git a/template/en/default/admin/users/search.html.tmpl b/template/en/default/admin/users/search.html.tmpl
index a1bc2809c..97431bcad 100644
--- a/template/en/default/admin/users/search.html.tmpl
+++ b/template/en/default/admin/users/search.html.tmpl
@@ -18,7 +18,6 @@
 [% PROCESS global/header.html.tmpl
   title = "Search users"
   style_urls = ['skins/standard/editusers.css']
-  onload = "document.forms['f'].matchstr.focus()"
   doc_section = "useradmin.html#user-account-search"
 %]
 
@@ -35,7 +34,7 @@
   <option value="userid">user id</option>
 </select>
 <label for="matchstr">matching</label>
-<input size="32" name="matchstr" id="matchstr">
+<input size="32" name="matchstr" id="matchstr" autofocus>
 <select name="matchtype">
   <option value="substr" selected="selected">case-insensitive substring</option>
   <option value="regexp">case-insensitive regexp</option>
diff --git a/template/en/default/admin/users/userdata.html.tmpl b/template/en/default/admin/users/userdata.html.tmpl
index 78c5f0f28..8cdc767e4 100644
--- a/template/en/default/admin/users/userdata.html.tmpl
+++ b/template/en/default/admin/users/userdata.html.tmpl
@@ -22,7 +22,8 @@
   <td>
     [% IF editusers %]
       <input size="64" maxlength="255" id="login" name="login"
-             value="[% otheruser.login FILTER html %]">
+             value="[% otheruser.login FILTER html %]"
+             [%- " autofocus" UNLESS editform %]>
       [% IF editform %]
         [% IF !otheruser.in_group('bz_sudo_protect') %]
           <br>
diff --git a/template/en/default/attachment/choose.html.tmpl b/template/en/default/attachment/choose.html.tmpl
index 9a82d7c86..f20facd90 100644
--- a/template/en/default/attachment/choose.html.tmpl
+++ b/template/en/default/attachment/choose.html.tmpl
@@ -7,13 +7,12 @@
   #%]
 
 [% PROCESS global/header.html.tmpl
-   title = "Locate or Create Attachment",
-   onload = "document.forms['choose-id'].id.focus()"
- %]
+   title = "Locate or Create Attachment"
+%]
 
 <form name="choose-id" method="get" action="attachment.cgi">
   <p>Access an attachment by entering its ID into the form below:</p>
-  <p>Attachment ID: <input name="id" size="6">
+  <p>Attachment ID: <input name="id" size="6" autofocus required>
   <button name="action" value="edit" id="edit">Details</button>
   <button name="action" value="view" id="view">View</button>
   </p>
@@ -21,14 +20,14 @@
 
 <form method="get" action="show_bug.cgi">
   <p>Or, Access it from the list of attachments in its associated [% terms.bug %] report:</p>
-  <p>[% terms.Bug %] ID: <input name="id" size="6">
+  <p>[% terms.Bug %] ID: <input name="id" size="6" required>
   <input type="submit" name="action" value="View" id="action">
   </p>
 </form>
 
 <form method="get" action="attachment.cgi">
   <p>Or, Create a new attachment by entering its [% terms.bug %] Id below:</p>
-  <p>[% terms.Bug %] ID: <input name="bugid" size="6">
+  <p>[% terms.Bug %] ID: <input name="bugid" size="6" required>
     <button name="action" value="enter" id="action">New Attachment</button>
   </p>
 </form>
diff --git a/template/en/default/bug/create/create-guided.html.tmpl b/template/en/default/bug/create/create-guided.html.tmpl
index 64bacf0b1..7f9e5179f 100644
--- a/template/en/default/bug/create/create-guided.html.tmpl
+++ b/template/en/default/bug/create/create-guided.html.tmpl
@@ -223,9 +223,10 @@ function PutDescription() {
     <th>Details</th>
     <td>
       [% INCLUDE global/textarea.html.tmpl
-        name    = 'comment'
-        minrows = 6
-        cols    = constants.COMMENT_COLS
+        name      = 'comment'
+        minrows   = 6
+        cols      = constants.COMMENT_COLS
+        mandatory = 1
       %]
       <p>
         Expand on the Summary. Please be
@@ -379,11 +380,7 @@ function PutDescription() {
 <h3 id="step3">Step 3 of 3 - submit the [% terms.bug %] report</h3>
 
 <p>
-  <input type="submit" id="report" value="    Submit [% terms.Bug %] Report    "
-   onclick="if (this.form.comment.value == '')
-   { alert('Please enter some details about this [% terms.bug %].');
-     this.form.comment.focus();
-     return false; } return true;">
+  <input type="submit" id="report" value="Submit [% terms.Bug %] Report">
 </p>
 
 <p>
diff --git a/template/en/default/bug/summarize-time.html.tmpl b/template/en/default/bug/summarize-time.html.tmpl
index 3865c02a2..c3c233494 100644
--- a/template/en/default/bug/summarize-time.html.tmpl
+++ b/template/en/default/bug/summarize-time.html.tmpl
@@ -261,7 +261,7 @@
       <label accesskey="s" for="start_date">Period <u>s</u>tarting</label>:
     </th>
     <td>
-      <input type="text" id="start_date" name="start_date" size="10"
+      <input id="start_date" name="start_date" size="10" autofocus
              value="[% start_date FILTER html %]" maxlength="10"
              onchange="updateCalendarFromField(this)">
       <button type="button" class="calendar_button" id="button_calendar_start_date"
@@ -323,7 +323,6 @@
   <!--
     [%+ PROCESS "global/calendar.js.tmpl" id = 'start_date' %]
     [% PROCESS "global/calendar.js.tmpl" id = 'end_date' %]
-    document.forms['summary'].start_date.focus();
   //-->
 </script>
 <hr>
diff --git a/template/en/default/global/textarea.html.tmpl b/template/en/default/global/textarea.html.tmpl
index bc5fd6311..f3e23dd3f 100644
--- a/template/en/default/global/textarea.html.tmpl
+++ b/template/en/default/global/textarea.html.tmpl
@@ -46,7 +46,7 @@
             onFocus="this.rows=[% maxrows FILTER html %]"
           [% END %]
           [% IF mandatory %]
-            aria-required="true"
+            aria-required="true" required
           [% END %]
           [% IF onchange %]
             onchange="[% onchange FILTER html %]"
diff --git a/template/en/default/pages/quicksearch.html.tmpl b/template/en/default/pages/quicksearch.html.tmpl
index 6f9074732..78634b041 100644
--- a/template/en/default/pages/quicksearch.html.tmpl
+++ b/template/en/default/pages/quicksearch.html.tmpl
@@ -8,8 +8,7 @@
 
 [% INCLUDE global/header.html.tmpl
    title  = "$terms.Bugzilla QuickSearch",
-   style_urls = ['skins/standard/page.css']         
-   onload = 'document.forms[\'f\'].quicksearch.focus()'
+   style_urls = ['skins/standard/page.css']
  %]
 
 [% USE Bugzilla %]
@@ -17,11 +16,8 @@
 <p><label for="quicksearch">Type in one or more words (or pieces of words)
   to search for:</label></p>
 
-<form name="f" action="buglist.cgi" method="get"
-      onsubmit="if (this.quicksearch.value == '')
-                { alert('Please enter one or more search terms first.');
-                  return false; } return true;">
-  <input type="text" size="40" name="quicksearch" id="quicksearch">
+<form name="f" action="buglist.cgi" method="get">
+  <input size="40" name="quicksearch" id="quicksearch" autofocus required>
   <input type="submit" value="Search" id="find">
 </form>
 
diff --git a/template/en/default/search/search-specific.html.tmpl b/template/en/default/search/search-specific.html.tmpl
index e3fd9ef5a..54a769b81 100644
--- a/template/en/default/search/search-specific.html.tmpl
+++ b/template/en/default/search/search-specific.html.tmpl
@@ -91,28 +91,14 @@ for "crash secure SSL flash".
       <label for="content">Words:</label>
     </th>
     <td>
-      <input name="content" size="40" id="content"
-             value="[% default.content.0 FILTER html %]">
-      <script type="text/javascript"> <!--
-          document.forms['queryform'].content.focus(); 
-      // -->
-      </script>
+      <input name="content" size="40" id="content" autofocus
+             value="[% default.content.0 FILTER html %]"
+             [%- " required" UNLESS Param('search_allow_no_criteria') %]>
     </td>
   </tr>
   <tr>
     <td></td>
-    <td>
-    
-      [% IF Param('search_allow_no_criteria') %]
-        <input type="submit" id="search" value="Search">
-      [% ELSE %]
-        <input type="submit" id="search" value="Search"
-             onclick="if (this.form.content.value == '')
-                      {alert('The Words field cannot be empty. You have to ' +
-                             'enter at least one word in your search criteria.');
-                       return false;} return true;">
-      [% END %]
-    </td>
+    <td><input type="submit" id="search" value="Search"></td>
   </tr>
 </table>
 </form>