ade21ee4e0109c70e29860d5393306e48e6a44d3
lrnassar
  Mon Mar 16 16:38:58 2026 -0700
Adding keyboard navigation accessibility to the Genome Browser menu bar and all main CGI pages. Converts non-focusable menu bar span elements to keyboard-accessible buttons using the W3C disclosure navigation pattern, adds aria-expanded state for screen readers, skip navigation link, and main content landmark. Also adds a Keyboard Navigation section to the accessibility page with screenshots. refs #37252

diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css
index 4273db56165..ec7d6540d40 100644
--- src/hg/htdocs/style/nice_menu.css
+++ src/hg/htdocs/style/nice_menu.css
@@ -1,21 +1,42 @@
 /* @font-face {
  font-family:"Metrophobic";
  src:url(/sites/all/themes/genome/images/font/Metrophobic.ttf);
  src:local('Metrophobic'), url(/sites/all/themes/genome/images/font/Metrophobic.otf);
 } */
 
+/* Skip navigation link for keyboard accessibility */
+a.skipNav, a.skipNav:link, a.skipNav:visited {
+	position: absolute;
+	left: -9999px;
+	top: 0;
+	z-index: 1000;
+	padding: 8px 16px;
+	background: #003a72;
+	color: #fff;
+	font-size: 14px;
+	font-weight: bold;
+	font-family: Arial, Helvetica, sans-serif;
+	text-decoration: none;
+}
+
+a.skipNav:focus {
+	left: 0;
+	outline: 2px solid #fff;
+	outline-offset: -2px;
+}
+
 /* Contains all css needed for drop-down global navigation menus */
 
 
 /* FROM Jabico's style.css */
 /*  body.cgi {
 	margin:0px;
 	padding:0px;
  	font-size:13px;
 	color:#6b6b6b;
 	line-height:19px; 
 	background:#e6e3db;
 	font-family:Arial, Helvetica, sans-serif;
 }*/
 #main-menu-whole {
 	width:100%;
@@ -315,30 +336,41 @@
 	padding:0px 10px 0px 3px;
 }
 ul.nice-menu li.menuparent{
 padding-top:8px;
 }
 
 ul.nice-menu li.menuparent span {
 	color:#f0f1f9;
 	font-size:14px;
 	cursor: pointer;
 	/*padding:0px 5px 0px 15px;*/
 	padding:0 18px 0 0;
 	/* background:url('../images/plusesign-main-menu.png') no-repeat 5px center; */
 }
 
+ul.nice-menu li.menuparent button {
+	color:#f0f1f9;
+	font-size:14px;
+	cursor: pointer;
+	padding:0 18px 0 0;
+	background: none;
+	border: none;
+	font-family: inherit;
+	line-height: inherit;
+}
+
 ul.nice-menu a:hover, ul.nice-menu a.active {
 	/* color:#f0f1f9; */
 }
 #main-menu ul li.menuparent ul li span {
 	color:#121e9b;
 	background:none;
 	padding:2px 10px 0px 3px;
 }
 
 ul.nice-menu ul {
 	position:absolute;
 	top:2.5em;
 	left:10px;
 	margin-right: 0;
 	border:2px solid #f5f5f5;
@@ -523,30 +555,42 @@
 
 th.blueToggleBar b { /* Win8/IE10 was not inheriting text color redmin 11745 */
     color: #FFFFFF;
 }
 
 a:link {color: #121E9A;}
 
 
 #imgTbl, #chrom {
     background-color: #fff;
     border: 1px solid #000;
     border-radius: 2px;
 }
 
 
+/* Keyboard focus indicators for accessibility */
+ul.nice-menu a:focus-visible,
+ul.nice-menu button:focus-visible {
+	outline: 2px solid #fff;
+	outline-offset: 2px;
+}
+
+ul.nice-menu ul a:focus-visible {
+	outline: 2px solid #327de4;
+	outline-offset: -2px;
+}
+
 /* Below are all the styles used by the superfish plugin
 I need SOME of these for the arrows in the dropdown menu. I'll
 end up deleting any I don't need */
 
 
 /* arrows */
 .sf-menu a.sf-with-ul {
 	padding-right: 	2.25em;
 	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
 }
 .sf-sub-indicator {
 	/*position:		absolute;
 	display:		block;
 	right:			.75em;
 	top:			1.05em;  // IE6 only