Add example listbox with grouped options and fix 2 listbox bugs (pull #…

…1191) Resolves #913 by adding example of the listbox pattern that includes options that are contained by labeled groups. Includes regression tests for the new example. Additionally, fixes these bugs in the behavior of options that are clicked with the mouse: - Clicking any option below the initially visible options results in the first option being selected instead of the clicked option - Clicking any option within the initially visible area briefly selects the first option before moving selection to the clicked option These bugs are fixed By: - not immediately selecting the first option when the listbox receives focus (bringing it more inline with native `<select multiple>` - only initiating automatic listbox scroll when interacting with the keyboard
w3c · Nov 8, 2019 · d8a61c2 · d8a61c2
1 parent b04f43d
commit d8a61c2
Show file tree

Hide file tree

Showing 8 changed files with 654 additions and 169 deletions.
diff --git a/examples/listbox/css/listbox.css b/examples/listbox/css/listbox.css
@@ -1,43 +1,50 @@
-.annotate {
-  font-style: italic;
-  color: #366ed4;
-}
-
 .listbox-area {
+  display: grid;
+  grid-gap: 2em;
+  grid-template-columns: repeat(2, 1fr);
   padding: 20px;
-  background: #eee;
   border: 1px solid #aaa;
-  font-size: 0;
+  border-radius: 4px;
+  background: #eee;
 }
 
-.left-area,
-.right-area {
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: 14px;
-  vertical-align: top;
-  width: 50%;
+[role="listbox"] {
+  margin: 1em 0 0;
+  padding: 0;
+  min-height: 18em;
+  border: 1px solid #aaa;
+  background: white;
 }
 
-.left-area {
-  padding-right: 10px;
+[role="listbox"]#ss_elem_list {
+  position: relative;
+  max-height: 18em;
+  overflow-y: auto;
 }
 
-.right-area {
-  padding-left: 10px;
+[role="listbox"] + *,
+.listbox-label + * {
+  margin-top: 1em;
 }
 
-[role="listbox"] {
-  min-height: 18em;
+[role="group"] {
+  margin: 0;
   padding: 0;
-  background: white;
-  border: 1px solid #aaa;
+}
+
+[role="group"] > [role="presentation"] {
+  display: block;
+  margin: 0;
+  padding: 0 0.5em;
+  font-weight: bold;
+  line-height: 2;
+  background-color: #ccc;
 }
 
 [role="option"] {
+  position: relative;
   display: block;
   padding: 0 1em 0 1.5em;
-  position: relative;
   line-height: 1.8em;
 }
 
@@ -46,124 +53,97 @@
 }
 
 [role="option"][aria-selected="true"]::before {
-  content: '✓';
   position: absolute;
   left: 0.5em;
+  content: "✓";
 }
 
-button {
-  font-size: 16px;
-}
-
-button[aria-disabled="true"] {
-  opacity: 0.5;
-}
-
-.move-right-btn {
-  padding-right: 20px;
+button[aria-haspopup="listbox"] {
   position: relative;
+  padding: 5px 10px;
+  width: 150px;
+  border-radius: 0;
+  text-align: left;
 }
 
-.move-right-btn::after {
-  content: ' ';
-  height: 10px;
-  width: 12px;
-  background-image: url('../imgs/Arrows-Right-icon.png');
-  background-position: center right;
+button[aria-haspopup="listbox"]::after {
   position: absolute;
-  right: 2px;
-  top: 6px;
+  right: 5px;
+  top: 10px;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top-color: currentColor;
+  border-bottom: 0;
+  content: "";
 }
 
-.move-left-btn {
-  padding-left: 20px;
-  position: relative;
+button[aria-haspopup="listbox"][aria-expanded="true"]::after {
+  position: absolute;
+  right: 5px;
+  top: 10px;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top: 0;
+  border-bottom-color: currentColor;
+  content: "";
 }
 
-.move-left-btn::after {
-  content: ' ';
-  height: 10px;
-  width: 12px;
-  background-image: url('../imgs/Arrows-Left-icon.png');
-  background-position: center left;
+button[aria-haspopup="listbox"] + [role="listbox"] {
   position: absolute;
-  left: 2px;
-  top: 6px;
+  margin: 0;
+  width: 9.5em;
+  max-height: 10em;
+  border-top: 0;
+  overflow-y: auto;
 }
 
-#ss_elem_list {
-  max-height: 18em;
-  overflow-y: auto;
-  position: relative;
+[role="toolbar"] {
+  display: flex;
 }
 
-#exp_button {
-  border-radius: 0;
-  font-size: 16px;
-  text-align: left;
-  padding: 5px 10px;
-  width: 150px;
-  position: relative;
+[role="toolbar"] > * {
+  border: 1px solid #aaa;
+  background: #ccc;
 }
 
-#exp_button::after {
-  width: 0;
-  height: 0;
-  border-left: 8px solid transparent;
-  border-right: 8px solid transparent;
-  border-top: 8px solid #aaa;
-  content: " ";
-  position: absolute;
-  right: 5px;
-  top: 10px;
+[role="toolbar"] > [aria-disabled="false"]:focus {
+  background-color: #eee;
 }
 
-#exp_button[aria-expanded="true"]::after {
-  width: 0;
-  height: 0;
-  border-left: 8px solid transparent;
-  border-right: 8px solid transparent;
-  border-top: 0;
-  border-bottom: 8px solid #aaa;
-  content: " ";
-  position: absolute;
-  right: 5px;
-  top: 10px;
+button {
+  font-size: inherit;
 }
 
-#exp_elem_list {
-  border-top: 0;
-  max-height: 10em;
-  overflow-y: auto;
-  position: absolute;
-  margin: 0;
-  width: 148px;
+button[aria-disabled="true"] {
+  opacity: 0.5;
 }
 
-.hidden {
-  display: none;
+.move-right-btn::after {
+  content: " →";
 }
 
-.toolbar {
-  font-size: 0;
+.move-left-btn::before {
+  content: "← ";
 }
 
-.toolbar-item {
-  border: 1px solid #aaa;
-  background: #ccc;
+.annotate {
+  color: #366ed4;
+  font-style: italic;
 }
 
-.toolbar-item[aria-disabled="false"]:focus {
-  background-color: #eee;
+.hidden {
+  display: none;
 }
 
 .offscreen {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
   clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
   font-size: 14px;
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
   white-space: nowrap;
-  width: 1px;
 }