add readme message

jurokapsiar · Jul 11, 2018 · 50d1756 · 50d1756
1 parent de498a7
commit 50d1756
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
 "# acc-prototypes" 
+
+These are quick and dirty prototypes used for accessibility evaluation.
+Please keep this in mind when looking at the code.
diff --git a/menu/menu-bar-div.html b/menu/menu-bar-div.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+	<title>Buttons</title>
+	<link rel="stylesheet" href="menu-bar.css">
+</head>
+<body>
+	<h2>Menu</h2>
+	<h3>Menu Bar with button</h3>
+	<ul role="menubar" aria-label="Settings" id="appmenu" class="appmenu-child">
+		<li>
+			<div role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="File settings" tabindex="0">
+				File
+			</div>
+			<ul role="menu" aria-label="File">
+				<li role="presentation">
+					<div role="menuitem" aria-label="Create new file" tabindex="-1">New</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" aria-label="Open file" tabindex="-1">Open</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" aria-label="Print file" tabindex="-1">Print</div>
+				</li>
+			</ul>
+		</li>
+		<li>
+			<div role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Edit actions" tabindex="-1">
+				Edit
+			</div>
+			<ul role="menu" aria-label="Edit">
+				<li role="presentation">
+					<div role="menuitem" aria-label="Undo action" tabindex="-1">Undo</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" aria-label="Redo action" tabindex="-1">Redo</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Cut</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Copy</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Paste</div>
+				</li>
+			</ul>
+		</li>
+		<li>
+			<div role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Format text" tabindex="-1">
+				Format
+			</div>
+			<ul role="menu" aria-label="Format">
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Font</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Text</div>
+				</li>
+			</ul>
+		</li>
+		<li>
+			<div role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="View settings" tabindex="-1">
+				View
+			</div>
+			<ul role="menu" aria-label="View">
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">100%</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Zoom In</div>
+				</li>
+				<li role="presentation">
+					<div role="menuitem" tabindex="-1">Zoom Out</div>
+				</li>
+			</ul>
+		</li>
+		<li>
+			<div role="menuitem" aria-label="Help" tabindex="-1">
+				Help
+			</div>
+		</li>
+	</ul>
+	<script>
+		window.useChild = true;
+	</script>
+	<script src="menu-bar.js"></script>
+</body>
+</html>
diff --git a/menu/menu-bar-li.html b/menu/menu-bar-li.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+	<title>Buttons</title>
+	<link rel="stylesheet" href="menu-bar.css">
+</head>
+<body>
+	<h2>Menu</h2>
+	<h3>Menu Bar with plain LI</h3>
+	<ul role="menubar" aria-label="Settings" id="appmenu" class="appmenu-no-child">
+		<li
+			role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="File settings" tabindex="0">
+				File
+
+			<ul role="menu" aria-label="File" tabindex="-1">
+				<li
+					role="menuitem" aria-label="Create new file" tabindex="-1">New
+				</li>
+				<li
+					role="menuitem" aria-label="Open file" tabindex="-1">Open
+				</li>
+				<li
+					role="menuitem" aria-label="Print file" tabindex="-1">Print
+				</li>
+			</ul>
+		</li>
+		<li
+			role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Edit actions" tabindex="-1">
+				Edit
+
+			<ul role="menu" aria-label="Edit" tabindex="-1">
+				<li
+					role="menuitem" aria-label="Undo action" tabindex="-1">Undo
+				</li>
+				<li
+					role="menuitem" aria-label="Redo action" tabindex="-1">Redo
+				</li>
+				<li
+					role="menuitem" tabindex="-1">Cut
+				</li>
+				<li
+					role="menuitem" tabindex="-1">Copy
+				</li>
+				<li
+					role="menuitem" tabindex="-1">Paste
+				</li>
+			</ul>
+		</li>
+		<li
+			role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Format text" tabindex="-1">
+				Format
+
+			<ul role="menu" aria-label="Format" tabindex="-1">
+				<li
+					role="menuitem" tabindex="-1">Font
+				</li>
+				<li
+					role="menuitem" tabindex="-1">Text
+				</li>
+			</ul>
+		</li>
+		<li
+			role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="View settings" tabindex="-1">
+				View
+
+			<ul role="menu" aria-label="View" tabindex="-1">
+				<li
+					role="menuitem" tabindex="-1">100%
+				</li>
+				<li
+					role="menuitem" tabindex="-1">Zoom In
+				</li>
+				<li
+					role="menuitem" tabindex="-1">Zoom Out
+				</li>
+			</ul>
+		</li>
+		<li
+			role="menuitem" aria-label="Help" tabindex="-1">
+				Help
+
+		</li>
+	</ul>
+	<script src="menu-bar.js"></script>
+</body>
+</html>
diff --git a/menu/menu-bar.css b/menu/menu-bar.css
@@ -40,7 +40,7 @@
 	color: #fff;
 	background-color: #036;
 }
