├── .babelrc ├── .browserslistrc ├── .entrypoint ├── local-dev-entrypoint.sh └── server-entrypoint.sh ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .nvmrc ├── README.md ├── composer.json ├── composer.lock ├── dist ├── Navigation.js ├── Navigation.js.map ├── Navigation.min.js ├── main.css └── main.css.map ├── docker-compose.yml ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json ├── public ├── css │ └── style.css └── js │ └── index.js ├── src ├── A11y │ └── Menu_Walker.php ├── js │ ├── Navigation │ │ └── Navigation.js │ ├── exports.js │ ├── index.js │ └── utils │ │ └── displayMenu.js ├── mock-data │ ├── mock-menu.json │ └── test-data.json └── scss │ ├── extra-styles.scss │ ├── icon-styles.scss │ └── main.scss ├── twentytwenty-child ├── functions.php ├── header.php ├── index.js └── style.css ├── webpack.common.js ├── webpack.dev.js ├── webpack.prod.js └── www ├── index.php └── wp-config.php /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "debug": true, 7 | "useBuiltIns": "usage", 8 | "corejs": 3 9 | } 10 | ] 11 | ] 12 | } -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers we support 2 | 3 | cover 99.5% 4 | not IE <= 9 -------------------------------------------------------------------------------- /.entrypoint/local-dev-entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | yarn install -s --no-progress 4 | # yarn upgrade a11y-menu 5 | 6 | gulp watch 7 | -------------------------------------------------------------------------------- /.entrypoint/server-entrypoint.sh: -------------------------------------------------------------------------------- 1 | /etc/init.d/iptables stop 2 | 3 | exec "$@" 4 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: main 2 | on: [push] 3 | jobs: 4 | build-assets: 5 | runs-on: ubuntu-16.04 6 | steps: 7 | - name: Checkout repo 8 | uses: actions/checkout@v2 9 | - name: Setup node 10 | uses: actions/setup-node@v2 11 | with: 12 | node-version: '14.15.1' 13 | - name: Install dependencies 14 | run: npm install 15 | - name: Build 16 | run: npm run build 17 | - name: Commit changes 18 | uses: Endbug/add-and-commit@v6 19 | with: 20 | author_name: Adam Berkowitz 21 | author_email: berkowitz.clarinet@gmail.com 22 | message: 'Commit from github actions - build-assets' 23 | add: 'dist' -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | .sass-cache/ 4 | node_modules 5 | dist/index.js 6 | dist/index.js.map 7 | /vendor/ 8 | /www/* 9 | !/www/wp-config.php 10 | !/www/index.php 11 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 14.15.1 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # a11y Menu 2 | This project aims to create a re-useable and accessible main navigation module. There are a few goals... 3 | - Be able to include this package as a standalone or in a WordPress plugin/theme 4 | - Allow for quick implementation of accessible menus 5 | - Menus should allow for developer customization particularly with respect to style 6 | - Menu functionality should take into account different modes of user input (e.g. mouse, keyboard) 7 | 8 | ## Usage 9 | ### Installing via NPM 10 | This package can be installed via npm using `npm install a11y-menu`. This will provide access to the JS and sass files, but _not_ the WordPress menu walker. The intention is to give javascript developers access to the JS menu walker, navigation script, and styles in a way that can be used with webpack or other bundlers. 11 | 12 | ### Creating a menu via JS 13 | There are two functions and one stylesheet that can be used together to create an accessible menu. 14 | 15 | - `displayMenu` 16 | - `Navigation` 17 | - main.scss 18 | 19 | `displayMenu()` takes a json file (see /mock-data below for the format). It can be imported and used as follows 20 | ```js 21 | import { displayMenu } from 'a11y-menu'; 22 | // testData is an arbitrary json file. 23 | import { menu } from './test-data.json'; 24 | const mainMenu = document.getElementById('main-menu'); 25 | 26 | displayMenu(mainMenu, menu); 27 | ``` 28 | This can be combined with the `Navigation` class to create a working menu with submenus that display on either click or hover events. 29 | 30 | ```js 31 | // clickable menu 32 | import Navigation, { displayMenu } from 'a11y-menu'; 33 | // testData is an arbitrary json file. 34 | import { menu } from './test-data.json'; 35 | const mainMenu = document.getElementById('main-menu'); 36 | 37 | mainMenu.classList.add('am-click-menu'); 38 | 39 | displayMenu(mainMenu, menu); 40 | 41 | const navigation = new Navigation({ click: true }); 42 | 43 | document.addEventListener('DOMContentLoaded', () => { 44 | navigation.init(); 45 | }); 46 | 47 | ``` 48 | ```js 49 | // hoverable menu 50 | import Navigation, { displayMenu } from 'a11y-menu'; 51 | // testData is an arbitrary json file. 52 | import { menu } from './test-data.json'; 53 | 54 | const mainMenu = document.getElementById('main-menu'); 55 | 56 | // if needed 57 | mainMenu.classList.remove('am-click-menu'); 58 | 59 | displayMenu(mainMenu, menu); 60 | 61 | const navigation = new Navigation(); 62 | 63 | document.addEventListener('DOMContentLoaded', () => { 64 | navigation.init(); 65 | }); 66 | 67 | ``` 68 | 69 | `main.scss` can be required using webpack or similar. Another option is to include in your project the transpiled css file that can be found at `dist/main.css`. 70 | 71 | 72 | ### Installing via Composer. 73 | This package can be installed as a dependency via [Composer](https://getcomposer.org/). To check if you have Composer installed, run the `composer` command in the terminal. If Composer's not available, install it. Then within your project run `composer require ucomm/a11y-menu`. 74 | ### Creating a menu with PHP 75 | For non-WordPress PHP projects, you can use the [`aberkow/a11y-menu-php` composer package](https://github.com/aberkow/a11y-menu-php). The package takes the place of the javascript `displayMenu` function for PHP projects. It can be installed with `composer require aberkow/a11y-menu-php` and exposes a single static method which can be used like this: 76 | ```php 77 | menu; 82 | 83 | ?> 84 | 89 | ``` 90 | ### Creating a WordPress menu in a theme. 91 | In order to use the custom Walker within your theme, you'll need to do the following 92 | ```php 93 | // functions.php 94 | require_once('vendor/autoload.php'); 95 | 96 | // register a menu location. 97 | // this is optional if you're using a child theme with pre-registered locations 98 | function register_nav() { 99 | register_nav_menu('menu-name', __('Menu Name', 'text-domain')); 100 | } 101 | add_action('after_setup_theme', 'register_nav'); 102 | 103 | 104 | function load_scripts() { 105 | // enqueue the base nav styles 106 | wp_enqueue_style('a11y-menu', get_stylesheet_directory_uri() . '/vendor/ucomm/a11y-menu/dist/main.css'); 107 | // register/enqueue the JS Navigation script 108 | wp_register_script('a11y-menu', get_stylesheet_directory_uri() . '/vendor/ucomm/a11y-menu/dist/Navigation.js', array(), false, true); 109 | 110 | wp_enqueue_script('a11y-menu'); 111 | 112 | // the Navigation script is a dependency of the script where you wish to instantiate the class. 113 | wp_enqueue_script('theme-script', get_stylesheet_directory_uri() . '/index.js', array('a11y-menu', false, true)); 114 | } 115 | add_action('wp_enqueue_scripts', 'load_scripts'); 116 | ``` 117 | 118 | ```php 119 | /** 120 | * header.php (or whichever file you want to use for displaying the menu) 121 | * 122 | * container -> this should be set to 'nav' for better accessibility and to make sure the CSS works. 123 | * items_wrap -> ensures that you can use a custom ID for the