Toolbar Example: Fix bugs and redesign to add more types of widgets (…

…#pull 950)

completes work to:

* Resolve keyboard, aria-disabled, and aria-label bugs listed in issue #847.
* Add additional widget types requested in issue #541, including toggle, checkbox, spinner, menu button, radio group, and link.
* The above are all issues discussed in toolbar review issue #539.

Note: missing regression tests are tracked by issue #965.

examples/toolbar/css/menuButton.css

@@ -1,35 +1,62 @@
-button {
-  cursor: pointer;
-  font-size: 110%;
+[role='toolbar'] .menu-popup {
+  position: relative;
 }
 
-.menu-wrapper {
-  position: relative
-}
+[role='toolbar'] .menu-popup [role="menu"] {
+  padding: 0;
+  width: 9.5em;
+  border: 2px solid #DDD;
+  border-radius:5px;
+  background-color: white;
 
-ul[role="menu"] {
   display: none;
   position: absolute;
   margin: 0;
   padding: 0;
   z-index: 1;
 }
 
-ul[role="menu"] li {
+[role='toolbar'] .menu-popup [role="menu"].focus {
+  border-color: #005A9C;
+}
+
+[role='toolbar'] .menu-popup [role="menu"] li {
+  padding: 0;
+  margin: 0;
+  display: block;
+  text-align: left;
   list-style: none;
 }
 
-[role="menu"] {
+[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"] {
   padding: 0;
-  width: 8em;
-  border: thin solid black;
-  background-color: #EEEEEE;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 2px;
+  padding-right: 2px;
+  outline:0;
+  border: none;
+  border-radius: 0;
 }
-[role="menuitem"] {
-  padding: 0.25em;
+
+[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:before {
+  content: url('../images/menuitemradio-unchecked.svg');
+}
+
+[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"][aria-checked="true"]:before {
+  content: url('../images/menuitemradio-checked.svg');
 }
 
-[role="menuitem"]:focus,
-[role="menuitem"]:hover {
-  background-color: #FFFFFF;
+[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:focus,
+[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:hover {
+	background:rgb(226, 239, 255);
+  border-top: 1px solid #005A9C;
+  border-bottom: 1px solid #005A9C;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
+
+[role='toolbar'] .menu-popup [role="menu"] [role="menuitemradio"]:focus {
+  border-color: #005A9C;
+}
+

examples/toolbar/css/toolbar.css

@@ -1,49 +1,137 @@
-.annotate {
-		color: #366ED4;
-	  font-style: italic;
+[role="toolbar"] {
+	border:1px #ECECEA solid;
+	border-radius:5px;
+	padding: 6px;
+	height: 44px;
+	width: 1050px;
+	background-color:#ECECEA;
+	border:2px solid transparent;
 }
 
-.toolbar {
-		border-left: 1px solid #aaa;
-		margin-top: 10px;
-		font-size: 0;
+[role="toolbar"].focus {
+	border-color:#005A9C;
+	border-width: 3px;
+	padding:5px;
 }
 
-.toolbar-item {
-    display: inline-block;
-    padding: 0.5em 1em;
+[role="toolbar"] .group {
+	padding:0.25em;
+	display: block;
+	float: left;
+}
+
+[role="toolbar"] .group:not(:first-child) {
+	margin-left: 0.75em;
+}
+
+[role="toolbar"] button,
+[role="toolbar"] [role="radio"],
+[role="toolbar"] label,
+[role="toolbar"] .spinbutton,
+[role="toolbar"] a,
+[role="toolbar"] .input {
+	border: 1px solid rgb(255, 255, 255);
+	outline:none;
+	display: inline-block;
+	padding: 6px 12px;
+	border-radius:5px;
+	text-align: center;
+	background: rgb(255, 255, 255);
+	color: #222428;
+	font-size: 14px;
+	line-height: 1.5em;
+	margin-right:0.25em;
+}
+
+[role="toolbar"]  button[aria-pressed="true"],
+[role="toolbar"] [role="radio"][aria-checked="true"]  {
+	border-color:#555;
+	font-weight: bold;
+	background-color: #F4F4F4;
+}
+
+
+[role="toolbar"] button[aria-disabled="true"] {
+	color: #889;
+	cursor: not-allowed;
+}
 
-		background: #eee;
-    border: 1px solid #aaa;
-		border-left: none;
-		color: blue;
-		font-size: 16px;
-		line-height: 1.5em;
-		vertical-align: top;
+[role="toolbar"] button[aria-disabled="true"]:focus {
+	border-color:#005A9C;
 }
 
-.toolbar-item.selected {
-		background-color: #ccc;
-		color: black;
-	  font-weight: bold;
+[role="toolbar"] button:focus,
+[role="toolbar"] [role="radio"]:focus,
+[role="toolbar"] .spinbutton:focus,
+[role="toolbar"] .focus,
+[role="toolbar"] a:focus{
+	border-width:2px;
+	border-color:#005A9C;
+	background:rgb(226, 239, 255);
+	padding: 5px 11px;
 }
 
-.menu-wrapper {
+[role="toolbar"] button:hover,
+[role="toolbar"] [role="radio"]:hover,
+[role="toolbar"] .spinbutton:hover,
+[role="toolbar"] label.input:hover,
+[role="toolbar"] a:hover{
+	border-color:#005A9C;
+	background:rgb(226, 239, 255);
+}
+
+[role="toolbar"] button::-moz-focus-inner {
+    border: 0;
+}
+
+[role="toolbar"] [role="spinbutton"] .value,
+[role="toolbar"] [role="spinbutton"] .increase,
+[role="toolbar"] [role="spinbutton"] .decrease {
+	width: 60px;
 	display: inline-block;
-	font-size: 16px;
+	padding: 0;
+	margin: 0;
+}
+
+[role="toolbar"] button[aria-haspopup] span {
+	float: right;
+}
+
+[role="toolbar"] button[aria-haspopup] span:after {
+	content: url(../images/pulldown-icon.svg);
+}
+
+[role="toolbar"] button[aria-haspopup]:focus span:after {
+	content: url(../images/pulldown-icon-focus.svg);
 }
 
-.menu-button {
-	padding-right: 2.5em;
-	position: relative;
+[role="toolbar"] [role="spinbutton"] .increase,
+[role="toolbar"] [role="spinbutton"] .decrease {
+	width: 20px;
+	border: 1px solid #ECECEA;
+	border-radius: 3px;
+	background-color:#ECECEA;
+	border: 1px solid #ECECEA;
 }
 
-.menu-button::after {
-	content: " ";
-	border-left: 0.4em solid transparent;
-	border-right: 0.4em solid transparent;
-	border-top: 0.4em solid black;
-  position: absolute;
-  right: 1em;
-  top: 1.1em;
+[role="toolbar"] [role="spinbutton"] .increase:hover,
+[role="toolbar"] [role="spinbutton"] .decrease:hover,
+[role="toolbar"] [role="spinbutton"]:focus .increase,
+[role="toolbar"] [role="spinbutton"]:focus .decrease{
+	fill:#005A9C;
+	border-color: #005A9C;
 }
+
+
+textarea {
+	width: 990px;
+	padding: .25em;
+	border: 2px solid black;
+	height: 400px;
+	font-size: 14pt;
+	font-family: sans-serif;
+	border-radius: 5px;
+}
+
+
+

examples/toolbar/help.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Toolbar Example | WAI-ARIA Authoring Practices 1.1</title>
+
+<!--  Core js and css shared by all examples; do not modify when using this template. -->
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
+<script src="../js/utils.js" type="text/javascript"></script>
+
+</head>
+
+<body>
+
+<h1>Toolbar Help</h1>
+
+<p>Learn more about toolbar behaviors by reading the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar">ARIA Authoring Practices Guide</a>.</p>
+
+</body>
+</html>