Skip to content

Commit

Permalink
Add Related Item button keyboard accessibility (#1259)
Browse files Browse the repository at this point in the history
* make related item button keyboard accessible

* open the related item option on enter press

* hide the menu when focusout from add related items menu

---------

Co-authored-by: Jagdish Kunwar <jkunwar@lunageo.com>
  • Loading branch information
jkunwar and kunwarj authored Feb 5, 2025
1 parent 6d22be2 commit 79bc8db
Showing 1 changed file with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions nunaliit2-js/src/main/js/nunaliit2/n2.jquery.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,15 @@ if( typeof $.widget === 'function' ){
var text = this.element.find('option').first().text();
this.button = $('<select>')
.appendTo(this.wrapper)
.mousedown(function(e){
.on('mousedown', function(e) {
_this._toggleMenu();
return false;
})
.on('keydown', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
_this._toggleMenu();
return false;
}
});
if( classes ){
this.button.attr('class',classes);
Expand All @@ -130,9 +136,15 @@ if( typeof $.widget === 'function' ){
.css('top','0px')
.css('display','block')
.css('z-index',1000)
.attr('tabindex',0)
.hide()
.appendTo(this.wrapper);


this.menu.on('focusout', function(e) {
if (!_this.menu.has(e.relatedTarget).length) {
_this.menu.hide();
}
});
this.element.hide();
}

Expand Down Expand Up @@ -182,8 +194,10 @@ if( typeof $.widget === 'function' ){
menu.empty();
menu.hide();
} else {
menu.empty();
this._createMenu(menu);
menu.show();
menu.find('a').attr('tabindex', 0);
menu.position({
my:'left top'
,at: 'left bottom'
Expand Down

0 comments on commit 79bc8db

Please sign in to comment.