Merge pull request #107 from christophery/a11y

merged A11y branch with master

.gitignore

@@ -5,6 +5,7 @@
 node_modules
 .sass-cache
 .htaccess
+*.map
 
 # Compiled source #
 ###################

LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Christopher Yee
+Copyright (c) 2017 Christopher Yee
 http://www.christopheryee.ca
 
 Permission is hereby granted, free of charge, to any person obtaining

README.md

@@ -34,19 +34,21 @@ Download the [packaged source file](https://github.com/christophery/pushy/archiv
 ```html
 <!-- Pushy Menu -->
 <nav class="pushy pushy-left">
-    <ul>
-        <!-- Submenu -->
-        <li class="pushy-submenu">
-            <a href="#">Submenu</a>
-            <ul>
-                <li class="pushy-link"><a href="#">Item 1</a></li>
-                <li class="pushy-link"><a href="#">Item 2</a></li>
-                <li class="pushy-link"><a href="#">Item 3</a></li>
-            </ul>
-        </li>
-        <li class="pushy-link"><a href="#">Item 1</a></li>
-        <li class="pushy-link"><a href="#">Item 2</a></li>
-    </ul>
+    <div class="pushy-content">
+        <ul>
+            <!-- Submenu -->
+            <li class="pushy-submenu">
+                <button>Submenu</button>
+                <ul>
+                    <li class="pushy-link"><a href="#">Item 1</a></li>
+                    <li class="pushy-link"><a href="#">Item 2</a></li>
+                    <li class="pushy-link"><a href="#">Item 3</a></li>
+                </ul>
+            </li>
+            <li class="pushy-link"><a href="#">Item 1</a></li>
+            <li class="pushy-link"><a href="#">Item 2</a></li>
+        </ul>
+    </div>
 </nav>
 
 <!-- Site Overlay -->
@@ -55,7 +57,7 @@ Download the [packaged source file](https://github.com/christophery/pushy/archiv
 <!-- Your Content -->
 <div id="container">
     <!-- Menu Button -->
-    <div class="menu-btn">&#9776; Menu</div>
+    <button class="menu-btn">&#9776; Menu</button>
 </div>
 ```
 
@@ -74,10 +76,12 @@ bower install pushy
 ```html
 <!-- Pushy will transition from the right -->
 <nav class="pushy pushy-right">
-    <ul>
-        <li class="pushy-link"><a href="#">Item 1</a></li>
-        <li class="pushy-link"><a href="#">Item 2</a></li>
-    </ul>
+    <div class="pushy-content">
+        <ul>
+            <li class="pushy-link"><a href="#">Item 1</a></li>
+            <li class="pushy-link"><a href="#">Item 2</a></li>
+        </ul>
+    </div>
 </nav>
 ```
 
@@ -135,12 +139,14 @@ $menu_width: 400px;
 
 ```html
 <nav class="pushy pushy-left">
-    <ul>
-        <!-- This link will close the menu -->
-        <li class="pushy-link"><a href="#">Item 1</a></li>
-        <!-- This link won't close the menu -->
-        <li><a href="#">Item 2</a></li>
-    </ul>
+    <div class="pushy-content">
+        <ul>
+            <!-- This link will close the menu -->
+            <li class="pushy-link"><a href="#">Item 1</a></li>
+            <!-- This link won't close the menu -->
+            <li><a href="#">Item 2</a></li>
+        </ul>
+    </div>
 </nav>
 ```
 
@@ -154,18 +160,55 @@ html, body{
 }
 ```
 
+- Use the `data-focus` attribute to give focus to a link when Pushy is opened. Ideally the first link of the menu should be focused. For example `.home-page` or `#profile-page`.
+
+```html
+<nav class="pushy pushy-left" data-focus="#first-link">
+    <div class="pushy-content">
+        <ul>
+            <li class="pushy-submenu">
+                <button id="first-link">Submenu 1</button>
+                <ul>
+                    <li class="pushy-link"><a href="#">Item 1</a></li>
+                    <li class="pushy-link"><a href="#">Item 2</a></li>
+                    <li class="pushy-link"><a href="#">Item 3</a></li>
+                </ul>
+            </li>
+            <li class="pushy-link"><a href="#">Item 1</a></li>
+            <li class="pushy-link"><a href="#">Item 2</a></li>
+            <li class="pushy-link"><a href="#">Item 3</a></li>
+            <li class="pushy-link"><a href="#">Item 4</a></li>
+        </ul>
+    </div>
+</nav>
+```
+
 ##Browser Compatibility
 
 | Desktop       | Mobile                                     |
 | ------------- | -------------------------------------------|
-| IE 9-11       | Chrome (Android 4.x+)                      |
-| MS Edge       | Safari (iOS 9)                             |
+| IE 9-11       | Chrome (Android)                           |
+| MS Edge       | Safari (iOS)                               |
 | Chrome        |                              
 | Firefox       | 
 | Safari (Mac)  |
 
 ##Version History
 
+1.1.0
+
+- Accessiblity (a11y) enhancements:
+a) Can access and use menu with keyboard navigation.
+b) Can use the escape key to close the menu when opened.
+c) Changed the empty submenu links to buttons.
+d) Added `data-focus` attribute to allow user to specify a link to focus on when menu is opened.
+e) Added `.pushy-content` element to menu structure (fixes visibility flickering).
+f) Changed `.menu-btn` div to button.
+
+- Removed some redundant CSS classes from `pushy.css`.
+- Removed `toggleSubmenuFallback` function, older browsers will use `toggleSubmenu` instead.
+- Fixed issue #88
+
 1.0.0
 
 - Added auto-collapsable submenus.

css/normalize.css

@@ -96,14 +96,6 @@ body {
    Links
    ========================================================================== */
 
-/**
- * Address `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */