├── .gitignore
├── public
    ├── fonts
    │   ├── 351114_0_0.eot
    │   ├── 351114_0_0.ttf
    │   ├── 351114_1_0.eot
    │   ├── 351114_1_0.ttf
    │   ├── 351114_0_0.woff
    │   ├── 351114_0_0.woff2
    │   ├── 351114_1_0.woff
    │   └── 351114_1_0.woff2
    ├── css
    │   ├── partials
    │   │   └── fonts.css
    │   └── app.css
    ├── js
    │   └── app.js
    └── index.html
├── postcss.config.js
├── README.md
├── package.json
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/build
3 | yarn.lock
4 | .DS_Store
5 | .vscode


--------------------------------------------------------------------------------
/public/fonts/351114_0_0.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_0_0.eot


--------------------------------------------------------------------------------
/public/fonts/351114_0_0.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_0_0.ttf


--------------------------------------------------------------------------------
/public/fonts/351114_1_0.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_1_0.eot


--------------------------------------------------------------------------------
/public/fonts/351114_1_0.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_1_0.ttf


--------------------------------------------------------------------------------
/public/fonts/351114_0_0.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_0_0.woff


--------------------------------------------------------------------------------
/public/fonts/351114_0_0.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_0_0.woff2


--------------------------------------------------------------------------------
/public/fonts/351114_1_0.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_1_0.woff


--------------------------------------------------------------------------------
/public/fonts/351114_1_0.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/proeung/accessible-menu/HEAD/public/fonts/351114_1_0.woff2


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('postcss-import'),
4 |     require('tailwindcss/nesting'),
5 |     require('tailwindcss'),
6 |     require('autoprefixer'),
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/public/css/partials/fonts.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |     font-family: 'SofiaPro';
 3 |     font-weight: 300;
 4 |     src: url('../fonts/351114_1_0.eot');
 5 |     src: url('../fonts/351114_1_0.eot?#iefix') format('embedded-opentype'),
 6 |     url('../fonts/351114_1_0.woff2') format('woff2'),
 7 |     url('../fonts/351114_1_0.woff') format('woff'),
 8 |     url('../fonts/351114_1_0.ttf') format('truetype');
 9 | }
