@vaadin/field-base 24.1.0-alpha1 → 24.1.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.1.0-alpha1",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,8 +32,8 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.1.0-alpha1",
-    "@vaadin/component-base": "24.1.0-alpha1",
+    "@vaadin/a11y-base": "24.1.0-alpha10",
+    "@vaadin/component-base": "24.1.0-alpha10",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -41,5 +41,5 @@
     "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "599a339181595923b9ad6373d6888d8a79540141"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

package/src/field-mixin.d.ts

@@ -39,6 +39,18 @@ export declare class FieldMixinClass {
    */
   errorMessage: string | null | undefined;
 
+  /**
+   * String used to label the component to screen reader users.
+   * @attr {string} accessible-name
+   */
+  accessibleName: string | null | undefined;
+
+  /**
+   * Id of the element used as label of the component to screen reader users.
+   * @attr {string} accessible-name-ref
+   */
+  accessibleNameRef: string | null | undefined;
+
   protected readonly _errorNode: HTMLElement;
 
   protected readonly _helperNode?: HTMLElement;

package/src/field-mixin.js

@@ -49,6 +49,24 @@ export const FieldMixin = (superclass) =>
           type: String,
           observer: '_helperTextChanged',
         },
+
+        /**
+         * String used to label the component to screen reader users.
+         * @attr {string} accessible-name
+         */
+        accessibleName: {
+          type: String,
+          observer: '_accessibleNameChanged',
+        },
+
+        /**
+         * Id of the element used as label of the component to screen reader users.
+         * @attr {string} accessible-name-ref
+         */
+        accessibleNameRef: {
+          type: String,
+          observer: '_accessibleNameRefChanged',
+        },
       };
     }
 
@@ -113,6 +131,16 @@ export const FieldMixin = (superclass) =>
       }
     }
 
+    /** @protected */
+    _accessibleNameChanged(accessibleName) {
+      this._fieldAriaController.setAriaLabel(accessibleName);
+    }
+
+    /** @protected */
+    _accessibleNameRefChanged(accessibleNameRef) {
+      this._fieldAriaController.setLabelId(accessibleNameRef, true);
+    }
+
     /** @private */
     __labelChanged(hasLabel, labelNode) {
       // Label ID should be only added when the label content is present.

package/src/input-mixin.js

@@ -54,10 +54,7 @@ export const InputMixin = dedupingMixin(
           },
 
           /**
-           * Whether the input element has user input.
-           *
-           * Note, the property indicates true only if the input has been entered by the user.
-           * In the case of programmatic changes, the property must be reset to false.
+           * Whether the input element has a non-empty value.
            *
            * @protected
            */

package/src/styles/field-shared-styles.js

@@ -26,4 +26,17 @@ export const fieldShared = css`
   :host(:not([has-label])) [part='label'] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    :host(:not([readonly])) [part='input-field'] {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+    :host([focused]) [part='input-field'] {
+      outline-width: 2px;
+    }
+    :host([disabled]) [part='input-field'] {
+      outline-color: GrayText;
+    }
+  }
 `;

package/src/styles/sr-only-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const screenReaderOnly: CSSResult;

package/src/styles/sr-only-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @note Taken from Gaël Poupard gist
+ * @author Gaël Poupard
+ * @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+ */
+import { css } from 'lit';
+
+export const screenReaderOnly = css`
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
+`;