From ab2fc63d08b8c53d6f29bcfd73b7f2d5ceaacacd Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sun, 22 May 2016 02:16:27 -0400 Subject: Dropdown: remove dependency to role="menu", role="listbox" a and li elements => fix keyboard navigation --- js/src/dropdown.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'js/src') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 92f841bc4..a9786a534 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -44,11 +44,9 @@ const Dropdown = (($) => { BACKDROP : '.dropdown-backdrop', DATA_TOGGLE : '[data-toggle="dropdown"]', FORM_CHILD : '.dropdown form', - ROLE_MENU : '[role="menu"]', - ROLE_LISTBOX : '[role="listbox"]', + MENU : '.dropdown-menu', NAVBAR_NAV : '.navbar-nav', - VISIBLE_ITEMS : '[role="menu"] li:not(.disabled) a, ' - + '[role="listbox"] li:not(.disabled) a' + VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)' } @@ -268,8 +266,7 @@ const Dropdown = (($) => { $(document) .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) - .on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler) - .on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler) + .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) .on(Event.CLICK_DATA_API, Dropdown._clearMenus) .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle) .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => { -- cgit v1.2.3 From 67958f35e80af425c08fa367e8a6f1eeefb830bc Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Wed, 4 Jan 2017 12:24:33 -0500 Subject: Merge conflict --- js/src/dropdown.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'js/src') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 46287fb90..873c106a7 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -272,14 +272,8 @@ const Dropdown = (($) => { $(document) .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) -<<<<<<< HEAD .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) - .on(Event.CLICK_DATA_API, Dropdown._clearMenus) -======= - .on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler) - .on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler) .on(`${Event.CLICK_DATA_API} ${Event.FOCUSIN_DATA_API}`, Dropdown._clearMenus) ->>>>>>> twbs/v4-dev .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle) .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => { e.stopPropagation() -- cgit v1.2.3 From 403f55fba976908cd1fd9dfd8ea4a98d035daaf2 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sun, 22 Jan 2017 17:34:54 -0500 Subject: Fix spacebar key in Firefox for button elements --- js/src/dropdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/src') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 200f31569..5c204f054 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -28,7 +28,7 @@ const Dropdown = (($) => { const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse) - const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}|${SPACE_KEYCODE}`) + const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`) const Event = { HIDE : `hide${EVENT_KEY}`, @@ -213,7 +213,7 @@ const Dropdown = (($) => { } static _dataApiKeydownHandler(event) { - if (!REGEXP_KEYDOWN.test(event.which) || + if (!REGEXP_KEYDOWN.test(event.which) && /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE || /input|textarea/i.test(event.target.tagName)) { return } @@ -228,8 +228,8 @@ const Dropdown = (($) => { const parent = Dropdown._getParentFromElement(this) const isActive = $(parent).hasClass(ClassName.SHOW) - if (!isActive && event.which !== ESCAPE_KEYCODE || - isActive && event.which === ESCAPE_KEYCODE) { + if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) || + isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) { if (event.which === ESCAPE_KEYCODE) { const toggle = $(parent).find(Selector.DATA_TOGGLE)[0] -- cgit v1.2.3 From 4ab576a41941b720e2f6fa77724203f66a1d3a17 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Wed, 8 Feb 2017 18:51:50 -0500 Subject: Fixes #21941 --- js/src/dropdown.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'js/src') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 5c204f054..1e85c2530 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -25,6 +25,7 @@ const Dropdown = (($) => { const JQUERY_NO_CONFLICT = $.fn[NAME] const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key const SPACE_KEYCODE = 32 // KeyboardEvent.which value for space key + const TAB_KEYCODE = 9 // KeyboardEvent.which value for tab key const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse) @@ -37,8 +38,8 @@ const Dropdown = (($) => { SHOWN : `shown${EVENT_KEY}`, CLICK : `click${EVENT_KEY}`, CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`, - FOCUSIN_DATA_API : `focusin${EVENT_KEY}${DATA_API_KEY}`, - KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}` + KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`, + KEYUP_DATA_API : `keyup${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { @@ -160,7 +161,8 @@ const Dropdown = (($) => { } static _clearMenus(event) { - if (event && event.which === RIGHT_MOUSE_BUTTON_WHICH) { + if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || + event.type === 'keyup' && event.which !== TAB_KEYCODE)) { return } @@ -182,7 +184,7 @@ const Dropdown = (($) => { } if (event && (event.type === 'click' && - /input|textarea/i.test(event.target.tagName) || event.type === 'focusin') + /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) && $.contains(parent, event.target)) { continue } @@ -213,7 +215,7 @@ const Dropdown = (($) => { } static _dataApiKeydownHandler(event) { - if (!REGEXP_KEYDOWN.test(event.which) && /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE || + if (!REGEXP_KEYDOWN.test(event.which) || /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE || /input|textarea/i.test(event.target.tagName)) { return } @@ -275,7 +277,7 @@ const Dropdown = (($) => { $(document) .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) - .on(`${Event.CLICK_DATA_API} ${Event.FOCUSIN_DATA_API}`, Dropdown._clearMenus) + .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus) .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle) .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => { e.stopPropagation() -- cgit v1.2.3 From 2626eba5f1218dc79064598e2f43a30116bd5742 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 9 Apr 2017 16:19:20 +0100 Subject: Prevent default for ESC in modal.js ESC can be used to close modals, but on OS X/macOS this also jumps out of full-screen mode. `preventDefault` suppresses this. --- js/src/modal.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/src') diff --git a/js/src/modal.js b/js/src/modal.js index 779b9a402..02d463945 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -289,6 +289,7 @@ const Modal = (($) => { if (this._isShown && this._config.keyboard) { $(this._element).on(Event.KEYDOWN_DISMISS, (event) => { if (event.which === ESCAPE_KEYCODE) { + event.preventDefault() this.hide() } }) -- cgit v1.2.3 From 3f6e1faf45d503d670e01b600a0455e2da0fe660 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 10 Apr 2017 14:43:54 +0100 Subject: Only change aria-pressed if it's not an input-based radio or checkbox group * Only change aria-pressed if it's not an input-based radio or checkbox group aria-pressed="true"/aria-pressed="false" is really only useful for making on/off toggles out of, say, `