chore(text-field, combobox, number-field): refactor focus (VIV-1572)

libs/components/src/lib/combobox/combobox.scss

@@ -1,6 +1,7 @@
-@use "../focus/partials/variables" as focus-variables;
 @use "../popup/partials/variables" as popup-variables;
 @use "../text-field/partials/variables" as text-field-variables;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
 @use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
 	$connotations: accent,
@@ -50,3 +51,28 @@
 ::part(popup-base) {
 	inline-size: 100%;
 }
+
+
+/* focus */
+@supports selector(:has(*)) {
+.fieldset:has(.control:focus-within)::after {
+	#{focus-variables.$focus-stroke-gap-color}: transparent;
+
+	@include focus.focus;
+}
+}
+
+@supports not selector(:has(*)) {
+.fieldset:focus-within::after {
+	@include focus.focus;
+	#{focus-variables.$focus-stroke-gap-color}: transparent;
+
+	position: absolute;
+	z-index: 1;
+	display: block;
+	border-radius: inherit;
+	content: "";
+	inset: 0;
+}
+}
+

libs/components/src/lib/combobox/combobox.template.ts

@@ -5,7 +5,6 @@ import { affixIconTemplateFactory } from '../../shared/patterns/affix';
 import { Popup } from '../popup/popup';
 import { Listbox } from '../listbox/listbox';
 import type { Combobox } from './combobox';
-import { focusTemplateFactory } from './../../shared/patterns/focus';
 
 /**
  *
@@ -33,7 +32,6 @@ const getStateClasses = ({
  */
 function renderInput(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
-	const focusTemplate = focusTemplateFactory(context);
 
 	return html<Combobox>`
 		<div class="${getStateClasses}" ${ref('_anchor')}>
@@ -58,7 +56,6 @@ function renderInput(context: ElementDefinitionContext) {
 					${ref('control')}
 				/>
 				${() => affixIconTemplate('chevron-down-line')}
-				${() => focusTemplate}
 			</div>
 		</div>`;
 }

libs/components/src/lib/combobox/definition.ts

@@ -2,7 +2,6 @@ import type { ComboboxOptions } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
 import { iconRegistries } from '../icon/definition';
 import { popupRegistries } from '../popup/definition';
-import { focusRegistries } from '../focus/definition';
 import { listboxOptionRegistries } from '../option/definition';
 import textFieldStyles from '../text-field/text-field.scss?inline';
 import styles from './combobox.scss?inline';
@@ -26,7 +25,7 @@ export const combobox = Combobox.compose<ComboboxOptions>({
 	},
 })();
 
-export const comboboxRegistries = [combobox, ...iconRegistries, ...popupRegistries, ...focusRegistries, ...listboxOptionRegistries];
+export const comboboxRegistries = [combobox, ...iconRegistries, ...popupRegistries, ...listboxOptionRegistries];
 
 /**
  * Registers the combobox elements with the design system.

libs/components/src/lib/file-picker/definition.ts

@@ -1,7 +1,6 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
 import { iconRegistries } from '../icon/definition';
-import { focusRegistries } from '../focus/definition';
 import { buttonRegistries } from '../button/definition';
 import styles from './file-picker.scss?inline';
 
@@ -21,7 +20,7 @@ export const filePickerDefinition =
 /**
  * @internal
  */
-export const filePickerRegistries = [filePickerDefinition(), ...iconRegistries, ...focusRegistries, ...buttonRegistries];
+export const filePickerRegistries = [filePickerDefinition(), ...iconRegistries, ...buttonRegistries];
 
 /**
  * Registers the file-picker element with the design system.

libs/components/src/lib/number-field/number-field.scss

@@ -28,11 +28,3 @@
 		}
 	}
 }
-
-.focus-indicator {
-	.disabled & {
-		display: none;
-		pointer-events: none;
-	}
-}
-

libs/components/src/lib/number-field/number-field.template.ts

@@ -7,7 +7,6 @@ import type {
 import {classNames} from '@microsoft/fast-web-utilities';
 import {Shape} from '../enums';
 import {getFeedbackTemplate} from '../../shared/patterns';
-import {focusTemplateFactory} from '../../shared/patterns/focus';
 import {Button} from '../button/button';
 import {Divider} from '../divider/divider';
 import type {NumberField} from './number-field';
@@ -88,7 +87,6 @@ export const NumberFieldTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<NumberField> = (context) => {
-	const focusTemplate = focusTemplateFactory(context);
 
 	return html<NumberField>`
 	<div class="base ${getStateClasses}">
@@ -132,7 +130,6 @@ export const NumberFieldTemplate: (
 							 aria-roledescription="${x => x.ariaRoledescription}"
 							 ${ref('control')}
 				/>
-				${() => focusTemplate}
 			</div>
 			${() => numberControlButtons(context)}
     </div>

libs/components/src/lib/text-field/definition.ts

@@ -1,6 +1,5 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
-import { focusRegistries } from '../focus/definition';
 import { iconRegistries } from '../icon/definition';
 import { TextField } from './text-field';
 import styles from './text-field.scss?inline';
@@ -23,7 +22,7 @@ export const textFieldDefinition = TextField.compose<FoundationElementDefinition
 /**
  * @internal
  */
