Merge pull request #165 from AppQuality/develop

Add accessibility support to Toastr component
AppQuality · Jan 17, 2024 · c92f94c · c92f94c
2 parents 4de5443 + 027c98e
commit c92f94c
Showing 1 changed file with 86 additions and 12 deletions.
diff --git a/src/stories/toastr/Toastr.tsx b/src/stories/toastr/Toastr.tsx
@@ -6,40 +6,114 @@ import { ReactComponent as Danger } from "./assets/danger.svg";
 import { ReactComponent as Info } from "./assets/info.svg";
 import { ReactComponent as Success } from "./assets/success.svg";
 import { ReactComponent as Warining } from "./assets/warning.svg";
+import { Button } from "../button/Button";
 
 export interface ToastrProps extends BaseProps {
   type: keyof DefaultTheme["palette"];
   onClose?: () => void;
+  a11y?: {
+    closeLabel?: string;
+    dangerLabel?: string;
+    infoLabel?: string;
+    successLabel?: string;
+    warningLabel?: string;
+  };
 }
 
 interface ToastrStyleProps {
   theme: DefaultTheme;
   type: ToastrProps["type"];
 }
 
-const BasicToastr = ({ type, className, onClose, children }: ToastrProps) => {
+const BasicToastr = ({
+  type,
+  className,
+  onClose,
+  children,
+  a11y,
+}: ToastrProps) => {
   const getIcon = () => {
     switch (type) {
       case "danger":
-        return <Danger className="toastr-tryber" />;
+        return (
+          <>
+            <Danger aria-hidden="true" className="toastr-tryber" />
+            {a11y?.dangerLabel && (
+              <span id="a11y-dialog-type" className="sr-only">
+                {a11y.dangerLabel}
+              </span>
+            )}
+          </>
+        );
       case "info":
-        return <Info className="toastr-tryber" />;
+        return (
+          <>
+            <Info aria-hidden="true" className="toastr-tryber" />
+            {a11y?.infoLabel && (
+              <span id="a11y-dialog-type" className="sr-only">
+                {a11y.infoLabel}
+              </span>
+            )}
+          </>
+        );
       case "success":
-        return <Success className="toastr-tryber" />;
+        return (
+          <>
+            <Success aria-hidden="true" className="toastr-tryber" />
+            {a11y?.successLabel && (
+              <span id="a11y-dialog-type" className="sr-only">
+                {a11y.successLabel}
+              </span>
+            )}
+          </>
+        );
       case "warning":
-        return <Warining className="toastr-tryber" />;
+        return (
+          <>
+            <Warining aria-hidden="true" className="toastr-tryber" />
+            {a11y?.warningLabel && (
+              <span id="a11y-dialog-type" className="sr-only">
+                {a11y.warningLabel}
+              </span>
+            )}
+          </>
+        );
       default:
-        return <Info className="toastr-tryber" />;
+        return (
+          <>
+            <Info aria-hidden="true" className="toastr-tryber" />
+            {a11y?.infoLabel && (
+              <span id="a11y-dialog-type" className="sr-only">
+                {a11y.infoLabel}
+              </span>
+            )}
+          </>
+        );
     }
   };
   return (
-    <div className={`toastr-${type} aq-p-3 ${className}`}>
+    <div
+      role="dialog"
+      className={`toastr-${type} aq-p-3 ${className}`}
+      aria-labelledby="a11y-dialog-type"
+      aria-describedby="a11y-dialog-message"
+    >
       <div className="toastr-icon aq-mr-3">{getIcon()}</div>
-      <div className="toastr-message">{children}</div>
+      <div className="toastr-message" id="a11y-dialog-message">
+        {children}
+      </div>
       {onClose && (
-        <div className="toastr-close aq-ml-3" onClick={onClose}>
-          <XCircleFill />
-        </div>
+        <Button
+          flat
+          kind="light"
+          className="toastr-close aq-ml-3"
+          onClick={onClose}
+        >
+          {a11y?.closeLabel && (
+            <span className="sr-only">{a11y.closeLabel}</span>
+          )}
+          <XCircleFill aria-hidden="true" />
+        </Button>
       )}
     </div>
   );
@@ -82,7 +156,7 @@ export const Toastr = styled(BasicToastr)(({ theme }: ToastrStyleProps) => {
       }
     }
     .toastr-close {
-      cursor: pointer;
+      padding: 0;
       flex: 0 0 21px;
       svg {
         width: 100%;