You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.8 KiB
60 lines
1.8 KiB
6 months ago
|
// @vitest-environment jsdom
|
||
|
|
|
||
|
|
import { beforeEach, describe, expect, it } from 'vitest'
|
||
|
|
|
||
|
|
import { focusFirst, getTabbableCandidates, getTabbableEdges } from './focus'
|
||
|
|
import { getTabbableFrom } from './tabbable'
|
||
|
|
|
||
|
|
describe('uix/lib/dom focus', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
document.body.innerHTML = ''
|
||
|
|
})
|
||
|
|
|
||
|
|
it('collects tabbable candidates in DOM order', () => {
|
||
|
|
const container = document.createElement('div')
|
||
|
|
const first = document.createElement('button')
|
||
|
|
const hidden = document.createElement('input')
|
||
|
|
const second = document.createElement('a')
|
||
|
|
|
||
|
|
hidden.type = 'hidden'
|
||
|
|
second.href = '#'
|
||
|
|
|
||
|
|
container.append(first, hidden, second)
|
||
|
|
document.body.appendChild(container)
|
||
|
|
|
||
|
|
expect(getTabbableCandidates(container)).toEqual([first, second])
|
||
|
|
})
|
||
|
|
|
||
|
|
it('returns the visible tabbable edges', () => {
|
||
|
|
const container = document.createElement('div')
|
||
|
|
const first = document.createElement('button')
|
||
|
|
const hidden = document.createElement('button')
|
||
|
|
const last = document.createElement('button')
|
||
|
|
|
||
|
|
hidden.style.display = 'none'
|
||
|
|
container.append(first, hidden, last)
|
||
|
|
document.body.appendChild(container)
|
||
|
|
|
||
|
|
expect(getTabbableEdges(container)).toEqual([first, last])
|
||
|
|
})
|
||
|
|
|
||
|
|
it('focuses the first candidate that can receive focus', () => {
|
||
|
|
const first = document.createElement('button')
|
||
|
|
const second = document.createElement('button')
|
||
|
|
document.body.append(first, second)
|
||
|
|
|
||
|
|
expect(focusFirst([first, second])).toBe(true)
|
||
|
|
expect(document.activeElement).toBe(first)
|
||
|
|
})
|
||
|
|
|
||
|
|
it('finds the next tabbable element with tabbable()', () => {
|
||
|
|
const first = document.createElement('button')
|
||
|
|
const second = document.createElement('button')
|
||
|
|
const third = document.createElement('button')
|
||
|
|
document.body.append(first, second, third)
|
||
|
|
|
||
|
|
expect(getTabbableFrom(first, 'next')).toBe(second)
|
||
|
|
expect(getTabbableFrom(third, 'prev')).toBe(second)
|
||
|
|
})
|
||
|
|
})
|