Fix visual design issues with combobox examples 1-3

Part of #1255.

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "media-feature-name-whitelist": ["forced-colors", "-ms-high-contrast"]
+  }
+}

examples/combobox/combobox-autocomplete-both.html

@@ -13,7 +13,6 @@
 
 <!--  js and css for this example. -->
 <link rel="stylesheet" href="css/combobox.css">
-<link rel="stylesheet" href="css/listbox.css">
 <script type="text/javascript" src="js/combobox-list.js"></script>
 <script type="text/javascript" src="js/listbox.js"></script>
 <script type="text/javascript" src="js/listboxOption.js"></script>
@@ -50,12 +49,11 @@ <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
       <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
-        <div class="combobox-list">
-          <label for="cb1-input">State</label>
+        <label for="cb1-input">State</label>
+        <div class="combobox combobox-list">
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
-              aria-expanded="false" aria-controls="lb1"
-            />
+              aria-expanded="false" aria-controls="lb1">
             <button type="button" id="cb1-button" aria-label="Open" tabindex="-1">&#9661;</button>
           </div>
           <ul id="lb1" role="listbox" aria-label="States">

examples/combobox/combobox-autocomplete-list.html

@@ -13,7 +13,6 @@
 
 <!--  js and css for this example. -->
 <link href="css/combobox.css" rel="stylesheet">
-<link  href="css/listbox.css"     rel="stylesheet">
 <script src="js/combobox-list.js"  type="text/javascript"></script>
 <script src="js/listbox.js"       type="text/javascript"></script>
 <script src="js/listboxOption.js" type="text/javascript"></script>
@@ -45,17 +44,16 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
       <li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
       <li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>
     </ul>
-    
+
     <section>
       <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
-        <div class="combobox-list">
+        <div class="combobox combobox-list">
           <label for="cb1-input">State</label>
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
-              aria-expanded="false" aria-controls="cb1-listbox"
-            />
+              aria-expanded="false" aria-controls="cb1-listbox">
             <button id="cb1-button" tabindex="-1" aria-label="Open">&#9661;</button>
           </div>
           <ul id="cb1-listbox" role="listbox" aria-label="States">

examples/combobox/combobox-autocomplete-none.html

@@ -13,7 +13,6 @@
 
 <!--  js and css for this example. -->
 <link href="css/combobox.css" rel="stylesheet">
-<link  href="css/listbox.css"     rel="stylesheet">
 <script src="js/combobox-list.js"  type="text/javascript"></script>
 <script src="js/listbox.js"       type="text/javascript"></script>
 <script src="js/listboxOption.js" type="text/javascript"></script>
@@ -43,23 +42,20 @@ <h1>Editable Combobox without Autocomplete Example</h1>
       <li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
       <li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>
     </ul>
-    
+
     <section>
       <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
-        <div class="combobox-list">
+        <div class="combobox combobox-list">
           <label for="cb1-input">Search</label>
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text"
                    role="combobox"
                    aria-autocomplete="none"
                    aria-expanded="false"
-                   aria-controls="cb1-listbox"
-            />
-            <button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
-              &#9661;
-            </button>
+                   aria-controls="cb1-listbox">
+            <button type="button" id="cb1-button" tabindex="-1" aria-label="Open">&#9661;</button>
           </div>
           <ul id="cb1-listbox" role="listbox" aria-label="Previous Searches">
             <li id="lb1-01" role="option">weather</li>

examples/combobox/css/combobox.css

@@ -1,36 +1,107 @@
-.annotate {
-  font-style: italic;
-  color: #366ed4;
-}
-
 .combobox-list {
   position: relative;
 }
 
