hide label

ec-europa · Oct 28, 2024 · e51595b · e51595b
1 parent 2c4e32f
commit e51595b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/src/implementations/twig/components/form-group/README.md b/src/implementations/twig/components/form-group/README.md
@@ -8,12 +8,12 @@ npm install --save @ecl/twig-component-form-group
 
 ### Parameters:
 
-- **"label"** (string) (default: '') - Label for the form group
 - **"input"** (object) (default: {
   ...,
   input_type: 'checkbox' || 'datepicker' || 'file' || 'radio' || 'range' || 'rating-field' || 'search' || 'select || 'text' || 'textarea'
   }) - Object of type input
 - **"disabled"** (boolean) (default: false)
+- **"hide_label"** (bool) (default: false): hide form element label, for screen reader only
 - **"invalid"** (boolean) (default: false)
 - **"invalid_icon"** (object of type "icon") (default: {})
 - **"required"** (boolean) (default: false)

diff --git a/src/implementations/twig/components/form-group/form-group.html.twig b/src/implementations/twig/components/form-group/form-group.html.twig
@@ -4,6 +4,7 @@
   Parameters:
   - "input" (object) default({}) Object of type input
   - "disabled" (boolean) (default: false)
+  - "hide_label" (bool) (default: false): hide form element label, for screen reader only
   - "invalid" (boolean) (default: false)
   - "invalid_icon" (object of type "icon") (default: {})
   - "sr_invalid_icon" (string) (default: ''): additional label for the invalid icon; for screen readers
@@ -25,6 +26,7 @@
 {# Common properties #}
 
 {% set _label = label|default('') %}
+{% set _hide_label = hide_label|default(false) %}
 {% set _disabled = disabled|default(false) %}
 {% set _invalid = invalid|default(false) %}
 {% set _required = required|default(false) %}
@@ -178,6 +180,7 @@
       id="{{ _id }}-label"
     {% endif %}
       class="{{- _label_class -}}
+      {{- _hide_label ? ' ecl-u-sr-only' -}}
       {{- _invalid ? ' ecl-form-label--invalid' -}}
       {{- _disabled ? ' ecl-form-label--disabled' -}}"
     >

diff --git a/src/implementations/twig/components/form-group/form-group.story.js b/src/implementations/twig/components/form-group/form-group.story.js
@@ -29,7 +29,7 @@ const dataStandaloneCheckbox = {
 
 const getArgs = (data) => {
   const args = {
-    show_label: true,
+    hide_label: false,
     show_helper: true,
     show_error: true,
     invalid: data.invalid || false,
@@ -102,9 +102,6 @@ const prepareData = (data, args) => {
   Object.assign(clone, args);
   correctPaths(clone);
 
-  if (!args.show_label) {
-    clone.label = '';
-  }
   if (!args.show_error) {
     clone.invalid_text = '';
   }
@@ -119,7 +116,7 @@ const prepareData = (data, args) => {
     clone.input.multiple_search = !!args.show_search;
   }
   if (clone.input.input_type === 'checkbox') {
-    if (clone.input.standalone && !args.show_label) {
+    if (clone.input.standalone && args.hide_label) {
       clone.input.items[0].required_text = args.required_text;
       clone.input.items[0].label_aria_required = clone.label_aria_required;
       clone.input.items[0].optional_text = args.optional_text;
@@ -184,7 +181,7 @@ StandaloneCheckbox.storyName = 'Checkbox';
 StandaloneCheckbox.args = {
   ...getArgs(dataStandaloneCheckbox),
   show_helper: false,
-  show_label: false,
+  hide_label: true,
 };
 StandaloneCheckbox.argTypes = getArgTypes(dataStandaloneCheckbox, 'group');
 StandaloneCheckbox.parameters = {

diff --git a/src/implementations/vanilla/components/form-group/form-group.scss b/src/implementations/vanilla/components/form-group/form-group.scss
@@ -72,3 +72,9 @@ $form-group: null !default;
     margin-top: var(--s-xs);
   }
 }
+
+.ecl-form-label.ecl-u-sr-only + {
+  * {
+    margin-top: 0;
+  }
+}
diff --git a/src/playground/addons/story-utils/index.js b/src/playground/addons/story-utils/index.js
@@ -155,13 +155,13 @@ export const getIconControls = (data, icons, mapping) => {
 
 export const getFormControls = (data, type) => {
   const argTypes = {};
-  argTypes.show_label = {
-    name: 'label',
+  argTypes.hide_label = {
+    name: 'hide label',
     type: 'boolean',
-    description: `Show ${type} label`,
+    description: `Hide ${type} label on screen, keeping it only for screen readers`,
     table: {
       type: { summary: 'boolean' },
-      defaultValue: { summary: true },
+      defaultValue: { summary: false },
       category: 'Optional',
     },
   };
@@ -234,7 +234,6 @@ export const getFormControls = (data, type) => {
       defaultValue: { summary: '' },
       category: 'Content',
     },
-    if: { arg: 'show_label' },
   };
   argTypes.helper_text = {
     name: 'helper text',