Side Sheet: Dismissible should set focus after opening

[acdvorak]

From #3924 (comment):

material-components-web/packages/mdc-side-sheet/dismissible/foundation.js

Line 175 in 2b104a6

this.adapter_.focusActiveNavigationItem();

We probably do still want to focus something within the dismissible side sheet when it opens...but we'd probably have to just look for the first focusable thing within it. I forget if we've already implemented or used something like that somewhere else in our repo? Otherwise we could probably use tabbable (focus-trap's dependency) for it, but might want to delegate that to a util function as well.

Dialog briefly had a util function for this in #3413, but it was removed because focus-trap already provides the same functionality (via its dependency on tabbable):

material-components-web/packages/mdc-dialog/util.js

Lines 46 to 104 in a62f743

	function getFirstFocusableElement(surfaceEl) {
	const includeSelectors = [
	'a',
	'button',
	'input',
	'select',
	'summary',
	'textarea',
	'audio[controls]',
	'video[controls]',
	'[contenteditable]',
	'[tabIndex]',
	];
	const excludeSelectors = [
	'input[type="radio"]',
	'input[type="checkbox"]',
	'input[type="hidden"]',
	'[disabled]',
	'[tabIndex="-1"]',
	];
	const isExcluded = (el) => {
	const style = getComputedStyle(el);
	if (style.display === 'none' || style.visibility === 'hidden' || parseFloat(style.opacity) < 0.01) {
	return true;
	}
	const rect = el.getBoundingClientRect();
	if (!rect.width || !rect.height) {
	return true;
	}
	if (excludeSelectors.some((excludeSelector) => matches(el, excludeSelector))) {
	return true;
	}
	return false;
	};
	/** @type {!Array<!HTMLElement>} */
	const includedEls = [].slice.call(surfaceEl.querySelectorAll(includeSelectors.join(', ')));
	const focusableEls = includedEls.filter((el) => {
	while (el) {
	if (isExcluded(el)) {
	return false;
	}
	el = el.parentElement;
	}
	return true;
	});
	const autoFocusEls = focusableEls.filter((el) => {
	return el.autofocus;
	});
	return autoFocusEls[0] || focusableEls[0];
	}

Tasks:

• Rename focusActiveNavigationItem() to something more generic (e.g., focusContent())
• Create a util function to find the first focusable element (probably using tabbable)

[bonniezhou]

Closing this as obsolete.