-.combobox-inline label,
-.combobox-list label {
+.combobox .group {
+  display: inline-flex;
+}
+
+.combobox .group input,
+.combobox .group button {
+  background-color: white;
+  color: black;
+  box-sizing: border-box;
+  height: 1.5rem;
+  padding: 0 0.25em;
   margin: 0;
-  padding: 0;
-  display: block;
+  vertical-align: bottom;
+  border: 1px solid gray;
 }
 
-.combobox-list .group input,
-.combobox-list .group button {
-  display: inline;
-  background-color: #eee;
+.combobox .group input {
+  width: 10rem;
+  border-right: none;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  outline: none;
+}
+
+.combobox .group button {
+  width: 1.5rem;
+  border-left: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  outline: none;
+  font-size: 85%;
 }
 
-.combobox-list .group input.focus {
+.combobox .group.focus input,
+.combobox .group.focus button {
   background-color: #d6e8f5;
-  outline-color: #348ccb;
+  border-color: #348ccb;
+}
+
+.combobox .group.focus {
+  outline: 2px solid black;
+  outline-offset: 1px;
 }
 
-.combobox-list .group button {
+ul[role="listbox"] {
   margin: 0;
-  padding: 0 0.125em 0 0.125em;
-  position: relative;
-  top: 1px;
-  left: -2px;
-  font-size: 85%;
+  padding: 0;
+  position: absolute;
+  left: 0;
+  top: 1.5rem;
+  list-style: none;
   background-color: #eee;
+  display: none;
+  box-sizing: border-box;
+  border: 1px gray solid;
+  border-radius: 3px;
+  max-height: 12em;
+  width: 11.5rem;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+
+ul[role="listbox"] li[role="option"] {
+  margin: 0;
+  padding: 0;
+  padding-left: 0.125em;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+[role="listbox"].focus {
+  border-color: #348ccb;
+}
+
+[role="listbox"] [role="option"] {
+  display: block;
+  margin: 0.25em;
+  padding: 0;
+  background-color: #eee;
+  font-size: 100%;
+}
+
+/* focus and hover styling */
+
+[role="listbox"] [role="option"][aria-selected="true"] {
+  background-color: #ccc;
+}
+
+[role="listbox"].focus [role="option"][aria-selected="true"] {
+  background-color: #aed2ea;
+  border-color: #348ccb;
+}
+
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  [role="listbox"].focus [role="option"][aria-selected="true"] {
+    background-color: highlight;
+    color: highlighttext;
+  }
+}
+
+[role="listbox"] li[role="option"]:hover {
+  background-color: #c2ddef;
 }

examples/combobox/css/grid-combo.css

@@ -1,8 +1,3 @@
-.annotate {
-  font-style: italic;
-  color: #366ed4;
-}
-
 .hidden {
   display: none;
 }

examples/combobox/grid-combo.html

@@ -48,7 +48,7 @@ <h1>Editable Combobox with Grid Popup Example</h1>
       <li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
       <li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
     </ul>
-    
+
     <section>
       <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>

examples/combobox/js/combobox-list.js

@@ -117,21 +117,21 @@ ComboboxList.prototype.setOption = function (option, flag) {
 ComboboxList.prototype.setVisualFocusTextbox = function () {
   this.listbox.domNode.classList.remove('focus');
   this.listbox.hasFocus = false;
-  this.domNode.classList.add('focus');
+  this.domNode.parentNode.classList.add('focus'); // set the focus class to the parent for easier styling
   this.hasFocus = true;
   this.setActiveDescendant(false);
 };
 
 ComboboxList.prototype.setVisualFocusListbox = function () {
-  this.domNode.classList.remove('focus');
+  this.domNode.parentNode.classList.remove('focus');
   this.hasFocus = false;
   this.listbox.domNode.classList.add('focus');
   this.listbox.hasFocus = true;
   this.setActiveDescendant(this.option);
 };
 
 ComboboxList.prototype.removeVisualFocusAll = function () {
-  this.domNode.classList.remove('focus');
+  this.domNode.parentNode.classList.remove('focus');
   this.hasFocus = false;
   this.listbox.domNode.classList.remove('focus');
   this.listbox.hasFocus = true;