feat(modal): add screen reader text to icon - FRONT-4320 (#3304)

ec-europa · Mar 25, 2024 · 382bc4d · 382bc4d · github-actions · Mar 25, 2024
1 parent e65bf6e
commit 382bc4d
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 0 deletions.
diff --git a/src/implementations/twig/components/modal/README.md b/src/implementations/twig/components/modal/README.md
@@ -13,6 +13,7 @@ npm install --save @ecl/twig-component-modal
 - **"variant"** (string) (default: ''): could be empty, 'information, 'success', 'warning' or 'error'
 - **"size"** (string) (default: 'l'): Size of the modal. Could be 's' or 'l'
 - **"icon_path"** (string) (default: '') Path to the icon sprite
+- **"sr_icon"** (string) (default: ''): additional label for the icon; for screen readers
 - **"close"** (object of type "button") (default: {}): close button; label has to be provided for screen reader
 - **"header_icon"** (associative array) (default: {}): Optional icon in the header, following ECL Icon structure
 - **"buttons"** (array) (default: {}) Array of ECL Button, displayed in the modal footer
@@ -36,6 +37,7 @@ npm install --save @ecl/twig-component-modal
   id: 'modal-example',
   toggle_id: 'modal-toggle',
   icon_path: '/icons.svg',
+  sr_icon: 'Information',
   close: {
     label: 'Close',
     icon: {

diff --git a/src/implementations/twig/components/modal/__snapshots__/modal.test.js.snap b/src/implementations/twig/components/modal/__snapshots__/modal.test.js.snap
@@ -1,5 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Modal Collapsed information, renders correctly 1`] = `
+<jest>
+  <dialog
+    aria-labelledby="modal-example-header"
+    aria-modal="true"
+    class="ecl-modal ecl-modal--information ecl-modal--l"
+    data-ecl-auto-init="Modal"
+    data-ecl-modal-toggle="modal-toggle"
+    id="modal-example"
+  >
+    <div
+      class="ecl-modal__container ecl-container"
+    >
+      <div
+        class="ecl-modal__content ecl-col-12 ecl-col-m-10 ecl-col-l-8"
+      >
+        <header
+          class="ecl-modal__header"
+        >
+          <svg
+            aria-hidden="true"
+            class="ecl-icon ecl-icon--l ecl-modal__icon"
+            focusable="false"
+            role="img"
+          >
+            <title>
+              Information
+            </title>
+            <use
+              xlink:href="/icons.svg#information"
+            />
+          </svg>
+          <div
+            class="ecl-modal__header-content"
+            id="modal-example-header"
+          >
+            Modal title
+          </div>
+          <button
+            class="ecl-button ecl-button--tertiary ecl-modal__close ecl-button--icon-only"
+            data-ecl-modal-close=""
+            type="button"
+          >
+            <span
+              class="ecl-button__container"
+            >
+              <span
+                class="ecl-button__label"
+                data-ecl-label="true"
+              >
+                Close
+              </span>
+              <svg
+                aria-hidden="true"
+                class="ecl-icon ecl-icon--m ecl-button__icon"
+                data-ecl-icon=""
+                focusable="false"
+              >
+                <use
+                  xlink:href="/icons.svg#close"
+                />
+              </svg>
+            </span>
+          </button>
+        </header>
+        <div
+          class="ecl-modal__body"
+        >
+          <div
+            class="ecl-modal__body-scroll"
+            data-ecl-modal-scroll=""
+          >
+            Scrollable content: 
+            <br />
+            Sed quam augue, volutpat sed dapibus in, accumsan a arcu. Nulla quam enim, porttitor at neque a, egestas porttitor tortor. Nam tortor sem, elementum id augue quis, posuere vestibulum dui. Donec id posuere libero, sit amet egestas lorem. Aliquam finibus ipsum mauris, a molestie tortor laoreet. Morbi interdum orci arcu, tempor porta nisl elementum non. Morbi blandit risus sed turpis mollis mattis. Maecenas semper, risus nec sollicitudin aliquet, dui eros vehicula nulla, ac bibendum mauris mauris a lectus. Ut ut justo in sem vestibulum mollis. Pellentesque ac commodo erat. Phasellus vitae aliquet mi. Suspendisse sed nisl feugiat, porta ante a, finibus nisi.
+            <br />
+            Sed quam augue, volutpat sed dapibus in, accumsan a arcu. Nulla quam enim, porttitor at neque a, egestas porttitor tortor. Nam tortor sem, elementum id augue quis, posuere vestibulum dui. Donec id posuere libero, sit amet egestas lorem. Aliquam finibus ipsum mauris, a molestie tortor laoreet. Morbi interdum orci arcu, tempor porta nisl elementum non. Morbi blandit risus sed turpis mollis mattis. Maecenas semper, risus nec sollicitudin aliquet, dui eros vehicula nulla, ac bibendum mauris mauris a lectus. Ut ut justo in sem vestibulum mollis. Pellentesque ac commodo erat. Phasellus vitae aliquet mi. Suspendisse sed nisl feugiat, porta ante a, finibus nisi.
+          </div>
+          <div
+            aria-hidden="true"
+            class="ecl-modal__body-overflow"
+          />
+          <div
+            class="ecl-modal__body-fixed"
+          >
+            <div
+              class="ecl-checkbox"
+            >
+              <input
+                class="ecl-checkbox__input"
+                id="checkbox-default-1"
+                name="checkbox-default"
+                type="checkbox"
+                value="1"
+              />
+              <label
+                class="ecl-checkbox__label"
+                for="checkbox-default-1"
+              >
+                <span
+                  class="ecl-checkbox__box"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="ecl-icon ecl-icon--m ecl-checkbox__icon"
+                    focusable="false"
+                  >
+                    <use
+                      xlink:href="/icons.svg#check"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="ecl-checkbox__text"
+                >
+                  Option label
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <footer
+          class="ecl-modal__footer"
+        >
+          <div
+            class="ecl-modal__footer-content"
+          >
+            <button
+              class="ecl-button ecl-button--secondary ecl-modal__button"
+              data-ecl-modal-close=""
+              type="button"
+            >
+              Close
+            </button>
+            <button
+              class="ecl-button ecl-button--primary ecl-modal__button"
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </dialog>
+</jest>
+`;
+
 exports[`Modal Collapsed renders correctly 1`] = `
 <jest>
   <dialog

diff --git a/src/implementations/twig/components/modal/modal.html.twig b/src/implementations/twig/components/modal/modal.html.twig
@@ -7,6 +7,7 @@
     - "variant" (string) (default: ''): could be empty, 'information, 'success', 'warning' or 'error'
     - "size" (string) (default: 'l'): Size of the modal. Could be 's' or 'l' 
     - "icon_path" (string) (default: '') Path to the icon sprite
+    - "sr_icon" (string) (default: ''): additional label for the icon; for screen readers
     - "close" (object of type "button") (default: {}): close button; label has to be provided for screen reader
     - "buttons" (array) (default: {}) Array of ECL Button, displayed in the modal footer
     - "extra_classes" (string) (default: '')
@@ -32,6 +33,7 @@
 {% set _size = size|default('l') %}
 {% set _css_class = 'ecl-modal' %}
 {% set _icon_path = icon_path|default('') %}
+{% set _sr_icon = sr_icon|default('') %}
 {% set _close = close|default({}) %}
 {% set _header = header|default('') %}
 {% set _header_icon = '' %}
@@ -95,6 +97,9 @@
               name: _header_icon,
               size: 'l',
             },
+            extra_accessibility: not _sr_icon ? {} : {
+              title: _sr_icon,
+            },
             extra_classes: 'ecl-modal__icon',
           } only %}
         {% endif %}

