File tree Expand file tree Collapse file tree 3 files changed +14
-5
lines changed
Expand file tree Collapse file tree 3 files changed +14
-5
lines changed Original file line number Diff line number Diff line change @@ -34,7 +34,7 @@ import {
3434} )
3535export class OverflowMenuOption {
3636 @HostBinding ( "class" ) optionClass = "bx--overflow-menu-options__option" ;
37- @HostBinding ( "attr.role" ) role = "none " ;
37+ @HostBinding ( "attr.role" ) role = "presentation " ;
3838
3939 @HostBinding ( "class.bx--overflow-menu-options__option--danger" )
4040 public get isDanger ( ) : Boolean {
Original file line number Diff line number Diff line change @@ -46,7 +46,16 @@ export class OverflowMenuPane extends Dialog {
4646 this . dialogConfig . menuLabel = this . i18n . get ( ) . OVERFLOW_MENU . OVERFLOW ;
4747 }
4848
49- setTimeout ( ( ) => this . listItems ( ) [ 0 ] . focus ( ) ) ;
49+ setTimeout ( ( ) => {
50+ let options = Array . from < any > ( this . dialog . nativeElement . querySelectorAll ( "*" ) ) ;
51+
52+ options . forEach ( element => {
53+ if ( element . tabIndex === 0 ) {
54+ element . tabIndex = - 1 ;
55+ }
56+ } ) ;
57+ this . listItems ( ) [ 0 ] . focus ( ) ;
58+ } , 0 ) ;
5059 }
5160
5261 @HostListener ( "keydown" , [ "$event" ] )
@@ -87,15 +96,15 @@ export class OverflowMenuPane extends Dialog {
8796 break ;
8897
8998 case "Esc" : // IE specific value
90- case "Escape" : {
99+ case "Escape" :
91100 event . stopImmediatePropagation ( ) ;
92101 this . doClose ( ) ;
93102 break ;
94- }
95103 }
96104 }
97105
98106 clickClose ( event ) {
107+ // Opens menu when you click on the menu button and stays open when navigating through the options
99108 if ( this . dialogConfig . parentRef . nativeElement . firstChild . contains ( event . target ) ||
100109 this . listItems ( ) . some ( button => button === ( event . relatedTarget ) ) ||
101110 ( event . type === "focusout" && event . relatedTarget === this . dialogConfig . parentRef . nativeElement ) ) {
Original file line number Diff line number Diff line change @@ -18,7 +18,7 @@ storiesOf("Overflow Menu", module)
1818 </ibm-overflow-menu-option>
1919 <ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
2020 <li class="bx--overflow-menu-options__option">
21- <button class="bx--overflow-menu-options__btn" tabindex="-1" >A fully custom option</button>
21+ <button class="bx--overflow-menu-options__btn">A fully custom option</button>
2222 </li>
2323 <ibm-overflow-menu-option>Option 4</ibm-overflow-menu-option>
2424 <ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
You can’t perform that action at this time.
0 commit comments