fix(a11y): blur when tabbing out of input #1927
Conversation
meldafert
changed the title
|
This breaks a test apparently. I will make sure to fix this, and to add a test case using TAB. |
meldafert
force-pushed
the
keyboard-blur-a11y
branch
2 times, most recently
from
5450ca1 to
ea50ace
Compare
meldafert
changed the title
Fixes selectize#1926. To be accessible, it should be possible to easily navigate elements using the keyboard. Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using `openOnFocus`). However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before selectize#1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB. This commit also fixes some tests to ensure they are self-contained.
meldafert
force-pushed
the
keyboard-blur-a11y
branch
from
ea50ace to
f0c64f5
Compare
|
I have fixed the tests. |
| @@ -218,8 +218,8 @@ $.extend(Selectize.prototype, { | |||
| keypress : function() { return self.onKeyPress.apply(self, arguments); }, | |||
| input : function() { return self.onInput.apply(self, arguments); }, | |||
| resize : function() { self.positionDropdown.apply(self, []); }, | |||
| // blur : function() { return self.onBlur.apply(self, arguments); }, | |||
| focus : function() { self.ignoreBlur = false; return self.onFocus.apply(self, arguments); }, | |||
There was a problem hiding this comment.
ignoreBlur was not read anywhere anymore. I removed the previous references and re-used it for detecting when an item in the dropdown was clicked, to avoid closing the dropdown in that case.
| it('should normalize a string', function () { | ||
| expect('should normalize a string', function () { | ||
| var test; | ||
|
|
||
| beforeEach(function() { |
There was a problem hiding this comment.
This broke my new tests. Calling beforeEach() inside of it() (instead of inside expect) apparently applies it to all subsequent tests.
| it('should return query satinized', function() { | ||
| it('should return query satinized', function(done) { | ||
| var query = test.selectize.search('héllo').query; | ||
|
|
||
| window.setTimeout(function () { | ||
| expect(query).to.be.equal('hello'); | ||
| done(); | ||
| }, 0); |
There was a problem hiding this comment.
Drive-by fix to ensure the test terminates properly.
| xit('should select the first value on blur', async function() { | ||
| await tabTo(test.selectize.$control_input[0]); | ||
| await tabTo(input2[0]); | ||
| expect(test.selectize.getValue()).to.be.equal('a'); | ||
| }); |
There was a problem hiding this comment.
This is the test that would require a better emulation/control over the headless browser (eg. puppeteer).
|
Kudos to you. this is one of the best documented pull requests I've seen in a long time :) |
Fixes #1926.
To be accessible, it should be possible to easily navigate elements using the keyboard.
Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using
openOnFocus).However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before #1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB.