Rearrangeable Listbox Example: Add toolbar styling (pull #473)

For issue #123, add styling to make the toolbar keyboard affordance perceivable by sighted users to address concerns raised by @DavidMacDonald.Styled buttons and toolbar in listbox example

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;
+}

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">