diff --git a/src/implementations/twig/components/modal/modal.story.js b/src/implementations/twig/components/modal/modal.story.js
@@ -101,6 +101,7 @@ const prepareData = (data, args) => {
   dataClone.size = args.size;
   dataClone.header = args.header;
   dataClone.body = args.body;
+  dataClone.sr_icon = args.variant;
 
   if (args.footer === 0) {
     delete dataClone.buttons;

diff --git a/src/implementations/twig/components/modal/modal.test.js b/src/implementations/twig/components/modal/modal.test.js
@@ -6,6 +6,12 @@ import {
 import { axe, toHaveNoViolations } from 'jest-axe';
 import demoData from '@ecl/specs-component-modal/demo/data-ec';
 
+const demoInfo = {
+  ...demoData,
+  variant: 'information',
+  sr_icon: 'Information',
+};
+
 expect.extend(toHaveNoViolations);
 
 describe('Modal', () => {
@@ -18,6 +24,11 @@ describe('Modal', () => {
       return expect(render(demoData)).resolves.toMatchSnapshot();
     });
 
+    test('information, renders correctly', () => {
+      expect.assertions(1);
+      return expect(render(demoInfo)).resolves.toMatchSnapshot();
+    });
+
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 

diff --git a/src/implementations/twig/components/notification/README.md b/src/implementations/twig/components/notification/README.md
@@ -33,6 +33,7 @@ npm install --save @ecl/twig-component-notification
     name: 'info', 
     size: 'l', 
   }, 
+  sr_icon: 'Information',
   title: 'Information notification', 
   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 
   close: {