-#appmenu [aria-haspopup="true"] + [role="menu"] {
+.appmenu-no-child [aria-haspopup="true"] > [role="menu"] {
 	display: none;
 	position:absolute;
 	left:0;
@@ -51,6 +51,21 @@
 	background-color: #036;
 	text-align: left;
 }
-#appmenu [aria-haspopup="true"][aria-expanded="true"] + [role="menu"] {
+.appmenu-no-child [aria-haspopup="true"][aria-expanded="true"] > [role="menu"] {
+	display:block;
+}
+
+.appmenu-child [aria-haspopup="true"] + [role="menu"] {
+	display: none;
+	position:absolute;
+	left:0;
+	right:0;
+	top:100%;
+	padding:0;
+	margin:0;
+	background-color: #036;
+	text-align: left;
+}
+.appmenu-child [aria-haspopup="true"][aria-expanded="true"] + [role="menu"] {
 	display:block;
 }
diff --git a/menu/menu-bar.html b/menu/menu-bar.html
@@ -8,8 +8,8 @@
 </head>
 <body>
 	<h2>Menu</h2>
-	<h3>Menu Bar</h3>
-	<ul role="menubar" aria-label="Settings" id="appmenu">
+	<h3>Menu Bar with button</h3>
+	<ul role="menubar" aria-label="Settings" id="appmenu" class="appmenu-child">
 		<li>
 			<button role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="File settings" tabindex="0">
 				File
@@ -83,6 +83,9 @@ <h3>Menu Bar</h3>
 			</button>
 		</li>
 	</ul>
+	<script>
+		window.useChild = true;
+	</script>
 	<script src="menu-bar.js"></script>
 </body>
 </html>
diff --git a/menu/menu-bar.js b/menu/menu-bar.js
@@ -1,8 +1,12 @@
 var appsMenuItems = document.querySelectorAll(
-  "#appmenu > li > [role='menuitem']"
+  window.useChild
+    ? "#appmenu > li > [role='menuitem']"
+    : "#appmenu > li[role='menuitem']"
 );
 var subMenuItems = document.querySelectorAll(
-  "#appmenu > li li [role='menuitem']"
+  window.useChild
+    ? "#appmenu > li li [role='menuitem']"
+    :  "#appmenu > li li[role='menuitem']"
 );
 var keys = {
   tab: 9,
@@ -78,26 +82,28 @@ Array.prototype.forEach.call(appsMenuItems, function(el, i) {
       case keys.left:
         gotoIndex(currentIndex - 1);
         break;
-      case keys.tab:
-        if (event.shiftKey) {
-          gotoIndex(currentIndex - 1);
-        } else {
-          gotoIndex(currentIndex + 1);
-        }
-        break;
+      // case keys.tab:
+      //   if (event.shiftKey) {
+      //     gotoIndex(currentIndex - 1);
+      //   } else {
+      //     gotoIndex(currentIndex + 1);
+      //   }
+      //   break;
       case keys.enter:
       case keys.down:
       case keys.space:
         this.click();
         subindex = 0;
-        var submenu = this.parentElement.querySelector('[role="menu"]');
+        var element = window.useChild ? this.parentElement : this;
+        var submenu = element.querySelector('[role="menu"]');
         if (submenu) {
           gotoSubIndex(submenu, 0);
         }
         break;
       case keys.up:
         this.click();
-        var submenu = this.parentElement.querySelector('[role="menu"]');
+        var element = window.useChild ? this.parentElement : this;
+        var submenu = element.querySelector('[role="menu"]');
         if (submenu) {
           subindex = submenu.querySelectorAll("[role='menuitem']").length - 1;
           gotoSubIndex(submenu, subindex);