fix(components): dropdown

focus du première element et ajout des role
Orange-OpenSource · Dec 21, 2015 · 37b2087 · 37b2087
1 parent 65cef4f
commit 37b2087
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -109,11 +109,15 @@ const Dropdown = (($) => {
         return false
       }
 
-      this.focus()
+      //this.focus()
       this.setAttribute('aria-expanded', 'true')
-
+
+
+	  // patch to select  by default first item 
+
       $(parent).toggleClass(ClassName.OPEN)
       $(parent).trigger($.Event(Event.SHOWN, relatedTarget))
+	  $(this).parent().find('.dropdown-menu a:first-child').focus()
 
       return false
     }
@@ -203,6 +207,7 @@ const Dropdown = (($) => {
     }
 
     static _dataApiKeydownHandler(event) {
+		console.log('_dataApiKeydownHandler')
       if (!/(38|40|27|32)/.test(event.which) ||
          /input|textarea/i.test(event.target.tagName)) {
         return
@@ -259,7 +264,11 @@ const Dropdown = (($) => {
 
   }
 
-
+  // set default acessibility Attributes
+  $( document ).ready( function () {
+	$('.dropdown-menu').attr('role','menu')
+	$('.dropdown-menua a.dropdown-item').attr('role','menuitem')
+  })
   /**
    * ------------------------------------------------------------------------
    * Data Api implementation

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -22,13 +22,13 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
     <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
 
-      <ul class="nav navbar-nav pull-left">
+      <ul class="nav navbar-nav pull-left" >
 
         <li class="dropdown nav-item">
           <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropdown
           </a>
-          <div class="dropdown-menu" aria-labelledby="drop1">
+          <div class="dropdown-menu" aria-labelledby="drop1" role="menu" >
             <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
             <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
             <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>