fix(component): priority nav

accessibility open dropdown on focus
juliendelage · Apr 27, 2017 · 9fd8cd8 · 9fd8cd8
1 parent 3e3ebf8
commit 9fd8cd8
Show file tree

Hide file tree

Showing 7 changed files with 296 additions and 18 deletions.
diff --git a/docs-orange/examples/priority-nav/css/main.css b/docs-orange/examples/priority-nav/css/main.css
@@ -0,0 +1,56 @@
+/* Custom nav */
+
+main {
+    display: flex;
+    flex-direction: row;
+}
+
+.content {
+    flex-grow: 1;
+}
+
+.mega-menu {
+    position: static;
+    width: 300px;
+    flex-grow: 0;
+    min-height: calc(100vh - 6.25rem);
+    background-color: #eee;
+}
+
+.mega-menu .nav-link:focus {
+    outline-offset: -1px;
+}
+
+.overflow-nav {
+  display: none;
+}
+
+.o-nav-local.resizing {
+  overflow: hidden;
+}
+
+.hide {
+  display: none !important;
+}
+
+.show-inline-block {
+  display: inline-block !important;
+}
+
+.fb-nav {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+
+.fb-nav li + li {
+  margin-left: 20px;
+}
+
+.fb-nav .dropdown-toggle {
+  padding: 0;
+}
diff --git a/docs-orange/examples/priority-nav/index.html b/docs-orange/examples/priority-nav/index.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html class="no-js" lang="fr">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>Boosted playground</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="../../dist/css/orangeHelvetica.css" rel="stylesheet">
+        <link href="../../dist/css/orangeIcons.css" rel="stylesheet">
+        <link rel="stylesheet" href="../../dist/css/boosted.css" />
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+        <!--[if lt IE 8]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+
+        <header class="" role="banner">
+          <nav class="navbar navbar-toggleable navbar-inverse">
+              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbarHead">
+                  <span class="sr-only">toggle navigation</span>
+                  <span class="icon-menu"></span>
+              </button>
+              <div class="container" >
+                <a class="navbar-brand" href="">
+                    <img src="dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Go to homepage"/>
+                </a>
+                <ul class="navbar-nav">
+                    <li class="nav-item"><a class="nav-link" href="">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">Getting started</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">News</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">Shop</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">Internet</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">Mobile</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">Intranet</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">World</a></li>
+                    <li class="nav-item"><a class="nav-link" href="">Other</a></li>
+                    <li class="overflow-nav nav-item dropdown">
+                        <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true">More</a>
+                        <ul class="overflow-nav-list dropdown-menu"></ul>
+                    </li>
+                </ul>
+            </div>
+          </nav>
+
+        </header>
+        <main>
+            <div class="container-fluid">
+                <h1>Page Title</h1>
+                <h2>Local navigation</h2>
+                <div class="o-nav-local">
+                    <hr aria-hidden="true">
+                    <nav class="container-fluid">
+                        <ul class="nav" id="local_nav">
+                            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">Clients</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">Buy Lemons</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">Dance Wildly</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">Go To Bed</a></li>
+                            <li class="nav-item"><a class="nav-link" href="#">Donate Millions</a></li>
+                            <li class="overflow-nav nav-item dropdown">
+                                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button">More</a>
+                                <ul class="overflow-nav-list dropdown-menu"></ul>
+                            </li>
+                        </ul>
+                        <ul class="nav">
+                            <li class="nav-item"><a class="nav-link" href="#">Look at me, I'm an Ad !</a></li>
+                        </ul>
+                    </nav>
+                    <hr aria-hidden="true">
+                </div>
+
+                <h2>Tabs</h2>
+                <ul class="nav nav-tabs" role="tablist">
+                    <li class="nav-item">
+                        <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
+                    </li>
+                    <li class="nav-item hidden-xs-down">
+                        <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
+                    </li>
+                    <li class="nav-item hidden-xs-down">
+                        <a class="nav-link" data-toggle="tab" href="#settings2" role="tab">Settings 2</a>
+                    </li>
+                    <li class="nav-item hidden-xs-down">
+                        <a class="nav-link" data-toggle="tab" href="#settings3" role="tab">Settings 3</a>
+                    </li>
+                    <li class="nav-item hidden-xs-down">
+                        <a class="nav-link" data-toggle="tab" href="#settings4" role="tab">Settings 4</a>
+                    </li>
+                    <li class="nav-item hidden-xs-down">
+                        <a class="nav-link" data-toggle="tab" href="#settings5" role="tab">Settings 5</a>
+                    </li>
+                    <li class="overflow-nav nav-item dropdown hidden-xs-down">
+                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">More</a>
+                        <ul class="overflow-nav-list dropdown-menu"></ul>
+                    </li>
+                </ul>
+
+                <!-- Tab panes -->
+                <div class="tab-content">
+                    <div class="tab-pane active" id="home" role="tabpanel">home content</div>
+                    <div class="tab-pane" id="profile" role="tabpanel">profile content</div>
+                    <div class="tab-pane" id="messages" role="tabpanel">messages content</div>
+                    <div class="tab-pane" id="settings" role="tabpanel">settings content</div>
+                    <div class="tab-pane" id="settings2" role="tabpanel">settings 2 content</div>
+                    <div class="tab-pane" id="settings3" role="tabpanel">settings 3 content</div>
+                    <div class="tab-pane" id="settings4" role="tabpanel">settings 4 content</div>
+                    <div class="tab-pane" id="settings5" role="tabpanel">settings 5 content</div>
+                </div>
+
+                <h2>Pills</h2>
+                <ul class="nav nav-pills">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="#">Active</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Other</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Long link title</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Link 2</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Link 3</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Link 4</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Link 5</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Link 6</a>
+                    </li>
+                    <li class="overflow-nav nav-item dropdown">
+                        <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true">More</a>
+                        <ul class="overflow-nav-list dropdown-menu"></ul>
+                    </li>
+                </ul>
+            </div>
+        </main>
+
+        <footer style="margin-top: 50rem;"></footer>
+
+        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+        <script src="../../dist/js/boosted.js"></script>
+        <script src="js/main.js"></script>
+    </body>
+</html>
diff --git a/docs-orange/examples/priority-nav/js/main.js b/docs-orange/examples/priority-nav/js/main.js
@@ -0,0 +1,22 @@
+'use strict';
+
+(function() {
+
+    $(document).ready(function() {
+
+        $('a').on('click', function(e){
+            e.preventDefault();
+        });
+
+        //---------------------------------- Priority nav test
+
+        $('.o-nav-local').prioritynav();
+        $('.nav-tabs').prioritynav();
+        $('.nav-pills').prioritynav();
+        $('.navbar').prioritynav();
+
+        //----------------- Priority nav test end
+
+    });
+})();
+
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -55,7 +55,7 @@ const Dropdown = (($) => {
     ROLE_LISTBOX  : '[role="listbox"]',
     NAVBAR_NAV    : '.navbar-nav',
     // Boosted mod
-    FIRST_ITEM_IN_MENU : '.dropdown-menu .dropdown-item:not(.disabled)',
+    FIRST_ITEM_IN_MENU : '.dropdown-menu .dropdown-item:not(.disabled), .dropdown-menu .nav-link:not(.disabled)',
     // end mod
     VISIBLE_ITEMS : '[role="menu"] li:not(.disabled) a, '
                   + '[role="listbox"] li:not(.disabled) a'
@@ -146,7 +146,6 @@ const Dropdown = (($) => {
       $(this._element).on(Event.CLICK, this.toggle)
     }
 
-
     // static
 
     static _jQueryInterface(config) {

diff --git a/js/src/o-priority-nav.js b/js/src/o-priority-nav.js
@@ -21,12 +21,13 @@ const PriorityNav = (($) => {
   const RESIZE_DURATION = 500
 
   const Event = {
-    RESIZE: 'resize'
+    RESIZE: 'resize',
+    FOCUS: 'focus'
   }
 
   const ClassName = {
     PRIORITY: 'priority',
-    HIDE: 'hide'
+    HIDE: 'sr-only'
   }
 
   const Selector = {
@@ -48,7 +49,11 @@ const PriorityNav = (($) => {
       this._element = element
       this._config = config
 
-      this._$menu = $(element)
+      if($(element).is('ul')) {
+        this._$menu = $(element)
+      } else {
+        this._$menu = $(element).find('ul').first()
+      }
       this._$allNavElements = this._$menu.find(Selector.NAV_ELEMENTS)
       this._bindUIActions()
       this._setupMenu()
@@ -76,15 +81,6 @@ const PriorityNav = (($) => {
       // Used to snag the previous menu item in addition to ones that have wrapped
       let first = true
 
-      // move priority element out of wrap
-      const $priorityEl = this._$menu.find(Selector.PRIORITY_ELEMENT)
-
-      if ($priorityEl.length > 0 && $priorityEl.position().top !== firstPos.top) {
-        while ($priorityEl.position().top !== firstPos.top) {
-          $priorityEl.insertBefore($priorityEl.prev())
-        }
-      }
-
       // Loop through all the nav items...
       this._$allNavElements.each(function (i) {
         const $elm = $(this)
@@ -112,6 +108,7 @@ const PriorityNav = (($) => {
 
         // Hide ones that we're moving
         $wrappedElements.addClass(ClassName.HIDE)
+        $wrappedElements.find('.nav-link').attr('tabindex', -1)
 
         // Add wrapped elements to dropdown
         this._$menu.find('.overflow-nav-list').append(newSet)
@@ -121,14 +118,29 @@ const PriorityNav = (($) => {
 
         // Make overflow visible again so dropdown can be seen.
         this._$menu.find('.o-nav-local').css('overflow', 'visible')
+
+        // Check if menu doesn't overflow after process
+        if(this._$menu.find('.overflow-nav').position().top !== firstPos.top) {
+          const $item = $(this._element).find('.' + ClassName.HIDE).first().prev()
+          const $itemDuplicate = $item.clone()
+
+          $item.addClass(ClassName.HIDE)
+          $item.find('.nav-link').attr('tabindex', -1)
+
+          this._$menu.find('.overflow-nav-list').prepend($itemDuplicate)
+        }
       }
 
+      //hide menu from AT
+      this._$menu.find('.overflow-nav').attr('aria-hidden', true)
+
     }
 
     _tearDown() {
       this._$menu.find('.overflow-nav-list').empty()
       this._$menu.find('.overflow-nav').removeClass('show-inline-block')
       this._$allNavElements.removeClass(ClassName.HIDE)
+      this._$allNavElements.find('.nav-link').attr('tabindex', 0)
     }
 
     _bindUIActions() {
@@ -141,6 +153,10 @@ const PriorityNav = (($) => {
           this._$menu.removeClass('resizing')
         }, RESIZE_DURATION)
       })
+
+      this._$menu.find('.overflow-nav .dropdown-toggle').on(Event.FOCUS, (e) => {
+        $(e.target).dropdown('toggle')
+      })
     }
 
     // static

diff --git a/scss/_o-nav-local.scss b/scss/_o-nav-local.scss
@@ -11,6 +11,16 @@
     border-top: 1px solid $gray-light-o;
   }
 
+  > .container,
+  > .container-fluid {
+    display: flex;
+  }
+
+  ul + ul {
+    margin-left: 1rem;
+    flex-shrink: 0;
+  }
+
   .nav-item + .nav-item {
     margin-left: 1rem;
   }
@@ -21,6 +31,9 @@
 
   .nav-link,
   .dropdown-toggle {
+    @include focus {
+      outline: 1px dotted #000;
+    }
     display: inline-block;
     padding: .9375rem 0 1.0625rem;
     font-size: $font-size-base;
@@ -46,6 +59,9 @@
     }
 
     .nav-link {
+      @include focus {
+        outline-offset: -2px;
+      }
       display: block;
       padding: .625rem .625rem .625rem 1.25rem;
     }