Styled buttons and toolbar in listbox example

w3c · Oct 10, 2017 · 375c8bc · 375c8bc
1 parent 4300443
commit 375c8bc
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/examples/listbox/css/listbox.css b/examples/listbox/css/listbox.css
@@ -54,44 +54,61 @@
  left: 0.5em;
 }
 
+button {
+ font-size: 16px;
+}
+
 button[aria-disabled="true"] {
  opacity: 0.5;
 }
 
 .move-right-btn {
- padding-right: 15px;
+ padding-right: 20px;
  position: relative;
 }
 
 .move-right-btn::after {
  content: ' ';
  height: 10px;
- width: 10px;
+ width: 12px;
  background-image: url('../imgs/Arrows-Right-icon.png');
  background-position: center right;
  position: absolute;
  right: 2px;
- top: 4px;
+ top: 6px;
 }
 
 .move-left-btn {
- padding-left: 15px;
+ padding-left: 20px;
  position: relative;
 }
 
 .move-left-btn::after {
  content: ' ';
  height: 10px;
- width: 10px;
+ width: 12px;
  background-image: url('../imgs/Arrows-Left-icon.png');
  background-position: center left;
  position: absolute;
  left: 2px;
- top: 4px;
+ top: 6px;
 }
 
 #ss_elem_list {
  max-height: 18em;
  overflow-y: auto;
  position: relative;
 }
+
+.toolbar {
+ font-size: 0;
+}
+
+.toolbar-item {
+ border: 1px solid #aaa;
+ background: #ccc;
+}
+
+.toolbar-item[aria-disabled="false"]:focus {
+ background-color: #eee;
+}
diff --git a/examples/listbox/listbox-rearrangeable.html b/examples/listbox/listbox-rearrangeable.html
@@ -22,7 +22,7 @@
  <h1>Example Listboxes with Rearrangeable Options</h1>
  <p>
  <strong>NOTE:</strong> This example page is incomplete; it is not ready for final review.
- Development is tracked by 
+ Development is tracked by
  <a href="https://github.com/w3c/aria-practices/issues/123">issue 123.</a>
  </p>
  <p>
@@ -59,7 +59,7 @@ <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
  <li id="ss_opt9" role="option">Level of traffic noise</li>
  <li id="ss_opt10" role="option">Access to major highways</li>
  </ul>
- <div role="toolbar" aria-label="Actions">
+ <div role="toolbar" aria-label="Actions" class="toolbar">
  <button id="ex1-up" class="toolbar-item selected" aria-keyshortcuts="Alt+ArrowUp" aria-disabled="true">Up</button>
  <button id="ex1-down" class="toolbar-item" tabindex="-1" aria-keyshortcuts="Alt+ArrowDown" aria-disabled="true">Down</button>
  <button id="ex1-delete" class="toolbar-item move-right-btn" tabindex="-1" aria-keyshortcuts="Alt+ArrowRight Delete" aria-disabled="true">Not Important</button>
@@ -202,8 +202,8 @@ <h2>Accessibility Features</h2>
  <section>
  <h2 id="kbd_label">Keyboard Support</h2>
  <p>
- The example listboxes on this page implement the following keyboard interface. 
- Other variations and options for the keyboard interface are described in the 
+ The example listboxes on this page implement the following keyboard interface.
+ Other variations and options for the keyboard interface are described in the
  <a href="../../#listbox_kbd_interaction">Keyboard Interaction section of the Listbox Design Pattern.</a>
  </p>
  <table aria-labelledby="kbd_label" class="def">
@@ -292,8 +292,8 @@ <h4 id="kbd_label_multiselect">Multiple selection keys supported in example 2</h
  <section>
  <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
  <p>
- The example listboxes on this page implement the following ARIA roles, states, and properties. 
- Information about other ways of applying ARIA roles, states, and properties is available in the 
+ The example listboxes on this page implement the following ARIA roles, states, and properties.
+ Information about other ways of applying ARIA roles, states, and properties is available in the
  <a href="../../#listbox_roles_states_props">Roles, States, and Properties section of the Listbox Design Pattern.</a>
  </p>
  <table aria-labelledby="rps_label" class="data attributes">