fix: add a11y attributes for to define steps in more accessible way (#…

…140)

lingui.config.ts

@@ -45,6 +45,10 @@ const config: LinguiConfig = {
       include: ['packages/toggle/src/**/*.{ts,tsx}'],
       path: 'packages/toggle/src/locales/{locale}/messages',
     },
+    {
+      include: ['packages/steps/src/**/*.{ts,tsx}'],
+      path: 'packages/steps/src/locales/{locale}/messages',
+    },
     {
       include: ['packages/attention/src/**/*.{ts,tsx}'],
       path: 'packages/attention/src/locales/{locale}/messages',

packages/steps/src/component.tsx

@@ -20,14 +20,14 @@ export function Steps({horizontal, right, className, children}: StepsProps) {
         right: right,
       }}
     >
-      <div
+      <ul
         className={classNames(className, {
           [ccSteps.steps]: true,
           [ccSteps.stepsHorizontal]: horizontal,
         })}
       >
         {children}
-      </div>
+      </ul>
     </StepsContext.Provider>
   );
 }

packages/steps/src/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/export const messages=JSON.parse("{\"steps.aria.emptyCircle\":\"Empty circle\",\"steps.aria.active\":\"Step indicator active circle\",\"steps.aria.completed\":\"Step indicator completed circle\"}");

packages/steps/src/locales/en/messages.po

@@ -0,0 +1,32 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-10-24 09:48+0200\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#. Empty circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:25
+msgid "steps.aria.emptyCircle"
+msgstr "Empty circle"
+
+#. Active circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:18
+msgid "steps.aria.active"
+msgstr "Step indicator active circle"
+
+#. Completed circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:11
+msgid "steps.aria.completed"
+msgstr "Step indicator completed circle"

packages/steps/src/locales/fi/messages.po

@@ -0,0 +1,32 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-10-24 09:48+0200\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: fi\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#. Empty circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:25
+msgid "steps.aria.emptyCircle"
+msgstr ""
+
+#. Active circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:18
+msgid "steps.aria.active"
+msgstr ""
+
+#. Completed circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:11
+msgid "steps.aria.completed"
+msgstr ""

packages/steps/src/locales/nb/messages.po

@@ -0,0 +1,32 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2023-10-24 09:48+0200\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: nb\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#. Empty circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:25
+msgid "steps.aria.emptyCircle"
+msgstr ""
+
+#. Active circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:18
+msgid "steps.aria.active"
+msgstr ""
+
+#. Completed circle
+#. js-lingui-explicit-id
+#: packages/steps/src/step.tsx:11
+msgid "steps.aria.completed"
+msgstr ""

packages/steps/src/step.tsx

@@ -4,7 +4,36 @@ import { step as ccStep } from "@warp-ds/css/component-classes";
 import { useContext } from "react";
 import { StepsContext } from "./component";
 import { IconCheck16 } from "@warp-ds/icons/react";
+import { i18n } from '@lingui/core';
 
+const availableAriaLabels = {
+  completed: i18n._(
+    /*i18n*/ {
+      id: "steps.aria.completed",
+      message: "Step indicator completed circle",
+      comment: "Completed circle",
+    }
+  ),
+  active: i18n._(
+    /*i18n*/ {
+      id: "steps.aria.active",
+      message: "Step indicator active circle",
+      comment: "Active circle",
+    }
+  ),
+  default: i18n._(
+    /*i18n*/ {
+      id: "steps.aria.emptyCircle",
+      message: "Empty circle",
+      comment: "Empty circle",
+    }
+  )
+}
+
+const getAriaLabel = (props: StepProps) => {
+  const ariaLabel = Object.keys(availableAriaLabels).find(a => props[a]);
+  return ariaLabel ? availableAriaLabels[ariaLabel] : availableAriaLabels.default;
+}
 export interface StepProps {
   /**
    * Step is active
@@ -24,7 +53,8 @@ export interface StepProps {
   children: JSX.Element | JSX.Element[];
 }
 
-export function Step({ active, completed, children }: StepProps) {
+export function Step(props: StepProps) {
+  const { active, completed, children } = props;
   const StepsProps = useContext(StepsContext);
   const vertical = !StepsProps.horizontal;
   const left = !StepsProps.right;
@@ -69,11 +99,13 @@ export function Step({ active, completed, children }: StepProps) {
   });
 
   return (
-    <div className={stepClasses}>
+    <li className={stepClasses}>
       {!vertical && <div className={stepLineHorizontalClasses} />}
-      <div className={stepDotClasses}>{completed && <IconCheck16 />}</div>
+      <div className={stepDotClasses} role='img'
+      aria-label={getAriaLabel(props)}
+       {...(active && { 'aria-current': 'step'})}>{completed && <IconCheck16 />}</div>
       <div className={stepLineClasses} />
       <div className={stepContentClasses}>{children}</div>
-    </div>
+    </li>
   );
 }