feat(form-field): allow label to be visually hidden

sbb-design-systems · Jan 22, 2024 · ab25ea9 · ab25ea9
1 parent e8224c7
commit ab25ea9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 16 deletions.
diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss
@@ -246,10 +246,17 @@
 
   // Moves label down and input up to meet positioning requirements
   margin-block-end: var(--sbb-form-field-label-to-input-gap);
+}
 
+// To avoid doubled payload, we group the rules.
+:is(.sbb-form-field__label, .sbb-form-field__label-spacer) {
   :host(:not([data-slot-names~='label'], [label])) & {
     display: none;
   }
+
+  :host([hidden-label]) & {
+    @include sbb.screen-reader-only;
+  }
 }
 
 .sbb-form-field__label {
@@ -262,10 +269,6 @@
   inset-block-start: 0;
   color: var(--sbb-form-field-label-color);
 
-  :host(:not([data-slot-names~='label'], [label])) & {
-    display: none;
-  }
-
   :host([data-input-type='select']) &,
   :host([data-input-type='sbb-select']) & {
     padding-inline-end: var(--sbb-form-field-select-inline-padding-end);

diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts
@@ -74,6 +74,7 @@ const TemplateInput = ({
   borderless,
   width,
   negative,
+  'hidden-label': hiddenLabel,
   'floating-label': floatingLabel,
   ...args
 }: Args): TemplateResult => html`
@@ -84,6 +85,7 @@ const TemplateInput = ({
     size=${size}
     ?borderless=${borderless}
     width=${width}
+    ?hidden-label=${hiddenLabel}
     ?floating-label=${floatingLabel}
     ?negative=${negative}
   >
@@ -99,6 +101,7 @@ const TemplateInputWithSlottedLabel = ({
   borderless,
   width,
   negative,
+  'hidden-label': hiddenLabel,
   'floating-label': floatingLabel,
   ...args
 }: Args): TemplateResult => html`
@@ -108,6 +111,7 @@ const TemplateInputWithSlottedLabel = ({
     size=${size}
     ?borderless=${borderless}
     width=${width}
+    ?hidden-label=${hiddenLabel}
     ?floating-label=${floatingLabel}
     ?negative=${negative}
   >
@@ -131,6 +135,7 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
           size=${args.size}
           ?borderless=${args.borderless}
           width=${args.width}
+          ?hidden-label=${args['hidden-label']}
           ?floating-label=${args['floating-label']}
           ?negative=${args.negative}
         >
@@ -205,6 +210,7 @@ const TemplateSelect = (args: Args): TemplateResult => html`
     size=${args.size}
     ?borderless=${args.borderless}
     width=${args.width}
+    ?hidden-label=${args['hidden-label']}
     ?floating-label=${args['floating-label']}
     ?negative=${args.negative}
   >
@@ -227,6 +233,7 @@ const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
           size=${args.size}
           ?borderless=${args.borderless}
           width=${args.width}
+          ?hidden-label=${args['hidden-label']}
           ?floating-label=${args['floating-label']}
           ?negative=${args.negative}
         >
@@ -354,6 +361,15 @@ const label: InputType = {
   },
 };
 
+const hiddenLabel: InputType = {
+  control: {
+    type: 'boolean',
+  },
+  table: {
+    category: 'Form-field attribute',
+  },
+};
+
 const floatingLabel: InputType = {
   control: {
     type: 'boolean',
@@ -412,6 +428,7 @@ const active: InputType = {
 const basicArgTypes: ArgTypes = {
   'error-space': errorSpace,
   label,
+  'hidden-label': hiddenLabel,
   'floating-label': floatingLabel,
   optional,
   borderless,
@@ -430,6 +447,7 @@ const basicArgTypes: ArgTypes = {
 const basicArgs: Args = {
   'error-space': 'none',
   label: 'Input name',
+  'hidden-label': false,
   'floating-label': false,
   optional: false,
   borderless: false,
@@ -467,6 +485,12 @@ export const InputNoLabel: StoryObj = {
   args: { ...basicArgs, label: undefined },
 };
 
+export const InputHiddenLabel: StoryObj = {
+  render: TemplateInput,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, 'hidden-label': true },
+};
+
 export const InputWithSlottedLabel: StoryObj = {
   render: TemplateInputWithSlottedLabel,
   argTypes: basicArgTypes,

diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts
@@ -62,31 +62,26 @@ export class SbbFormFieldElement extends LitElement {
   @property({ attribute: 'error-space', reflect: true })
   public errorSpace?: 'none' | 'reserve' = 'none';
 
-  /**
-   * Label text for the input which is internally rendered as `<label>`.
-   */
+  /** Label text for the input which is internally rendered as `<label>`. */
   @property({ reflect: true }) public label: string;
 
-  /**
-   * Indicates whether the input is optional.
-   */
+  /** Indicates whether the input is optional. */
   @property({ type: Boolean }) public optional?: boolean;
 
-  /**
-   * Size variant, either l or m.
-   */
+  /** Size variant, either l or m. */
   @property({ reflect: true }) public size?: 'l' | 'm' = 'm';
 
-  /**
-   * Whether to display the form field without a border.
-   */
+  /** Whether to display the form field without a border. */
   @property({ reflect: true, type: Boolean }) public borderless = false;
 
   /** Defines the width of the component:
    * - `default`: the component has defined width and min-width;
    * - `collapse`: the component adapts itself to its inner input content. */
   @property({ reflect: true }) public width: 'default' | 'collapse' = 'default';
 
+  /** Whether to visually hide the label. If hidden, screen readers will still read it. */
+  @property({ attribute: 'hidden-label', reflect: true, type: Boolean }) public hiddenLabel = false;
+
   /** Whether the label should float. If activated, the placeholder of the input is hidden. */
   @property({ attribute: 'floating-label', reflect: true, type: Boolean }) public floatingLabel =
     false;

diff --git a/src/components/form-field/form-field/readme.md b/src/components/form-field/form-field/readme.md
@@ -106,6 +106,7 @@ form element with the label, by setting an id on the label and referencing this
 Please note that only one `<label>` element is supported. Additionally, if you place the `<label>`
 element outside the `sbb-form-field`, the automatic assignment is skipped, and it is up to the
 consumer to use the correct id references.
+If you like to visually hide a label, but still present it with screen readers, use the `hiddenLabel` property.
 
 When you provide informational text via `sbb-form-error`, it automatically adds these elements' IDs
 to the form element's `aria-describedby` attribute.
@@ -124,6 +125,7 @@ technology will announce errors when they appear.
 | `size`          | `size`           | public  | `'l' \| 'm' \| undefined`                              | `'m'`       | Size variant, either l or m.                                                                                                                                          |
 | `borderless`    | `borderless`     | public  | `boolean`                                              | `false`     | Whether to display the form field without a border.                                                                                                                   |
 | `width`         | `width`          | public  | `'default' \| 'collapse'`                              | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. |
+| `hiddenLabel`   | `hidden-label`   | public  | `boolean`                                              | `false`     | Whether to visually hide the label. If hidden, screen readers will still read it.                                                                                     |
 | `floatingLabel` | `floating-label` | public  | `boolean`                                              | `false`     | Whether the label should float. If activated, the placeholder of the input is hidden.                                                                                 |
 | `negative`      | `negative`       | public  | `boolean`                                              | `false`     | Negative coloring variant flag.                                                                                                                                       |
 | `inputElement`  | -                | public  | `HTMLInputElement \| HTMLSelectElement \| HTMLElement` |             | Returns the input element.                                                                                                                                            |