@brightspace-ui/core 3.267.1 → 3.268.0

package/components/inputs/input-search.js

@@ -17,74 +17,69 @@ export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
  */
 class InputSearch extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
-			 * @type {string}
-			 */
-			description: { type: String, reflect: true },
-			/**
-			 * Disables the input
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.
-			 * @type {string}
-			 */
-			label: { type: String },
-			/**
-			 * @ignore
-			 */
-			lastSearchValue: { type: String, attribute: false },
-			/**
-			 * Imposes an upper character limit
-			 * @type {number}
-			 */
-			maxlength: { type: Number },
-			/**
-			 * Prevents the "clear" button from appearing
-			 * @type {boolean}
-			 */
-			noClear: { type: Boolean, attribute: 'no-clear' },
-			/**
-			 * Placeholder text (default: "Search...")
-			 * @type {string}
-			 */
-			placeholder: { type: String },
-			/**
-			 * Dispatch search events after each input event
-			 * @type {boolean}
-			 */
-			searchOnInput: { type: Boolean, attribute: 'search-on-input' },
-			/**
-			 * Value of the input
-			 * @type {string}
-			 */
-			value: { type: String }
-		};
-	}
-
-	static get styles() {
-		return [inputStyles, css`
-				:host {
-					display: inline-block;
-					width: 100%;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				d2l-button-icon {
-					--d2l-button-icon-min-height: 1.5rem;
-					--d2l-button-icon-min-width: 1.5rem;
-					--d2l-button-icon-border-radius: 4px;
-					--d2l-focus-ring-offset: 1px;
-					margin-inline: 0.3rem;
-				}
-			`
-		];
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
+		 * @type {string}
+		 */
+		description: { type: String, reflect: true },
+		/**
+		 * Disables the input
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.
+		 * @type {string}
+		 */
+		label: { type: String },
+		/**
+		 * @ignore
+		 */
+		lastSearchValue: { type: String, attribute: false },
+		/**
+		 * Imposes an upper character limit
+		 * @type {number}
+		 */
+		maxlength: { type: Number },
+		/**
+		 * Prevents the "clear" button from appearing
+		 * @type {boolean}
+		 */
+		noClear: { type: Boolean, attribute: 'no-clear' },
+		/**
+		 * Placeholder text (default: "Search...")
+		 * @type {string}
+		 */
+		placeholder: { type: String },
+		/**
+		 * Dispatch search events after each input event
+		 * @type {boolean}
+		 */
+		searchOnInput: { type: Boolean, attribute: 'search-on-input' },
+		/**
+		 * Value of the input
+		 * @type {string}
+		 */
+		value: { type: String }
+	};
+
+	static styles = [inputStyles, css`
+		:host {
+			display: inline-block;
+			width: 100%;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		d2l-button-icon {
+			--d2l-button-icon-min-height: 1.5rem;
+			--d2l-button-icon-min-width: 1.5rem;
+			--d2l-button-icon-border-radius: 4px;
+			--d2l-focus-ring-offset: 1px;
+			margin-inline: 0.3rem;
+		}
+	`];
 
 	constructor() {
 		super();

package/components/inputs/input-select-styles.js

@@ -1,11 +1,9 @@
 import './input-styles.js';
 import { css, unsafeCSS } from 'lit';
+import { getFocusRingStyles, getFocusVisibleStyles } from '../../helpers/focus.js';
 import { _isValidCssSelector } from '../../helpers/internal/css.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
-const focusClass = unsafeCSS(getFocusPseudoClass());
-
 registerSemanticVariableForSvgImageUrl(
 	'--d2l-input-select-chevron-image',
 	`<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
@@ -13,12 +11,36 @@ registerSemanticVariableForSvgImageUrl(
 	</svg>`
 );
 
+function _getSelectFocusStyles(selector) {
+	const notDisabledSelector = (focusSelector) => `
+		${selector}:not([disabled]):hover,
+		${selector}:not([disabled]):${focusSelector}`;
+	const ariaInvalidSelector = (focusSelector) => `
+		${selector}[aria-invalid="true"],
+		${selector}[aria-invalid="true"]:${focusSelector},
+		${selector}[aria-invalid="true"]:hover`;
+
+	return {
+		notDisabled: getFocusRingStyles(notDisabledSelector, {
+			extraStyles: css`
+				box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
+
+				--d2l-focus-ring-offset: -2px;`,
+			preferContrastMediaQueryExtraStyles: css`box-shadow: none;`
+		}),
+		ariaInvalid: getFocusVisibleStyles(ariaInvalidSelector, (selector) => css`${selector} {
+			outline-color: var(--d2l-theme-status-color-error);
+		}`)
+	};
+}
+
 /**
  * A private helper method that should not be used by general consumers
  */
 export function _generateSelectStyles(selector) {
 	if (!_isValidCssSelector(selector)) return '';
 	const finalSelector = unsafeCSS(selector);
+	const selectFocusStyles = _getSelectFocusStyles(finalSelector);
 
 	return css`
 		${finalSelector} {
@@ -51,23 +73,16 @@ export function _generateSelectStyles(selector) {
 			vertical-align: middle;
 		}
 
-		${finalSelector}:not([disabled]):hover,
-		${finalSelector}:not([disabled]):${focusClass} {
-			box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
-			outline: 2px solid var(--d2l-theme-border-color-focus);
-			outline-offset: -2px;
-		}
+		${selectFocusStyles.notDisabled}
+
 		${finalSelector}[aria-invalid="true"] {
 			background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
 			background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
 			background-repeat: no-repeat, no-repeat;
 			background-size: 11px 7px, 0.8rem 0.8rem;
 		}
-		${finalSelector}[aria-invalid="true"],
-		${finalSelector}[aria-invalid="true"]:${focusClass},
-		${finalSelector}[aria-invalid="true"]:hover {
-			outline-color: var(--d2l-theme-status-color-error);
-		}
+		${selectFocusStyles.ariaInvalid}
+
 		${finalSelector}:disabled {
 			opacity: var(--d2l-theme-opacity-disabled-control);
 		}
@@ -87,12 +102,6 @@ export function _generateSelectStyles(selector) {
 				padding-inline: 0.6rem 16px;
 			}
 
-			${finalSelector}:not([disabled]):${focusClass},
-			${finalSelector}:not([disabled]):hover {
-				box-shadow: none;
-				outline: 2px solid Highlight;
-			}
-
 			${finalSelector}:disabled {
 				outline: 1px solid GrayText;
 			}
@@ -104,11 +113,7 @@ export function _generateSelectStyles(selector) {
 				background-size: 0.8rem 0.8rem;
 			}
 
-			${finalSelector}[aria-invalid="true"],
-			${finalSelector}[aria-invalid="true"]:${focusClass},
-			${finalSelector}[aria-invalid="true"]:hover {
-				outline-color: var(--d2l-theme-status-color-error);
-			}
+			${selectFocusStyles.ariaInvalid}
 		}
 	`;
 };