[List] screen reader support

Author: jrlarano

lib/kits/core-ui/components/helpers/component.ts

@@ -491,3 +491,12 @@ export const getTotalQuantityByOffer = (savedOffers, offerId) => {
         return totalQuantity;
     }, 0);
 };
+
+export const formatDateForReader = (date) => {
+    const dateFormat = new Date(date);
+
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        day: 'numeric'
+    }).format(dateFormat);
+};

lib/kits/core-ui/components/list-publications/main-container.ts

@@ -7,7 +7,7 @@ const defaultTemplate = `\
     <ul class="sgn-publications-list-items-container">
         {{#publications}}
         <li class="sgn-publications-li" data-status="{{status}}">
-            <div class="publications__item" data-id="{{id}}">
+            <div class="publications__item" data-id="{{id}}" tabindex="0" aria-label="{{label}}; {{translations.validFrom}} {{dateReaderFrom}} {{translations.till}} {{dateReaderTill}}">
                 <div class="sgn-publications-list-content-img">
                     <img data-id="{{id}}" src="{{images.view}}" alt="{{label}}">
                     <div class="sgn-publications-list-content-status">
@@ -33,12 +33,15 @@ const defaultTemplate = `\
 
 const MainContainer = ({publications, template, el}) => {
     const translations = {
-        upcoming: translate('publication_viewer_upcoming')
+        upcoming: translate('publication_viewer_upcoming'),
+        validFrom: translate('publication_viewer_offer_valid_from'),
+        till: translate('publication_viewer_until_label')
     };
 
     const render = () => {
         el.innerHTML = Mustache.render(template?.innerHTML || defaultTemplate, {
             publications,
+            translations,
             upcomingLabel: function () {
                 return this.status === 'inactive' ? translations.upcoming : '';
             }

lib/kits/core-ui/list-publications.ts

@@ -10,7 +10,8 @@ import {
     transformFilter,
     getHashFragments,
     getPubState,
-    parseDateStr
+    parseDateStr,
+    formatDateForReader
 } from './components/helpers/component';
 import type {Tracker} from '../events';
 
@@ -123,6 +124,11 @@ const ListPublications = (
     const addPublicationListener = () =>
         document.querySelectorAll('.publications__item').forEach((itemEl) => {
             itemEl.addEventListener('click', clickPublicationItem, false);
+            itemEl.addEventListener('keydown', (event: KeyboardEvent) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    clickPublicationItem(event);
+                }
+            });
         });
 
     const dispatchPublicationClickEvent = (detail) => {
@@ -165,6 +171,8 @@ const ListPublications = (
                 ...publication,
                 dateFrom: formatDate(publication?.run_from),
                 dateTill: formatDate(publication?.run_till),
+                dateReaderFrom: formatDateForReader(publication?.run_from),
+                dateReaderTill: formatDateForReader(publication?.run_till),
                 status: getPubState(
                     publication?.run_from,
                     new Date(

lib/kits/core-ui/paged-publication.ts

@@ -16,7 +16,8 @@ import {
     transformFilter,
     translate,
     animateShoppingListCounter,
-    dispatchProductClickEvent
+    dispatchProductClickEvent,
+    formatDateForReader
 } from './components/helpers/component';
 import {transformScriptData} from './components/helpers/transformers';
 import MainContainer from './components/paged-publication/main-container';
@@ -220,23 +221,22 @@ const PagedPublication = (
     const addScreenReaderText = () => {
         const container = options.el;
 
-        const formatDate = (date) => {
-            const dateFormat = new Date(date);
-
-            return new Intl.DateTimeFormat('en-US', {
-                month: 'long',
-                day: 'numeric'
-            }).format(dateFormat);
+        const translations = {
+            validFrom: translate('publication_viewer_offer_valid_from'),
+            till: translate('publication_viewer_until_label')
         };
 
+        const {branding, label, page_count, run_from, run_till} =
+            sgnData?.details || {};
+
         container.setAttribute(
             'aria-label',
-            `${sgnData?.details?.branding?.name};
-            ${sgnData?.details?.label};
-            ${sgnData?.details?.page_count} pages;
-            Valid from ${formatDate(
-                sgnData?.details?.run_from
-            )} to ${formatDate(sgnData?.details?.run_till)}
+            `${branding?.name};
+            ${label};
+            ${page_count} pages;
+            ${translations.validFrom} ${formatDateForReader(run_from)} ${
+                translations.till
+            } ${formatDateForReader(run_till)}
             `
         );
     };