-export const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+export const textFieldRegistries = [textFieldDefinition(), ...iconRegistries];
 
 /**
  * Registers the text-field elements with the design system.

libs/components/src/lib/text-field/text-field.scss

@@ -1,6 +1,7 @@
 @use "partials/variables" as variables;
-@use "../focus/partials/variables" as focus-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus-variables;
 @use "../../../../../dist/libs/tokens/scss/tokens.constants" as constants;
 @use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
 	$connotations: accent,
@@ -118,13 +119,12 @@ $low-ink-color: --_low-ink-color;
 	border-radius: inherit;
 	block-size: 100%;
 	inline-size: 100%;
-
-	&:focus-visible {
-		outline: none;
-	}
 }
 
+
 .control {
+	border-radius: inherit;
+
 	&:not(slot),
 	&::slotted(input) {
 		/* As input is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */
@@ -140,6 +140,7 @@ $low-ink-color: --_low-ink-color;
 		block-size: 100% !important;
 		color: inherit !important;
 		font: inherit;
+		outline: transparent;
 		padding-block: 0 !important;
 		padding-inline: var(#{variables.$text-field-gutter-start}) var(#{variables.$text-field-gutter-end}) !important;
 	}
@@ -157,11 +158,6 @@ $low-ink-color: --_low-ink-color;
 		-webkit-text-fill-color: var(#{$low-ink-color}) !important; /* 1. sets text fill to current `color` for safari */
 	}
 
-	&:not(slot):focus-visible,
-	&::slotted(input:focus-visible) {
-		outline: none;
-	}
-
 	.has-icon &:not(slot),
 	.has-icon &::slotted(input) {
 		padding-inline-start: calc(var(#{variables.$text-field-icon-size}) + var(#{variables.$text-field-gutter-start}) * 2) !important;
@@ -196,16 +192,26 @@ $low-ink-color: --_low-ink-color;
 	}
 }
 
-.focus-indicator {
-	#{focus-variables.$focus-stroke-gap-color}: transparent;
+/* focus */
 
-	pointer-events: none;
+@supports selector(:has(*)) {
+	.fieldset:has(.wrapper .control:focus-within)::after {
+		#{focus-variables.$focus-stroke-gap-color}: transparent;
 
-	// two properties are needed because number-field and combobox inherits the style.
-	// only text-field has wrapper.
+		@include focus.focus;
+	}
+}
 
-	.wrapper:not(:focus-visible, :focus-within) > &,
-	.fieldset:not(:focus-visible, :focus-within) > & {
-		display: none;
+@supports not selector(:has(*)) {
+	.wrapper:focus-within::after {
+		@include focus.focus;
+		#{focus-variables.$focus-stroke-gap-color}: transparent;
+
+		position: absolute;
+		z-index: 1;
+		display: block;
+		border-radius: inherit;
+		content: "";
+		inset: 0;
 	}
 }

libs/components/src/lib/text-field/text-field.template.ts

@@ -6,7 +6,6 @@ import type {
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { affixIconTemplateFactory } from '../../shared/patterns/affix';
-import { focusTemplateFactory } from '../../shared/patterns/focus';
 import { getFeedbackTemplate } from '../../shared/patterns';
 import type { TextField } from './text-field';
 
@@ -60,7 +59,6 @@ export const TextfieldTemplate: (
 	definition: FoundationElementDefinition
 ) => ViewTemplate<TextField> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
-	const focusTemplate = focusTemplateFactory(context);
 
 	return html<TextField>`
 	<div class="base ${getStateClasses}">
@@ -74,7 +72,6 @@ export const TextfieldTemplate: (
 
 			<div class="wrapper">
 				<slot class="control" name="_control"></slot>
-				${() => focusTemplate}
 			</div>
 			<div class="action-items-wrapper">
 				<slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot>

libs/components/src/shared/patterns/index.ts

@@ -1,5 +1,4 @@
 export * from './affix';
-export * from './focus';
 export * from './form-elements';
 export * from './localized';
 export * from './trapped-focus';