Initial focus should be set to the first focusable element

[muan]

details-dialog-element/src/index.ts

Lines 10 to 17 in 59902d7

	function autofocus(el: DetailsDialogElement): void {
	let autofocusElement = Array.from(el.querySelectorAll<HTMLElement>('[autofocus]')).filter(focusable)[0]
	if (!autofocusElement) {
	autofocusElement = el
	el.setAttribute('tabindex', '-1')
	}
	autofocusElement.focus()
	}

Initial focus should be set to the first focusable element instead of the dialog element.

@jscholes: Placing focus on the close button is the correct behaviour if the dialog has an accessible name via aria-label or aria-labelledby, which every dialog should. So a screen reader will announce the name, the role of dialog, then the close button.

The focus priority should be as follows:

1. element with [autofocus]
2. first focusable element if it's in the beginning of the dialog (usually the close button)
3. first element

[jscholes]

3. first element

Important to note that if the first element is a heading or other element which is not focusable/interactive by default, it will need a tabindex of "-1". This is critical, because trying to focus a non-focusable element without it will result in no accessible focus movement whatsoever. Which in this case means that a screen reader user won't even know a dialog has opened.

Additional concern: it seems that placing focus on the entire modal container means that Tab navigation is completely broken in the "Legacy" version of Microsoft Edge. For example, when trying to delete an issue or milestone on GitHub, a "Legacy" Edge user can't Tab to the confirm or close buttons.