10 | 
11 | @font-face {
12 |     font-family: 'SofiaPro';
13 |     font-weight: 700;
14 |     src: url('../fonts/351114_0_0.eot');
15 |     src: url('../fonts/351114_0_0.eot?#iefix') format('embedded-opentype'),
16 |     url('../fonts/351114_0_0.woff2') format('woff2'),
17 |     url('../fonts/351114_0_0.woff') format('woff'),
18 |     url('../fonts/351114_0_0.ttf') format('truetype');
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # accessible-menu
 2 | 
 3 | A sandbox static page that demonstrates WCAG accessible mega menu using Tailwind CSS v.3 and extending from Disclosure Menus.
 4 | 
 5 | ![Screen Shot 2022-01-18 at 5 39 22 PM](https://user-images.githubusercontent.com/1815714/150030281-1d0b82ae-e39f-4605-bfb2-172d74da676b.png)
 6 | 
 7 | 
 8 | To get started:
 9 | 
10 | 1. Install the dependencies:
11 | 
12 |     ```bash
13 |     # Using npm
14 |     npm install
15 | 
16 |     # Using Yarn
17 |     yarn
18 |     ```
19 | 
20 | 2. Start the development server:
21 | 
22 |     ```bash
23 |     # Using npm
24 |     npm run serve
25 | 
26 |     # Using Yarn
27 |     yarn run serve
28 |     ```
29 | 
30 |     Now you should be able to see the project running at localhost:8080.
31 | 
32 | 3. Open `public/index.html` in your editor and start experimenting!
33 | 
34 | ## Building for production
35 | 
36 | To build an optimized version of your CSS, simply run:
37 | 
38 | ```bash
39 | # Using npm
40 | npm run production
41 | 
42 | # Using Yarn
43 | yarn run production
44 | ```
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "accessible-menu",
 3 |   "version": "0.0.1",
 4 |   "description": "A sandbox app that generates WCAG accessible menus.",
 5 |   "author": {
 6 |     "name": "Putra Bonaccorsi",
 7 |     "url": "https://www.iamputra.com"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": ""
12 |   },
13 |   "scripts": {
14 |     "serve": "cross-env NODE_ENV=development concurrently \"postcss public/css/app.css -o public/build/app.css --watch\"  \"live-server ./public\"",
15 |     "development": "cross-env NODE_ENV=development postcss public/css/app.css -o public/build/app.css",
16 |     "production": "cross-env NODE_ENV=production postcss public/css/app.css -o public/build/app.css"
17 |   },
18 |   "dependencies": {
19 |     "postcss-calc": "^7.0.1",
20 |     "postcss-import": "^12.0.1",
21 |     "postcss-nesting": "^7.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "autoprefixer": "^10.4.0",
25 |     "concurrently": "^7.0.0",
26 |     "cross-env": "^5.2.0",
27 |     "live-server": "^1.2.1",
28 |     "postcss": "^8.4.4",
29 |     "postcss-cli": "^9.1.0",
30 |     "tailwindcss": "^3.0.11"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require('tailwindcss/colors');
 2 | 
 3 | module.exports = {
 4 |   content: [
 5 |     './public/**/*.{html,js}',
 6 |   ],
 7 |   theme: {
 8 |     colors: {
 9 |       transparent: 'transparent',
10 |       current: 'currentColor',
11 |       black: colors.black,
12 |       white: colors.white,
13 |       gray: colors.gray,
14 |       purple: colors.purple,
15 |       red: colors.red,
16 |       blue: colors.blue,
17 |     },
18 |     screens: {
19 |       'sm': '640px',
20 |       'md': '768px',
21 |       'lg': '1024px',
22 |       'xl': '1280px',
23 |     },
24 |     container: {
25 |       padding: {
26 |         DEFAULT: '1rem',
27 |         sm: '2rem',
28 |         lg: '4rem',
29 |       },
30 |     },
31 |     fontFamily: {
32 |       'sans': [
33 |         'SofiaPro',
34 |         '-apple-system',
35 |         'BlinkMacSystemFont',
36 |         'Segoe UI',
37 |         'Roboto',
38 |         'Oxygen',
39 |         'Ubuntu',
40 |         'Cantarell',
41 |         'Fira Sans',
42 |         'Droid Sans',
43 |         'Helvetica Neue',
44 |       ],
45 |       'sans-secondary': [
46 |         'Heebo',
47 |         'Roboto',
48 |         'Oxygen',
49 |         'Ubuntu',
50 |         'Cantarell',
51 |         'Fira Sans',
52 |         'Droid Sans',
53 |         'Helvetica Neue',
54 |       ],
55 |     },
56 |     extend: {
57 |       spacing: {
58 |         '70': '4.375rem',
59 |         '100': '6.25rem',
60 |         '310': '19.375rem',
61 |       },
62 |       fontSize: {
63 |         xs: '0.75rem', //12px
64 |         sm: '0.875rem', //14px
65 |         base: '1rem', //16px
66 |         lg: '1.125rem', //18px
67 |         xl: '1.25rem', //20px
68 |         '2xl': '1.375rem', //22px
69 |         '3xl': '1.875rem', //30px
70 |         '4xl': '2.25rem', //36px
71 |         '5xl': '2.625rem', //42px
72 |       },
73 |     },
74 |   },
75 |   plugins: [],
76 | }
77 | 


--------------------------------------------------------------------------------
/public/css/app.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @import "partials/fonts";
  6 | 
  7 | 
  8 | @layer components {
  9 | 
 10 |   /* Hamburger Button */
 11 |   .hamburger-button.active,
 12 |   .hamburger-button[aria-expanded="true"] {
 13 |     .line-1 {
 14 |       @apply translate-y-0 rotate-45;
 15 |     }
 16 |     
 17 |     .line-2 {
 18 |       @apply opacity-0 translate-x-3;
 19 |     }
 20 | 
 21 |     .line-3 {
 22 |       @apply translate-y-0 -rotate-45;
 23 |     }
 24 |   }
 25 | 
 26 |   /* Accessible Menu */
 27 |   ul.accessible-menu {
 28 | 
 29 |     &.menu-is-open {
 30 |       @apply block lg:flex;
 31 |     }
 32 | 
 33 |     > li {
 34 |       @apply lg:flex;
 35 |     }
 36 | 
 37 |     li {
 38 |       @apply m-0;
 39 | 
 40 |       button {
 41 |         @apply border-b-2 text-lg text-gray-900 font-medium py-4 lg:py-8 px-4 w-full lg:w-auto lg:border-b-0;
 42 |       }
 43 | 
 44 |       &:last-child {
 45 |         button {
 46 |           @apply border-b-0;
 47 |         }
 48 |       }
 49 |     }
 50 | 
 51 |     button:focus,
 52 |     ul li a:focus {
 53 |       @apply outline outline-2 text-blue-900 outline-offset-[-2px] outline-blue-900 relative;
 54 |     }
 55 | 
 56 |     button:hover,
 57 |     button[aria-expanded="true"] {
 58 |       @apply text-blue-900;
 59 |     }
 60 | 
 61 |     button[aria-expanded="true"] {
 62 |       svg {
 63 |         @apply rotate-180;
 64 |       }
 65 |     }
 66 | 
 67 |     ul li a:focus {
 68 |       @apply outline-offset-[2px];
 69 |     }
 70 | 
 71 |     ul li a:hover {
 72 |       @apply text-blue-900 underline;
 73 |     }
 74 | 
 75 |     /* Submenu */
 76 |     ul.accessible-menu__sub-menu {
 77 |       top: calc(100% + 1px);
 78 |       @apply block bg-white invisible rounded-b-md shadow-lg list-none m-0 p-4 space-y-2 lg:absolute lg:right-0 lg:p-8 lg:space-y-4;
 79 | 
 80 |       li {
 81 |         @apply text-lg font-medium;
 82 | 
 83 |         a {
 84 |           @apply block lg:inline-block;
 85 |         }
 86 |       }
 87 |     }
 88 | 
 89 |     ul.accessible-menu__sub-menu--mega {
 90 |       @apply container lg:grid lg:grid-cols-3 lg:gap-20 space-y-6 lg:space-y-0;
 91 | 
 92 |       span {
 93 |         @apply block font-bold text-xl text-gray-600 mb-2 lg:mb-6 lg:text-2xl;
 94 |       }
 95 | 
 96 |       ul {
 97 |         @apply grid grid-cols-1 gap-3;
 98 |       }
 99 |     }
100 | 
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/public/js/app.js:
--------------------------------------------------------------------------------
  1 | const accessibleMenu = function (domNode) {
  2 |     this.rootNode = domNode;
  3 |     this.triggerNodes = [];
  4 |     this.controlledNodes = [];
  5 |     this.openIndex = null;
  6 |     this.useArrowKeys = true;
  7 |   };
  8 |   
  9 |   accessibleMenu.prototype.init = function () {
 10 |     const buttons = this.rootNode.querySelectorAll('button[aria-expanded][aria-controls]');
 11 |     for (var i = 0; i < buttons.length; i++) {
 12 |       const button = buttons[i];
 13 |       const menu = button.parentNode.querySelector('.accessible-menu__sub-menu');
 14 |       if (menu) {
 15 |         // Save ref to button and controlled menu.
 16 |         this.triggerNodes.push(button);
 17 |         this.controlledNodes.push(menu);
 18 |   
 19 |         // Collapse menus.
 20 |         button.setAttribute('aria-expanded', 'false');
 21 |         this.toggleMenu(menu, false);
 22 |   
 23 |         // Attach event listeners.
 24 |         menu.addEventListener('keydown', this.handleMenuKeyDown.bind(this));
 25 |         button.addEventListener('click', this.handleButtonClick.bind(this));
 26 |         button.addEventListener('keydown', this.handleButtonKeyDown.bind(this));
 27 |       }
 28 |     }
 29 | 
 30 |     this.rootNode.addEventListener('focusout', this.handleBlur.bind(this));
 31 | 
 32 |     // Show the menu help instructions when the first button is focused.
 33 |     const menuHelp = document.querySelector('.menu-help-instructions');
 34 |     if (buttons[0].getAttribute('aria-expanded') === 'false') {
 35 |       buttons[0].addEventListener('focusin', () => {
 36 | 
 37 |         window.setTimeout(() => {
 38 |           menuHelp.classList.remove('sr-only');
 39 |         }, 200);
 40 |       });
 41 |   
 42 |       buttons[0].addEventListener('focusout', () => {
 43 |         menuHelp.classList.add('sr-only');
 44 |       });
 45 |     }
 46 |   };
 47 |   
 48 |   accessibleMenu.prototype.toggleMenu = function (domNode, show) {
 49 |     if (domNode) {
 50 |       domNode.style.display = show ? 'grid' : 'none';
 51 |       domNode.style.visibility = show ? 'visible' : 'hidden';
 52 |       domNode.classList.toggle('menu-is-open', show);
 53 |     }
 54 |   };
 55 |   
 56 |   accessibleMenu.prototype.toggleExpand = function (index, expanded) {
 57 |     // Close open menu, if applicable.
 58 |     if (this.openIndex !== index) {
 59 |       this.toggleExpand(this.openIndex, false);
 60 |     }
 61 |   
 62 |     // Handle menu at called index.
 63 |     if (this.triggerNodes[index]) {
 64 |       this.openIndex = expanded ? index : null;
 65 |       this.triggerNodes[index].setAttribute('aria-expanded', expanded);
 66 |       this.toggleMenu(this.controlledNodes[index], expanded);
 67 |     }
 68 |   };
 69 |   
 70 |   accessibleMenu.prototype.controlFocusByKey = function (keyboardEvent, nodeList, currentIndex) {
 71 |     switch (keyboardEvent.key) {
 72 |       case 'ArrowUp':
 73 |       case 'ArrowLeft':
 74 |         keyboardEvent.preventDefault();
 75 |         if (currentIndex > -1) {
 76 |           const prevIndex = Math.max(0, currentIndex - 1);
 77 |           nodeList[prevIndex].focus();
 78 |         }
 79 |         break;
 80 |       case 'ArrowDown':
 81 |       case 'ArrowRight':
 82 |         keyboardEvent.preventDefault();
 83 |         if (currentIndex > -1) {
 84 |           const nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
 85 |           nodeList[nextIndex].focus();
 86 |         }
 87 |         break;
 88 |       case 'Home':
 89 |         keyboardEvent.preventDefault();
 90 |         nodeList[0].focus();
 91 |         break;
 92 |       case 'End':
 93 |         keyboardEvent.preventDefault();
 94 |         nodeList[nodeList.length - 1].focus();
 95 |         break;
 96 |     }
 97 |   };
 98 |   
 99 |   /* Event Handlers */
100 |   accessibleMenu.prototype.handleBlur = function (event) {
101 |     const menuContainsFocus = this.rootNode.contains(event.relatedTarget);
102 |     if (!menuContainsFocus && this.openIndex !== null) {
103 |       this.toggleExpand(this.openIndex, false);
104 |     }
105 |   };
106 |   
107 |   accessibleMenu.prototype.handleButtonKeyDown = function (event) {
108 |     const targetButtonIndex = this.triggerNodes.indexOf(document.activeElement);
109 |   
110 |     // Close the menu on the escape key.
111 |     if (event.key === 'Escape') {
112 |       this.toggleExpand(this.openIndex, false);
113 |     }
114 |   
115 |     // Move focus into the open menu if the current menu is open.
116 |     else if (this.useArrowKeys && this.openIndex === targetButtonIndex && event.key === 'ArrowDown') {
117 |       event.preventDefault();
118 |       this.controlledNodes[this.openIndex].querySelector('a').focus();
119 |     }
120 |   
121 |     // Handle arrow key navigation between top-level buttons, if set.
122 |     else if (this.useArrowKeys) {
123 |       this.controlFocusByKey(event, this.triggerNodes, targetButtonIndex);
124 |     }
125 |   };
126 |   
127 |   accessibleMenu.prototype.handleButtonClick = function (event) {
128 |     const button = event.target;
129 |     const buttonIndex = this.triggerNodes.indexOf(button);
130 |     const buttonExpanded = button.getAttribute('aria-expanded') === 'true';
131 |     this.toggleExpand(buttonIndex, !buttonExpanded);
132 |   };
133 |   
134 |   accessibleMenu.prototype.handleMenuKeyDown = function (event) {
135 |     if (this.openIndex === null) {
136 |       return;
137 |     }
138 |   
139 |     const menuLinks = Array.prototype.slice.call(this.controlledNodes[this.openIndex].querySelectorAll('a'));
140 |     const currentIndex = menuLinks.indexOf(document.activeElement);
141 |   
142 |     // Close the menu on the escape key.
143 |     if (event.key === 'Escape') {
144 |       this.triggerNodes[this.openIndex].focus();
145 |       this.toggleExpand(this.openIndex, false);
146 |     }
147 |   
148 |     // Handle arrow key navigation within menu links, if set.
149 |     else if (this.useArrowKeys) {
150 |       this.controlFocusByKey(event, menuLinks, currentIndex);
151 |     }
152 |   };
153 |   
154 |   // Switch on/off arrow key navigation.
155 |   accessibleMenu.prototype.updateKeyControls = function (useArrowKeys) {
156 |     this.useArrowKeys = useArrowKeys;
157 |   };
158 |   
159 |   // Initialize Menus.
160 |   window.addEventListener('load', function (event) {
161 |     const menus = document.querySelectorAll('.accessible-menu');
162 |     const accessibleMenus = [];
163 |   
164 |     for (var i = 0; i < menus.length; i++) {
165 |       accessibleMenus[i] = new accessibleMenu(menus[i]);
166 |       accessibleMenus[i].init();
167 |     }
168 | 
169 |     // Toggle Hamburger Button & Dropdown.
170 |     const hamburgerButton = document.querySelector('.hamburger-button');
171 |     hamburgerButton.addEventListener('click', function(menu) {
172 |       hamburgerButton.classList.toggle('active');
173 | 
174 |       if (hamburgerButton.getAttribute('aria-expanded') === 'false') {
175 |         // Set aria attribute.
176 |         this.setAttribute("aria-expanded", 'true');
177 |         //Apply toggle class to the first menu from arry.
178 |         menus[0].classList.add('menu-is-open');
179 |       } else {
180 |         this.setAttribute("aria-expanded", 'false');
181 |         menus[0].classList.remove('menu-is-open');
182 |       }
183 |     });
184 |   
185 |   }, false);
186 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <link rel="stylesheet" href="/build/app.css">
  7 |     <link href="https://fonts.googleapis.com/css?family=Heebo:300,400&display=swap" rel="stylesheet">
  8 |     <title>Acessible Menu</title>
  9 |     <!-- iOS -->
 10 |     <meta name="apple-mobile-web-app-capable" content="yes">
 11 |     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 12 |     <meta name="apple-mobile-web-app-title" content="">
 13 |     <!-- Social -->
 14 |     <meta property="og:title" content="Accessible Menu">
 15 |     <meta property="og:type" content="website">
 16 |     <meta property="og:url" content="https://iamputra.com">
 17 |     <meta property="og:description" content="A sandbox app that demonstrates accessible mega menu.">
 18 |     <meta property="og:site_name" content="Accessible Menu">
 19 |     <meta name="twitter:card" content="summary_large_image">
 20 |     <meta name="twitter:site" content="">
 21 |   </head>
 22 |   <body class="bg-gray-100">
 23 | 
 24 |     <!-- Header -->
 25 |     <header class="bg-white relative w-full z-50" role="banner">
 26 |       <div class="container mx-auto">
 27 |         <div class="flex items-center flex-wrap flex-nowrap relative">
 28 | 
 29 |           <!-- Logo -->
 30 |           <a class="flex-none text-blue-900 bg-blue-800 rounded-md hover:bg-blue-600 focus:bg-blue-600" href="#">
 31 |             <span class="sr-only">Acessible Menu Logo</span>
 32 |             <span class="inline-flex items-center justify-center p-2 shadow-lg">
 33 |               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 34 |                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
 35 |               </svg>
 36 |             </span>
 37 |           </a>
 38 | 
 39 |           <!-- Navigation -->
 40 |           <nav 
 41 |             aria-label="Acessible Menu" 
 42 |             role="navigation" 
 43 |             class="w-full flex-none w-auto ml-auto flex items-center">
 44 |             <!-- Keyboard navigation instructions -->
 45 |             <div class="menu-help-instructions absolute bg-white top-[120%] left-0 w-[600px] rounded-md hidden lg:block sr-only shadow-lg p-8">
 46 |               <h3 class="font-bold leading-snug mb-4">Menu Navigation Tips</h3>
 47 |               <p class="font-sans-secondary text-gray-700" aria-labelledby="menu-help-instructions-title">
 48 |                 <span id="menu-help-intro">The following menu has 2 levels.</span>
 49 |                 <span id="menu-help-menus">Use left and right arrow keys to navigate between menus.</span>
 50 |                 <span id="menu-help-submenu">Use the "Space" or "Enter" keys to activate the visibility and explore within a submenu.</span>
 51 |                 <span id="menu-help-escape-submenu">Use the "Home" key to move focus to the first item in the current menu level. Use "End" key to move focus to the last item in the current menu level. 
 52 |                 <span id="menu-help-escape-menu">use escape to exit the menu.</span>
 53 |               </p>
 54 |             </div>
 55 |             <!-- /Keyboard navigation instructions -->
 56 | 
 57 |             <!-- Hamburger Menu -->
 58 |             <button 
 59 |               aria-label="Toggle Hamburger menu"
 60 |               aria-expanded="false"
 61 |               aria-controls="main-menu"
 62 |               aria-haspopup="true"
 63 |               class="hamburger-button bg-gray-100 flex h-10 w-10 items-center rounded-md space-x-2 my-3 lg:hidden">
 64 |               <span class="sr-only">Open Hamburger Menu</span>
 65 |               <div class="w-6 flex items-center justify-center relative">
 66 |                 <span class="line-1 transform transition -translate-y-2 w-full h-0.5 bg-current absolute"></span>
 67 |                 <span class="line-2 transform transition w-full opacity-100 h-0.5 bg-current absolute"></span>
 68 |                 <span class="line-3 transform transition translate-y-2 w-full h-0.5 bg-current absolute"></span>
 69 |               </div>
 70 |             </button>
 71 | 
 72 |             <!-- Menu -->
 73 |             <ul 
 74 |               role="menubar" 
 75 |               aria-label="Acessible Menu" 
 76 |               class="accessible-menu bg-white absolute hidden left-0 top-[120%] rounded-md shadow-lg w-full list-none m-0 p-0 font-sans lg:static lg:w-auto lg:bg-transparent lg:flex lg:rounded-none lg:shadow-none">
 77 |               <li>
 78 |                 <button 
 79 |                   aria-expanded="true" 
 80 |                   aria-haspopup="true" 
 81 |                   aria-controls="id_menu_1" 
 82 |                   class="flex items-center">
 83 |                   Plan Your Visit
 84 |                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 85 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 86 |                   </svg>
 87 |                 </button>
 88 |                 <ul 
 89 |                   id="id_menu_1"
 90 |                   role="menu"
 91 |                   class="accessible-menu__sub-menu accessible-menu__sub-menu--mega">
 92 |                   <li>
 93 |                     <span role="none">Plan Your Visit</span>
 94 |                     <ul>
 95 |                       <li>
 96 |                         <a href="#" role="menuitem">Parking & Directions</a>
 97 |                       </li>
 98 |                       <li>
 99 |                         <a href="#" role="menuitem">Shopping & dining</a>
100 |                       </li>
101 |                       <li>
102 |                         <a href="#" role="menuitem">Group Visits</a>
103 |                       </li>
104 |                       <li>
105 |                         <a href="#" role="menuitem">Accessiblility</a>
106 |                       </li>
107 |                     </ul>
108 |                   </li>
109 |                   <li>
110 |                     <span role="menuitem">Experience the Museum</span>
111 |                     <ul>
112 |                       <li>
113 |                         <a href="#" role="menuitem">Exhibitions</a>
114 |                       </li>
115 |                       <li>
116 |                         <a href="#" role="menuitem">Live Theater</a>
117 |                       </li>
118 |                       <li>
119 |                         <a href="#" role="menuitem">Nature Gardens</a>
120 |                       </li>
121 |                       <li>
122 |                         <a href="#" role="menuitem">Guided Tours</a>
123 |                       </li>
124 |                     </ul>
125 |                   </li>
126 |                   <li>
127 |                     <div class="hidden lg:block">
128 |                       <img class="rounded-md" src="https://fpoimg.com/960x540?bg_color=1d4ed8&text_color=fff" alt="imgAlt">
129 |                       <div class="mt-4">
130 |                         <div>
131 |                           <div class="text-xs text-gray-600 uppercase font-bold tracking-wider">Eyebrow</div>
132 |                           <div class="font-bold text-gray-700 leading-snug">
133 |                             <a href="#" class="hover:underline">Hours & Admission</a>
134 |                           </div>
135 |                         </div>
136 |                       </div>
137 |                     </div>
138 |                   </li>
139 |                 </ul>
140 |               </li>
141 |               <li>
142 |                 <button 
143 |                   aria-expanded="true" 
144 |                   aria-haspopup="true" 
145 |                   aria-controls="id_menu_2" 
146 |                   class="flex items-center">
147 |                   Research & Collections
148 |                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
149 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
150 |                   </svg>
151 |                 </button>
152 |                 <ul 
153 |                   id="id_menu_2"
154 |                   role="menu"
155 |                   class="accessible-menu__sub-menu accessible-menu__sub-menu--mega">
156 |                   <li>
157 |                     <span role="none">Research</span>
158 |                     <ul>
159 |                       <li>
160 |                         <a href="#" role="menuitem">Parking & Directions</a>
161 |                       </li>
162 |                       <li>
163 |                         <a href="#" role="menuitem">Shopping & Dining</a>
164 |                       </li>
165 |                       <li>
166 |                         <a href="#" role="menuitem">Group Visits</a>
167 |                       </li>
168 |                       <li>
169 |                         <a href="#" role="menuitem">Accessiblility</a>
170 |                       </li>
171 |                     </ul>
172 |                   </li>
173 |                   <li>
174 |                     <span role="none">Collections</span>
175 |                     <ul>
176 |                       <li>
177 |                         <a href="#" role="menuitem">Exhibitions</a>
178 |                       </li>
179 |                       <li>
180 |                         <a href="#" role="menuitem">Live Theater</a>
181 |                       </li>
182 |                       <li>
183 |                         <a href="#" role="menuitem">Nature Gardens</a>
184 |                       </li>
185 |                       <li>
186 |                         <a href="#" role="menuitem">Guided Tours</a>
187 |                       </li>
188 |                     </ul>
189 |                   </li>
190 |                   <li>
191 |                     <div class="hidden lg:block">
192 |                       <img class="rounded-md" src="https://fpoimg.com/960x540?bg_color=2563eb&text_color=fff" alt="imgAlt">
193 |                       <div class="mt-4">
194 |                         <div>
195 |                           <div class="text-xs text-gray-600 uppercase font-bold tracking-wider">Eyebrow</div>
196 |                           <div class="font-bold text-gray-700 leading-snug">
197 |                             <a href="#" class="hover:underline">Search the Collection</a>
198 |                           </div>
199 |                         </div>
200 |                       </div>
201 |                     </div>
202 |                   </li>
203 |                 </ul>
204 |               </li>
205 |               <li>
206 |                 <button 
207 |                   aria-expanded="true" 
208 |                   aria-haspopup="true" 
209 |                   aria-controls="id_menu_3"
210 |                   class="flex items-center">
211 |                   Support
212 |                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
213 |                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
214 |                   </svg>
215 |                 </button>
216 |                 <ul 
217 |                   id="id_menu_3"
218 |                   role="menu"
219 |                   class="accessible-menu__sub-menu">
220 |                   <li>
221 |                     <a href="#" role="menuitem">Membership</a>
222 |                   </li>
223 |                   <li>
224 |                     <a href="#" role="menuitem">Ways to Give</a>
225 |                   </li>
226 |                   <li>
227 |                     <a href="#" role="menuitem">Corporate Support</a>
228 |                   </li>
229 |                   <li>
230 |                     <a href="#" role="menuitem">Volunteer</a>
231 |                   </li>
232 |                   <li>
233 |                     <a href="#" role="menuitem">Make a Donation</a>
234 |                   </li>
235 |                 </ul>
236 |               </li>
237 |             </ul>
238 |             <!-- /Menu -->
239 |           </nav>
240 |           <!-- /Navigation -->
241 |         </div>
242 |       </div>
243 |     </header>
244 |     <!-- /Header -->
245 | 
246 |     <!-- Main -->
247 |     <main 
248 |       id="main-content" 
249 |       tabindex="-1" 
250 |       role="main" 
251 |       aria-label="Sample page content"
252 |       class="bg-gradient-to-r from-blue-900 to-blue-800 relative mt-[25rem] overflow-x-hidden">
253 |       <svg class="absolute w-full z-20 top-[-0.063rem] scale-[1.05]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1435 74">
254 |         <path class="fill-current text-gray-100" d="M0 0h1440v74C1200 27.3 960 4 720 4S240 27.3 0 74V0z" fill="none" />
255 |       </svg>
256 |   
257 |       <div class="container flex flex-wrap h-full items-center mx-auto ">
258 | 
259 |         <!-- Section Intro -->
260 |         <section class="self-start w-full pt-12 pb-12 md:pt-100 md:pb-100 border-b border-blue-700 border-solid text-center">
261 |           <h1 class="text-3xl md:text-5xl font-bold font-sans text-white mb-4 tracking-tight">accessible menu</h1>
262 |           <p class="text-base sm:text-xl text-blue-200 font-sans-primary w-10/12 sm:max-w-2xl mx-auto">A sandbox static page that demonstrates WCAG accessible mega menu using Tailwind CSS v.3 and extending from Disclosure Menus.</p>
263 |         </section>
264 |         <!-- /Section Intro -->
265 | 
266 |         <!-- Section Keyboard Support -->
267 |         <section class="pt-12 pb-12 md:pt-100 md:pb-100 text-center">
268 |           <h2 class="text-xl md:text-2xl font-bold font-sans text-white mb-5 tracking-tight">Keyboard Support</h2>
269 |           <div class="flex flex-wrap -mx-1 lg:-mx-4">
270 | 
271 |             <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
272 |               <div class="bg-white h-full overflow-hidden rounded-md p-5 shadow-lg">
273 |                 <h3 class="mb-2 text-2xl font-bold text-gray-900">Tab Shift + Tab</h3>
274 |                 <p class="mb-3 font-normal text-gray-700">Use the tab and shift-tab keys to access top-level menu links or to focus on the previous links.</p>
275 |               </div>
276 |             </div>
277 | 
278 |             <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
279 |               <div class="bg-white h-full overflow-hidden rounded-md p-5 shadow-lg">
280 |                 <h3 class="mb-2 text-2xl font-bold text-gray-900">Space or Enter</h3>
281 |                 <p class="mb-3 font-normal text-gray-700">Use the "Space" or "Enter" keys to activate the visibility of the menu dropdown.</p>
282 |               </div>
283 |             </div>
284 | 
285 |             <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
286 |               <div class="bg-white h-full overflow-hidden rounded-md p-5 shadow-lg">
287 |                 <h3 class="mb-2 text-2xl font-bold text-gray-900">Escape</h3>
288 |                 <p class="mb-3 font-normal text-gray-700">Use this key to close the current dropdown menu and return focus to the element that spawned it.</p>
289 |               </div>
290 |             </div>
291 | 
292 |             <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
293 |               <div class="bg-white h-full overflow-hidden rounded-md p-5 shadow-lg">
294 |                 <h3 class="mb-2 text-2xl font-bold text-gray-900">Up or Down arrow</h3>
295 |                 <p class="mb-3 font-normal text-gray-700">Use the "Up" key to move focus to the previous item in the menu links. If the focus is on the first item, move focus to the last item.
296 |                   Use the "Down" key to move focus to the next item in the menu links. If the focus is on the last item, move focus to the first item.</p>
297 |               </div>
298 |             </div>
299 | 
300 |             <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
301 |               <div class="bg-white h-full overflow-hidden rounded-md p-5 shadow-lg">
302 |                 <h3 class="mb-2 text-2xl font-bold text-gray-900">Right or Left arrow</h3>
303 |                 <p class="mb-3 font-normal text-gray-700">Use the "Right" key to move focus to the next item in the menu links. If the focus is on the last item, move focus to the first item.
304 |                   Use the "Left" key to move focus to the previous item in the menu links. If the focus is on the first item, move focus to the last item.</p>
305 |               </div>
306 |             </div>
307 | 
308 |             <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
309 |               <div class="bg-white h-full overflow-hidden rounded-md p-5 shadow-lg">
310 |                 <h3 class="mb-2 text-2xl font-bold text-gray-900">Home or End</h3>
311 |                 <p class="mb-3 font-normal text-gray-700">Use the "Home" to move focus to the first item in the current menu level. Use "End" to move focus to the last item in the current menu level.</p>
312 |               </div>
313 |             </div>
314 | 
315 |           </div>
316 |         </section>
317 |         <!-- /Section Keyboard Support -->
318 |   
319 |       </div>
320 |     </main>
321 |     <!-- /Main -->
322 | 
323 |     <!-- Footer -->
324 |     <footer id="footer" class="bg-gradient-to-r from-blue-900 to-blue-800 overflow-hidden relative">
325 |       <div class="container flex flex-wrap h-full items-center mx-auto text-white text-center">
326 |         <div class="sm:flex footer-bottom border-t border-blue-700 border-solid self-end pt-12 pb-12 sm:pt-100 sm:pb-100 w-full">
327 |           <div class="mx-auto w-11/12 sm-pb-0 sm:w-1/3 text-center">
328 |             <p class="text-sm text-blue-300 font-light">© 2022, all rights reserved</p>
329 |           </div>
330 |         </div>
331 |       </div>
332 |     </footer>
333 | 
334 |     <!-- /Footer -->
335 |     <script src="js/app.js"></script>
336 |   </body>
337 | </html>
338 | 


--------------------------------------------------------------------------------