8182263: Search box and reset button needs to be a11y fixed

Reviewed-by: jjg, ksrini

langtools/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/HtmlDocletWriter.java

@@ -624,12 +624,12 @@ public class HtmlDocletWriter extends HtmlDocWriter {
             ulAllClasses.addAttr(HtmlAttr.ID, allClassesId);
             subDiv.addContent(ulAllClasses);
             if (header && configuration.createindex) {
-                HtmlTree inputText = HtmlTree.INPUT("text", "search");
-                HtmlTree inputReset = HtmlTree.INPUT("reset", "reset");
-                Content searchTxt = new ContentBuilder();
-                searchTxt.addContent(configuration.getContent("doclet.search"));
-                searchTxt.addContent(Contents.SPACE);
-                HtmlTree liInput = HtmlTree.LI(HtmlTree.SPAN(searchTxt));
+                String searchValueId = "search";
+                String reset = "reset";
+                HtmlTree inputText = HtmlTree.INPUT("text", searchValueId, searchValueId);
+                HtmlTree inputReset = HtmlTree.INPUT(reset, reset, reset);
+                Content searchTxt = configuration.getContent("doclet.search");
+                HtmlTree liInput = HtmlTree.LI(HtmlTree.LABEL(searchValueId, searchTxt));
                 liInput.addContent(inputText);
                 liInput.addContent(inputReset);
                 HtmlTree ulSearch = HtmlTree.UL(HtmlStyle.navListSearch, liInput);

langtools/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlAttr.java

@@ -44,6 +44,7 @@ public enum HtmlAttr {
     COLS,
     CONTENT,
     DISABLED,
+    FOR,
     HREF,
     HTTP_EQUIV("http-equiv"),
     ID,

langtools/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlTag.java

@@ -67,6 +67,7 @@ public enum HtmlTag {
     IFRAME(BlockType.OTHER, EndTag.END),
     IMG(BlockType.INLINE, EndTag.NOEND),
     INPUT(BlockType.BLOCK, EndTag.NOEND),
+    LABEL(BlockType.INLINE, EndTag.END),
     LI,
     LISTING,
     LINK(BlockType.OTHER, EndTag.NOEND),

langtools/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlTree.java

@@ -474,17 +474,31 @@ public class HtmlTree extends Content {
      *
      * @param type the type of input
      * @param id id for the tag
+     * @param value value for the tag
      * @return an HtmlTree object for the INPUT tag
      */
-    public static HtmlTree INPUT(String type, String id) {
+    public static HtmlTree INPUT(String type, String id, String value) {
         HtmlTree htmltree = new HtmlTree(HtmlTag.INPUT);
         htmltree.addAttr(HtmlAttr.TYPE, nullCheck(type));
         htmltree.addAttr(HtmlAttr.ID, nullCheck(id));
-        htmltree.addAttr(HtmlAttr.VALUE, " ");
+        htmltree.addAttr(HtmlAttr.VALUE, nullCheck(value));
         htmltree.addAttr(HtmlAttr.DISABLED, "disabled");
         return htmltree;
     }
 
+    /**
+     * Generates a LABEL tag with some content.
+     *
+     * @param forLabel value of "for" attribute of the LABEL tag
+     * @param body content for the tag
+     * @return an HtmlTree object for the LABEL tag
+     */
+    public static HtmlTree LABEL(String forLabel, Content body) {
+        HtmlTree htmltree = new HtmlTree(HtmlTag.LABEL, nullCheck(body));
+        htmltree.addAttr(HtmlAttr.FOR, nullCheck(forLabel));
+        return htmltree;
+    }
+
     /**
      * Generates a LI tag with some content.
      *

langtools/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search.js

@@ -78,6 +78,7 @@ function getHighlightedText(item) {
 }
 var watermark = 'Search';
 $(function() {
+    $("#search").val('');
     $("#search").prop("disabled", false);
     $("#reset").prop("disabled", false);
     $("#search").val(watermark).addClass('watermark');

langtools/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css

@@ -203,7 +203,7 @@ ul.navListSearch li {
     padding: 5px 6px;
     text-transform:uppercase;
 }
-ul.navListSearch li span {
+ul.navListSearch li label {
     position:relative;
     right:-16px;
 }
@@ -756,18 +756,20 @@ ul.ui-autocomplete  li {
 }
 #reset {
     background-color: rgb(255,255,255);
+    background-image:url('resources/x.png');
+    background-position:center;
+    background-repeat:no-repeat;
+    background-size:12px;
     border:0 none;
     width:16px;
     height:17px;
     position:relative;
-    left:-2px;
-    background-image:url('resources/x.png');
-    background-repeat:no-repeat;
-    background-size:12px;
-    background-position:center;
+    left:-4px;
+    top:-4px;
+    font-size:0px;
 }
 .watermark {
-    color:#888;
+    color:#545454;
 }
 .searchTagDescResult {
     font-style:italic;
@@ -871,4 +873,3 @@ table.striped > tbody > tr > th, table.striped > tbody > tr > td {
 table.striped > tbody > tr > th {
     font-weight: normal;
 }
-

langtools/test/jdk/javadoc/doclet/testSearch/TestSearch.java

@@ -23,7 +23,7 @@
 
 /*
  * @test
- * @bug 8141492 8071982 8141636 8147890 8166175 8168965 8176794 8175218 8147881 8181622
+ * @bug 8141492 8071982 8141636 8147890 8166175 8168965 8176794 8175218 8147881 8181622 8182263
  * @summary Test the search feature of javadoc.
  * @author bpatel
  * @library ../lib
@@ -273,9 +273,9 @@ public class TestSearch extends JavadocTester {
                 "<script type=\"text/javascript\" src=\"jquery/jquery-ui.js\"></script>",
                 "var pathtoroot = \"./\";loadScripts(document, 'script');",
                 "<ul class=\"navListSearch\">\n",
-                "<li><span>SEARCH:&nbsp;</span>\n",
-                "<input type=\"text\" id=\"search\" value=\" \" disabled=\"disabled\">\n",
-                "<input type=\"reset\" id=\"reset\" value=\" \" disabled=\"disabled\">\n");
+                "<li><label for=\"search\">SEARCH:</label>\n"
+                + "<input type=\"text\" id=\"search\" value=\"search\" disabled=\"disabled\">\n"
+                + "<input type=\"reset\" id=\"reset\" value=\"reset\" disabled=\"disabled\">\n");
         checkOutput(fileName, true,
                 "<div class=\"fixedNav\">");
     }

langtools/test/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java

@@ -24,7 +24,7 @@
 /*
  * @test
  * @bug      4494033 7028815 7052425 8007338 8023608 8008164 8016549 8072461 8154261 8162363 8160196 8151743 8177417
- *           8175218 8176452 8181215
+ *           8175218 8176452 8181215 8182263
  * @summary  Run tests on doclet stylesheet.
  * @author   jamieh
  * @library  ../lib
@@ -185,6 +185,23 @@ public class TestStylesheet extends JavadocTester {
                 + "th.colConstructorName a:link, th.colConstructorName a:visited,\n"
                 + ".constantValuesContainer td a:link, .constantValuesContainer td a:visited {\n"
                 + "    font-weight:bold;\n"
+                + "}",
+                "#reset {\n"
+                + "    background-color: rgb(255,255,255);\n"
+                + "    background-image:url('resources/x.png');\n"
+                + "    background-position:center;\n"
+                + "    background-repeat:no-repeat;\n"
+                + "    background-size:12px;\n"
+                + "    border:0 none;\n"
+                + "    width:16px;\n"
+                + "    height:17px;\n"
+                + "    position:relative;\n"
+                + "    left:-4px;\n"
+                + "    top:-4px;\n"
+                + "    font-size:0px;\n"
+                + "}",
+                ".watermark {\n"
+                + "    color:#545454;\n"
                 + "}");
 
         checkOutput("pkg/A.html", true,