rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Ensure Tab keyboard functionality after #37146 (#37200)

Browse Source 
* fix: keyboard functionality

* test: add tests

* Add some focus spies in 2 other unit tests

Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
GeoSot 2022-10-02 13:05:30 +03:00 committed by GitHub
parent 0a5f6e078c
commit d49d8ce583
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/src/tab.js
View File

@ -161,6 +161,7 @@ class Tab extends BaseComponent {
const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true)
if (nextActiveElement) {
nextActiveElement.focus({ preventScroll: true })
Tab.getOrCreateInstance(nextActiveElement).show()
}
}

34
js/tests/unit/tab.spec.js
View File

@ -526,6 +526,9 @@ describe('Tab', () => {
const spyShow1 = spyOn(tab1, 'show').and.callThrough()
const spyShow2 = spyOn(tab2, 'show').and.callThrough()
const spyShow3 = spyOn(tab3, 'show').and.callThrough()
const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()
const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()
const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()
const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough()
const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough()
@ -535,15 +538,18 @@ describe('Tab', () => {
tabEl1.dispatchEvent(keydown)
expect(spyShow2).toHaveBeenCalled()
expect(spyFocus2).toHaveBeenCalled()
keydown = createEvent('keydown')
keydown.key = 'ArrowDown'
tabEl2.dispatchEvent(keydown)
expect(spyShow3).toHaveBeenCalled()
expect(spyFocus3).toHaveBeenCalled()
tabEl3.dispatchEvent(keydown)
expect(spyShow1).toHaveBeenCalled()
expect(spyFocus1).toHaveBeenCalled()
expect(spyStop).toHaveBeenCalledTimes(3)
expect(spyPrevent).toHaveBeenCalledTimes(3)
@ -557,12 +563,14 @@ describe('Tab', () => {
'</div>'
].join('')
const tabEl = fixtureEl.querySelector('#tab1')
const tabEl1 = fixtureEl.querySelector('#tab1')
const tabEl2 = fixtureEl.querySelector('#tab2')
const tab = new Tab(tabEl)
const tab1 = new Tab(tabEl1)
const tab2 = new Tab(tabEl2)
const spyShow1 = spyOn(tab, 'show').and.callThrough()
const spyShow1 = spyOn(tab1, 'show').and.callThrough()
const spyShow2 = spyOn(tab2, 'show').and.callThrough()
const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()
const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()
const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough()
const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough()
@ -572,12 +580,14 @@ describe('Tab', () => {
tabEl2.dispatchEvent(keydown)
expect(spyShow1).toHaveBeenCalled()
expect(spyFocus1).toHaveBeenCalled()
keydown = createEvent('keydown')
keydown.key = 'ArrowUp'
tabEl.dispatchEvent(keydown)
tabEl1.dispatchEvent(keydown)
expect(spyShow2).toHaveBeenCalled()
expect(spyFocus2).toHaveBeenCalled()
expect(spyStop).toHaveBeenCalledTimes(2)
expect(spyPrevent).toHaveBeenCalledTimes(2)
@ -605,6 +615,10 @@ describe('Tab', () => {
const spy2 = spyOn(tab2, 'show').and.callThrough()
const spy3 = spyOn(tab3, 'show').and.callThrough()
const spy4 = spyOn(tab4, 'show').and.callThrough()
const spyFocus1 = spyOn(tabEl, 'focus').and.callThrough()
const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()
const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()
const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough()
const keydown = createEvent('keydown')
keydown.key = 'ArrowRight'
@ -614,6 +628,10 @@ describe('Tab', () => {
expect(spy2).not.toHaveBeenCalled()
expect(spy3).not.toHaveBeenCalled()
expect(spy4).toHaveBeenCalledTimes(1)
expect(spyFocus1).not.toHaveBeenCalled()
expect(spyFocus2).not.toHaveBeenCalled()
expect(spyFocus3).not.toHaveBeenCalled()
expect(spyFocus4).toHaveBeenCalledTimes(1)
})
it('if keydown event is left arrow and next element is disabled', () => {
@ -638,6 +656,10 @@ describe('Tab', () => {
const spy2 = spyOn(tab2, 'show').and.callThrough()
const spy3 = spyOn(tab3, 'show').and.callThrough()
const spy4 = spyOn(tab4, 'show').and.callThrough()
const spyFocus1 = spyOn(tabEl, 'focus').and.callThrough()
const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()
const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()
const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough()
const keydown = createEvent('keydown')
keydown.key = 'ArrowLeft'
@ -647,6 +669,10 @@ describe('Tab', () => {
expect(spy3).not.toHaveBeenCalled()
expect(spy2).not.toHaveBeenCalled()
expect(spy1).toHaveBeenCalledTimes(1)
expect(spyFocus4).not.toHaveBeenCalled()
expect(spyFocus3).not.toHaveBeenCalled()
expect(spyFocus2).not.toHaveBeenCalled()
expect(spyFocus1).toHaveBeenCalledTimes(1)
})
})