Single-select listbox example: Fix aria-selected bug (pull #795)

For issue #794, update aria-selected for single-select listbox options where selection follows focus.

Change in listbox/js/listbox.js:
When aria-multiselectable is false, toggle aria-selected when option receives or loses focus.

examples/listbox/css/listbox.css

@@ -35,7 +35,7 @@
 
 [role="option"] {
 	display: block;
-	padding: 0 1em;
+	padding: 0 1em 0 1.5em;
 	position: relative;
 	line-height: 1.8em;
 }
@@ -44,10 +44,6 @@
 	background: #bde4ff;
 }
 
-[role="option"][aria-selected] {
-	padding-left: 1.5em;
-}
-
 [role="option"][aria-selected="true"]::before {
 	content: '✓';
 	position: absolute;

examples/listbox/js/listbox.js

@@ -302,7 +302,9 @@ aria.Listbox.prototype.defocusItem = function (element) {
   if (!element) {
     return;
   }
-
+  if (!this.multiselectable) {
+    element.removeAttribute('aria-selected');
+  }
   aria.Utils.removeClass(element, 'focused');
 };
 
@@ -315,6 +317,9 @@ aria.Listbox.prototype.defocusItem = function (element) {
  */
 aria.Listbox.prototype.focusItem = function (element) {
   this.defocusItem(document.getElementById(this.activeDescendant));
+  if (!this.multiselectable) {
+    element.setAttribute('aria-selected', 'true');
+  }
   aria.Utils.addClass(element, 'focused');
   this.listboxNode.setAttribute('aria-activedescendant', element.id);
   this.activeDescendant = element.id;