Is there a way to temporarily set keyboard controls to the navigation drawer only?

[tjeb]

Hi,

I have a navigation drawer that is permanently visible on large screens, and can be toggled on and off on small screens. In order to comply with WCAG requirements, I need keyboard tab-control to remain in the navigation drawer when it is shown on small screens (so that the toolbar and the page elements are not focusable). However, right now, tab-key navigation works the same as for large screens (i.e. when pressing tab, focus goes to toolbar first, then navigation drawer, then rest of page).

Is there any way to toggle keyboard controls of the toolbar and the rest of the page, when the navigation drawer is opened/closed?

[KaelWD]

Not built in but you could copy it from VDialog:

vuetify/packages/vuetify/src/components/VDialog/VDialog.ts

Lines 189 to 194 in 860be6b

	bind () {
	window.addEventListener('focusin', this.onFocusin)
	},
	unbind () {
	window.removeEventListener('focusin', this.onFocusin)
	},

vuetify/packages/vuetify/src/components/VDialog/VDialog.ts

Lines 218 to 240 in 860be6b

	onFocusin (e: Event) {
	if (!e || !this.retainFocus) return
	const target = e.target as HTMLElement
	if (
	!!target &&
	// It isn't the document or the dialog body
	![document, this.$refs.content].includes(target) &&
	// It isn't inside the dialog body
	!this.$refs.content.contains(target) &&
	// We're the topmost dialog
	this.activeZIndex >= this.getMaxZIndex() &&
	// It isn't inside a dependent element (like a menu)
	!this.getOpenDependentElements().some(el => el.contains(target))
	// So we must have focused something outside the dialog and its children
	) {
	// Find and focus the first available element inside the dialog
	const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
	const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined
	el && el.focus()
	}
	},

This probably should be added to temporary drawers by default though.