added opening hours voice over logic and format time (#4080)

Author: chlebektomas

storefront/components/Basic/Flag/Flag.tsx

@@ -6,9 +6,10 @@ type FlagProps = {
     href?: string;
     type?: 'blog' | 'discount';
     rgbBgColor?: string;
+    ariaLabel?: string;
 };
 
-export const Flag: FC<FlagProps> = ({ children, href, className, type, rgbBgColor }) => {
+export const Flag: FC<FlagProps> = ({ children, href, className, type, rgbBgColor, ariaLabel }) => {
     const router = useRouter();
 
     const textColor = rgbBgColor && getYIQContrastTextColor(rgbBgColor);
@@ -40,6 +41,7 @@ export const Flag: FC<FlagProps> = ({ children, href, className, type, rgbBgColo
     if (href) {
         return (
             <button
+                aria-label={ariaLabel}
                 className={flagTwClass}
                 style={{ backgroundColor: rgbBgColor }}
                 tabIndex={0}
@@ -52,7 +54,7 @@ export const Flag: FC<FlagProps> = ({ children, href, className, type, rgbBgColo
     }
 
     return (
-        <div className={flagTwClass} style={{ backgroundColor: rgbBgColor }}>
+        <div aria-label={ariaLabel} className={flagTwClass} style={{ backgroundColor: rgbBgColor }}>
             {children}
         </div>
     );

storefront/components/Basic/Infobox/Infobox.tsx

@@ -3,7 +3,7 @@ import { ChatIcon } from 'components/Basic/Icon/ChatIcon';
 export const Infobox: FC<{ message: string }> = ({ message }) => {
     return (
         <div className="bg-background-accent-less text-text-accent inline-flex w-full items-center justify-start gap-1 rounded-md px-4 py-2.5 text-sm font-semibold">
-            <ChatIcon className="text-2x size-6" />
+            <ChatIcon aria-hidden="true" className="text-2x size-6" />
             {message}
         </div>
     );

storefront/components/Blocks/OpeningHours/OpeningHours.tsx

@@ -4,6 +4,7 @@ import { TypeOpeningHours } from 'graphql/types';
 import useTranslation from 'next-translate/useTranslation';
 import { Fragment } from 'react';
 import { twJoin } from 'tailwind-merge';
+import { formatAccessibleTime } from 'utils/accessibility/formatAccessibleTime';
 import { useFormatDate } from 'utils/formatting/useFormatDate';
 import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 import { twMergeCustom } from 'utils/twMerge';
@@ -12,7 +13,7 @@ export const OpeningHours: FC<{ openingHours: StoreOrPacketeryPoint['openingHour
     openingHours,
     className,
 }) => {
-    const { t } = useTranslation();
+    const { t, lang } = useTranslation();
     const { formatDate } = useFormatDate();
 
     const getDayName = (currentDayOfWeek: number, requestedDayOfWeek: number): string => {
@@ -72,34 +73,55 @@ export const OpeningHours: FC<{ openingHours: StoreOrPacketeryPoint['openingHour
                 })}
 
             <div
+                aria-label={t('Opening hours')}
                 className={twMergeCustom('text-text-default flex flex-col gap-1 self-baseline text-xs', className)}
                 data-tid={TIDs.opening_hours}
+                role="list"
             >
                 {openingHours.openingHoursOfDays.map(({ date, dayOfWeek, openingHoursRanges }) => {
                     const isToday = openingHours.dayOfWeek === dayOfWeek;
                     const isClosedWholeDay = openingHoursRanges.length === 0;
 
+                    const ariaClosedText = `${getDayName(openingHours.dayOfWeek, dayOfWeek)} ${formatDate(date)}, ${t('Closed')}`;
+                    const ariaOpenText = `${getDayName(openingHours.dayOfWeek, dayOfWeek)} ${formatDate(date)}, ${t('Open')} ${openingHoursRanges
+                        .map(({ openingTime, closingTime }) => {
+                            const openingFormatted = formatAccessibleTime(openingTime, lang);
+                            const closingFormatted = formatAccessibleTime(closingTime, lang);
+
+                            return `${openingFormatted} ${t('to')} ${closingFormatted}`;
+                        })
+                        .join(', ')}`;
+
+                    const dayAriaText = isClosedWholeDay ? ariaClosedText : ariaOpenText;
+
                     return (
                         <div
                             key={dayOfWeek}
+                            aria-current={isToday ? 'date' : undefined}
+                            aria-label={dayAriaText}
                             className={twJoin(
                                 'flex flex-col flex-wrap gap-x-5 gap-y-2 rounded-lg p-2 sm:flex-row sm:items-center',
                                 isToday ? 'bg-background-accent-less' : 'hover:bg-background-more',
                             )}
                         >
-                            <span className="h6 w-44">
+                            <span aria-hidden="true" className="h6 w-44">
                                 {getDayName(openingHours.dayOfWeek, dayOfWeek)} <span>{formatDate(date)}</span>
                             </span>
 
-                            <span>
+                            <span aria-hidden="true">
                                 {isClosedWholeDay ? (
                                     <>{t('Closed')}</>
                                 ) : (
-                                    openingHoursRanges.map(({ openingTime, closingTime }, index) => (
-                                        <Fragment key={index}>
-                                            {index > 0 && ','} {openingTime}&nbsp;&#8209;&nbsp;{closingTime}
-                                        </Fragment>
-                                    ))
+                                    openingHoursRanges.map(({ openingTime, closingTime }, index) => {
+                                        const openingFormatted = formatAccessibleTime(openingTime, lang);
+                                        const closingFormatted = formatAccessibleTime(closingTime, lang);
+
+                                        return (
+                                            <Fragment key={index}>
+                                                {index > 0 && ','} {openingFormatted} - {closingFormatted}
+                                            </Fragment>
+                                        );
+                                    })
                                 )}
                             </span>
 

storefront/components/Blocks/OpeningHours/OpeningHoursToday.tsx

@@ -0,0 +1,38 @@
+import { TIDs } from 'cypress/tids';
+import { TypeOpeningHours } from 'graphql/types';
+import useTranslation from 'next-translate/useTranslation';
+import { formatAccessibleTime } from 'utils/accessibility/formatAccessibleTime';
+
+export default function OpeningHoursToday({ openingHours }: { openingHours: TypeOpeningHours }) {
+    const { t, lang } = useTranslation();
+
+    const todayOpeningDayRanges = openingHours.openingHoursOfDays[0].openingHoursRanges;
+
+    if (todayOpeningDayRanges.length === 0) {
+        return null;
+    }
+
+    const ariaLabel = `${t('Today opening hours')} ${todayOpeningDayRanges
+        .map(({ openingTime, closingTime }) => {
+            const openingFormatted = formatAccessibleTime(openingTime, lang);
+            const closingFormatted = formatAccessibleTime(closingTime, lang);
+
+            return `${openingFormatted} ${t('to')} ${closingFormatted}`;
+        })
+        .join(', ')}`;
+
+    return (
+        <div aria-current="date" aria-label={ariaLabel} className="ml-2.5 text-xs" data-tid={TIDs.store_opening_hours}>
+            {todayOpeningDayRanges.map(({ openingTime, closingTime }, index) => {
+                const openingFormatted = formatAccessibleTime(openingTime, lang);
+                const closingFormatted = formatAccessibleTime(closingTime, lang);
+
+                return (
+                    <span key={index} aria-hidden="true">
+                        {index > 0 && ','} {openingFormatted} - {closingFormatted}
+                    </span>
+                );
+            })}
+        </div>
+    );
+}

storefront/components/Blocks/OpeningHours/OpeningStatus.tsx

@@ -26,6 +26,8 @@ export const OpeningStatus: FC<OpeningStatusProps> = ({ status, className }) =>
         }
     };
 
+    const ariaLabel = t('Currently {{status}}', { status: statusText(status) });
+
     const statusClasses = {
         [TypeStoreOpeningStatusEnum.Open]: 'bg-opening-status-open',
         [TypeStoreOpeningStatusEnum.Closed]: 'bg-opening-status-closed',
@@ -34,8 +36,11 @@ export const OpeningStatus: FC<OpeningStatusProps> = ({ status, className }) =>
     };
 
     return (
-        <Flag className={twMergeCustom('text-text-inverted text-nowrap', className, statusClasses[status])}>
-            {statusText(status)}
+        <Flag
+            ariaLabel={ariaLabel}
+            className={twMergeCustom('text-text-inverted text-nowrap', className, statusClasses[status])}
+        >
+            <div aria-hidden="true">{statusText(status)}</div>
         </Flag>
     );
 };

storefront/components/Blocks/StoreList/StoreListItem.tsx

@@ -3,13 +3,13 @@ import { AnimateCollapseDiv } from 'components/Basic/Animations/AnimateCollapseD
 import { ArrowIcon } from 'components/Basic/Icon/ArrowIcon';
 import { Infobox } from 'components/Basic/Infobox/Infobox';
 import { OpeningHours } from 'components/Blocks/OpeningHours/OpeningHours';
+import OpeningHoursToday from 'components/Blocks/OpeningHours/OpeningHoursToday';
 import { OpeningStatus } from 'components/Blocks/OpeningHours/OpeningStatus';
 import { LinkButton } from 'components/Forms/Button/LinkButton';
 import { TIDs } from 'cypress/tids';
 import { AnimatePresence } from 'framer-motion';
 import useTranslation from 'next-translate/useTranslation';
 import { useEffect, useRef, useState } from 'react';
-import { getTodayOpeningHours } from 'utils/openingHours/openingHoursHelper';
 import { StoreOrPacketeryPoint } from 'utils/packetery/types';
 import { twMergeCustom } from 'utils/twMerge';
 
@@ -71,31 +71,37 @@ export const StoreListItem: FC<StoreListItemProps> = ({ store, isSelected }) =>
                 setIsExpanded((isExpanded) => !isExpanded);
             }}
         >
-            <div className="flex items-center justify-between gap-3.5">
+            <div aria-label={t('Store info')} className="flex items-center justify-between gap-3.5">
                 <div className="w-full items-center justify-between xl:flex">
                     <div className="max-xl:mb-2.5 xl:w-[215px]">
                         <span className="h5">{store.name}</span>
-                        <p className="mt-1.5 text-xs">
+
+                        <p aria-label={t('Address')} className="mt-1.5 text-xs">
                             {store.street}, {store.postcode} {store.city}
                         </p>
                     </div>
+
                     {store.distance && (
                         <p className="text-input-placeholder-default text-xs max-xl:hidden">
                             {t('{{ distance }} km from you', {
                                 distance: (store.distance / 1000).toFixed(0),
                             })}
                         </p>
                     )}
-                    <div className="flex w-44 items-center xl:block xl:text-right" data-tid={TIDs.store_opening_status}>
+                    <div
+                        className="flex items-center xl:block xl:w-44 xl:text-right"
+                        data-tid={TIDs.store_opening_status}
+                    >
                         <OpeningStatus className="xl:mb-1.5" status={store.openingHours.status} />
-                        <p className="ml-2.5 text-xs" data-tid={TIDs.store_opening_hours}>
-                            {getTodayOpeningHours(store.openingHours)}
-                        </p>
+
+                        <OpeningHoursToday openingHours={store.openingHours} />
                     </div>
                 </div>
-                <div>
-                    <ArrowIcon className={`size-5 motion-safe:transform ${isExpanded ? 'rotate-180' : ''}`} />
-                </div>
+
+                <ArrowIcon
+                    aria-hidden="true"
+                    className={`size-5 motion-safe:transform ${isExpanded ? 'rotate-180' : ''}`}
+                />
             </div>
 
             <div id={storeInfoId}>

storefront/cypress/snapshots/e2e/cart/cartPage.cy.ts/2-2-13 transport and payment page with non-free options after applying promocode.png

@@ -17,6 +17,7 @@
     "Add to cart {{ productName }}, quantity {{ quantity }} {{ unit }} for {{ price }}": "Přidat do košíku {{ productName }}, množství {{ quantity }} {{ unit }} za {{ price }}",
     "Add to wishlist": "Přidat do oblíbených produktů",
     "Add user": "Přidat uživatele",
+    "Address": "Adresa",
     "adminLoggedInAsCustomerWarning": "Pozor! Jste přihlášen za uživatele s emailem {{ email }} <button>Odhlásit</button>",
     "All articles": "Všechny články",
     "An error occurred while adding user": "Při přidávání uživatele nastala chyba",
@@ -145,6 +146,7 @@
     "Create complaint manually": "Vytvořit reklamaci ručně",
     "Creation date": "Datum objednávky",
     "Current password": "Současné heslo",
+    "Currently {{status}}": "Aktuálně {{status}}",
     "Currently, it is not possible to purchase any variant of this product.": "Aktuálně není možné koupit ani jednu variantu produktu.",
     "Customer information": "Informace o zákazníkovi",
     "Customer is already registered.": "Zákazník je již registrován.",
@@ -638,6 +640,7 @@
     "Store detail": "Detail prodejny",
     "Store detail for {{storeName}}": "Detail prodejny {{storeName}}",
     "Store image of": "Obrázek prodejny",
+    "Store info": "Informace o prodejně",
     "Store not found.": "Prodejna nenalezena.",
     "Stores": "Prodejny",
     "Stores and collection points throughout the Czech Republic": "Prodejny a odběrná místa po celé ČR",
@@ -725,6 +728,7 @@
     "To prevent the possibility of account theft, it is necessary to deal with the change of e-mail individually. If your e-mail address has changed, please contact us.": "Abychom předešli možnosti odcizení účtu, je třeba změnu e-mailu řešit individuálně. Pokud se Vám e-mailová adresa změnila, tak nás prosím kontaktujte.",
     "To sign up for newsletter, enter": "Pro přihlášení k newsletteru zadejte",
     "Today": "Dnes",
+    "Today opening hours": "Dnešní otevírací doba",
     "Toggle bestseller list": "Přepnout seznam bestsellerů",
     "Toggle blog category": "Zobrazit/skrýt kategorii blogu",
     "Toggle marketing consent": "Přepnout marketingové souhlas",