Refactor setFocus methods for consistency

[driskull]

Description

Our component setFocus methods are inconsistent. Some focus on the first focusable element (ideal), however some just focus on the host element even if the host element isn't focusable.

We should clean up our setFocus methods for constency.

I propose we have a shared method (controller?) or a protected method for all focusable components.

This default method would call focusFirstTabbable(this.el) and focus on the first focusable element by default.

Proposed Advantages

This would promote consistency. The few components that need to do some different focus work could override this protected method or controller to handle unique use cases.

Which Component

All

Relevant Info

calcite-design-system/packages/calcite-components/src/components/menu/menu.tsx

Lines 145 to 149 in 12f1476

	@Method()
	async setFocus(): Promise<void> {
	await componentFocusable(this);
	this.el.focus();
	}

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components