Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ensure Tab keyboard functionality after #37146 #37200

Merged
merged 5 commits into from Oct 2, 2022
Merged

Ensure Tab keyboard functionality after #37146 #37200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5a0f1a
fix: keyboard functionality
GeoSot Sep 23, 2022
a6284c4
test: add tests
GeoSot Sep 27, 2022
df6485b
Add some focus spies in 2 other unit tests
julien-deramond Oct 2, 2022
f0ae350
Merge branch 'main' into gs/test-tabs-keyboard-functionality
XhmikosR Oct 2, 2022
4130791
Merge branch 'main' into gs/test-tabs-keyboard-functionality
XhmikosR Oct 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions js/src/tab.js
View file
Open in desktop
Expand Up @@ -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()
}
}
Expand Down
34 changes: 30 additions & 4 deletions js/tests/unit/tab.spec.js
View file
Open in desktop
Expand Up @@ -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()
Expand All @@ -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)
Expand All @@ -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()
Expand All @@ -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)
Expand Down Expand Up @@ -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'
Expand All @@ -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', () => {
Expand All @@ -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'
Expand All @@ -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)
})
})

Expand Down