feat(icon): add control for icon title - FRONT-4399

src/implementations/twig/components/button/button.html.twig

@@ -49,7 +49,8 @@
 {% set _icon = {
   name: '',
   path: '',
-  size: ''
+  size: '',
+  title: ''
 } %}
 
 {# Internal logic - Process properties #}
@@ -115,8 +116,16 @@
       {%- if icon.extra_classes is defined and icon.extra_classes is not empty -%}
         {% set _icon_extra_classes = _icon_extra_classes ~ ' ' ~ icon.extra_classes %}
       {%- endif -%}
+      {% set _icon_extra_accessibility = {} %}
+      {% set _icon_image = false %}
+      {%- if icon.title is not empty -%}
+        {% set _icon_extra_accessibility = { title: icon.title } %}
+        {% set _icon_image = true %}
+      {%- endif -%}
       {% include '@ecl/icon/icon.html.twig' with {
         icon: icon,
+        as_image: _icon_image,
+        extra_accessibility: _icon_extra_accessibility,
         extra_classes: _icon_extra_classes,
         extra_attributes: [
           { name: 'data-ecl-icon' }

src/implementations/twig/components/button/button.story.js

@@ -30,6 +30,7 @@ const withInverted = (story) => {
 const getArgs = () => ({
   icon_name: 'none',
   icon_position: 'after',
+  icon_title: '',
   disabled: false,
   hide_label: false,
 });
@@ -103,6 +104,17 @@ const getArgTypes = () => {
       category: 'Icon',
     },
   };
+  argTypes.icon_title = {
+    name: 'icon title',
+    type: 'string',
+    description: 'Textual information for the icon, mostly for screen readers',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+      category: 'Icon',
+    },
+    if: { arg: 'icon_name', neq: 'none' },
+  };
   argTypes.disabled = {
     name: 'disabled',
     type: { name: 'boolean' },
@@ -147,6 +159,7 @@ const prepareData = (data, args) => {
     data.icon.transform =
       args.icon_transform !== 'none' ? args.icon_transform : '';
     data.icon_position = args.icon_position;
+    data.icon.title = args.icon_title;
   }
   if (args.icon_name === 'none') {
     delete data.icon;

src/implementations/twig/components/icon/README.md

@@ -14,6 +14,7 @@ npm install --save @ecl/twig-component-icon
   - "size" (string) (default: 'm') size of icon. Available sizes are 'xs','s','m','l','xl','2xl','fluid'
   - "transform" (string) (default: '') Transformation of icon. Available transformations are 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical')
   - "color" (string) (default: '') Color of icon. Available colors are 'default', 'inverted', 'primary'
+  - "title": '' (string) (default: '') Additional title for the icon; shortcut for extra accessibility title
 - **"as_image"**: (boolean) (default: false) Whether the icon is used as an image
 - **"extra_accessibility"** (optional) (object) Extra tags for accessibility when used as an image
   - description: '' (desc tag)

src/implementations/twig/components/icon/icon.html.twig

@@ -9,6 +9,7 @@
           size: 'm' (available options: 'xs','s','m','l','xl','2xl','fluid'),
           transform: 'rotate-0' (available options: 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical'),
           color: 'default' (available options: 'default', 'inverted', 'primary')
+          title: '' (additional title for the icon; shortcut for extra accessibility title)
           extra_classes (string) (default: '')
         }
     - "as_image": false,
@@ -30,30 +31,36 @@
 
 {# Internal properties #}
 
-{% set _as_image = as_image|default(false) %}
-{% set _aria_hidden = 'true' %}
-
 {% set _icon = {
   path: '',
   name: '',
   size: 'm',
   transform: '',
   color: '',
+  title: '',
 }|merge(icon|default({})) %}
 
 {% set _extra_accessibility = {
   description: '',
   description_id: '',
-  title: '',
+  title: _icon.title is not empty ? _icon.title : '',
   title_id: '',
-  role: 'img',
+  role: '',
 }|merge(extra_accessibility|default({})) %}
 
+{% set _as_image = as_image|default(false) %}
+{% set _aria_hidden = 'true' %}
+
 {% set _css_class = 'ecl-icon' %}
 {% set _extra_attributes = '' %}
 
 {# Internal logic - Process properties #}
 
+{% if _extra_accessibility.title is not empty %}
+  {% set _as_image = 'true' %}
+  {% set _extra_accessibility = _extra_accessibility|merge({role: 'img'}) %}
+{% endif %}
+
 {% if _as_image %}
   {% set _aria_hidden = 'false' %}
 {% endif %}
@@ -68,13 +75,14 @@
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
 
-{% if extra_accessibility is defined and extra_accessibility is not empty %}
+{% if _extra_accessibility.role is not empty %}
   {% set extra_attributes = extra_attributes|default([])|merge([
     { name: 'role', value: _extra_accessibility.role },
   ]) %}
-  {% if extra_accessibility.title_id is not empty or extra_accessibility.description_id is not empty %}
-    {% set extra_attributes = extra_attributes|merge([{ name: 'aria-labelledby', value: _extra_accessibility.title_id ~ ' ' ~ _extra_accessibility.description_id }]) %}
-  {% endif %}
+{% endif %}
+
+{% if _extra_accessibility.title_id is not empty or _extra_accessibility.description_id is not empty %}
+  {% set extra_attributes = extra_attributes|merge([{ name: 'aria-labelledby', value: _extra_accessibility.title_id ~ ' ' ~ _extra_accessibility.description_id }]) %}
 {% endif %}
 
 {% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}

src/implementations/twig/components/icon/icon.story.js

@@ -18,6 +18,7 @@ const getArgs = (data) => ({
   size: 'm',
   color: 'default',
   transform: 'none',
+  title: '',
 });
 
 const getArgTypes = (data, icons) => getIconControls(data, icons, iconMapping);
@@ -30,6 +31,7 @@ const prepareData = (data, args) => {
     args.transformation = '';
   }
   correctPaths(data);
+  data.icon.title = args.title;
   data.icon.name = args.name;
   data.icon.size = args.size;
   data.icon.color = args.color;

src/implementations/twig/components/link/link.html.twig

@@ -62,7 +62,8 @@
 {% set _icon = {
   name: '',
   path: '',
-  size: ''
+  size: '',
+  title: ''
 } %}
 
 {% set _css_class = 'ecl-link' %}
@@ -77,12 +78,9 @@
     name: 'external',
     path: _link.icon_path,
     size: '2xs',
+    title: _extra_accessibility.title is empty and _icon.title is empty and _link.sr_external is not empty ? _link.sr_external : '',
   })] %}
 
-  {% if _extra_accessibility.title is empty and _link.sr_external is not empty %}
-    {% set _extra_accessibility = _extra_accessibility|merge({ title: _link.sr_external }) %}
-  {% endif %}
-
   {% set as_image = true %}
 
   {% set _link = _link|merge({ 

src/implementations/twig/components/link/link.story.js

@@ -36,6 +36,7 @@ const getArgs = (data) => ({
   label: data.link.label,
   icon_name: 'none',
   icon_position: 'after',
+  icon_title: '',
   external: false,
   hide_label: false,
 });
@@ -82,8 +83,6 @@ const getArgTypes = () => ({
     name: 'icon transform',
     type: { name: 'select' },
     description: 'Link icon transform',
-    if: { arg: 'external', truthy: false },
-    // eslint-disable-next-line no-dupe-keys
     if: { arg: 'icon_name', neq: 'none' },
     options: [
       'rotate-90',
@@ -108,8 +107,6 @@ const getArgTypes = () => ({
     name: 'icon position',
     type: { name: 'inline-radio' },
     description: 'Icon position inside the link',
-    if: { arg: 'external', truthy: false },
-    // eslint-disable-next-line no-dupe-keys
     if: { arg: 'icon_name', neq: 'none' },
     options: ['before', 'after'],
     mapping: {
@@ -122,11 +119,23 @@ const getArgTypes = () => ({
       category: 'Icon',
     },
   },
+  icon_title: {
+    name: 'icon title',
+    type: 'string',
+    description: 'Textual information for the icon, mostly for screen readers',
+    if: { arg: 'icon_name', neq: 'none' },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+      category: 'Icon',
+    },
+  },
   hide_label: {
     name: 'hide label',
     type: { name: 'boolean' },
     description:
       'Hide link label, keeping it only for screen readers. This only works if an icon is used',
+    if: { arg: 'icon_name', neq: 'none' },
     table: {
       type: { summary: 'boolean' },
       defaultValue: { summary: false },
@@ -149,6 +158,7 @@ const prepareData = (data, args) => {
     data.icon.transform = args.icon_transform;
     data.icon.size = 'xs';
     data.icon.path = 'icons.svg';
+    data.icon.title = args.icon_title;
   }
   if (args.icon_name === 'none') {
     delete data.icon;

src/playground/addons/story-utils/index.js

@@ -138,6 +138,17 @@ export const getIconControls = (data, icons, mapping) => {
     },
     if: { arg: 'name', neq: 'none' },
   };
+  argTypes.title = {
+    name: 'icon title',
+    type: 'string',
+    description: 'Textual information for the icon, mostly for screen readers',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+      category: 'Icon',
+    },
+    if: { arg: 'name', neq: 'none' },
+  };
 
   return argTypes;
 };