fixed axe problems (#333)

Co-authored-by: Przemek <przemek.wiktorski@escola.pl>
EscolaLMS · Mar 11, 2024 · 66270c2 · 66270c2
1 parent 066c1b0
commit 66270c2
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 35 deletions.
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -19,7 +19,7 @@ const ModeTypes = {
   GRAY: "gray",
 } as const;
 
-type ModeProp = typeof ModeTypes[keyof typeof ModeTypes];
+type ModeProp = (typeof ModeTypes)[keyof typeof ModeTypes];
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -369,6 +369,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       {...props}
       className={`wellms-component ${className}`}
       role="button"
+      aria-labelledby="labeldiv"
     >
       {loading && <Spin color={loadingColor} />}
       {children}

diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
@@ -314,14 +314,14 @@ export const Input: React.FC<InputProps> = (props) => {
     >
       <div className={`input-container ${addFilledClass()}`}>
         {renderLabel()}
-        <div className="input-and-fieldset">
+        <div className="input-and-fieldset" aria-labelledby="labeldiv">
           <input
             {...props}
             {...notInputProps}
             id={label ? generateRandomInputId : undefined}
           />
           {label ? (
-            <fieldset className="fieldset">
+            <fieldset className="fieldset" aria-labelledby="labeldiv">
               <legend>
                 {label}
                 {required ? "*" : ""}

diff --git a/src/components/molecules/CartCard/CartCard.tsx b/src/components/molecules/CartCard/CartCard.tsx
@@ -252,6 +252,7 @@ export const CartCard: React.FC<CartCardProps> = (props) => {
                       role="button"
                       aria-label={t<string>("CartCard.remove")}
                       tabIndex={0}
+                      aria-labelledby="labeldiv"
                     >
                       <IconBin />
                     </span>
@@ -266,21 +267,18 @@ export const CartCard: React.FC<CartCardProps> = (props) => {
       {!mobile && discount && discount.status !== "granted" && (
         <>
           <div className="separator"></div>
-          <div
-            className="discount-toggle"
-            onClick={() => setIsDiscountOpen(!isDiscountOpen)}
-            onKeyUp={() => setIsDiscountOpen(!isDiscountOpen)}
-            role="button"
-            aria-label={t<string>("CartCard.addDiscountButton")}
-            tabIndex={0}
-          >
+          <div className="discount-toggle">
             <Text size={"12"} noMargin id={uniqueId}>
               {t<string>("CartCard.addDiscountButton")}
             </Text>
             <Button
-              as="div"
+              onClick={() => setIsDiscountOpen(!isDiscountOpen)}
+              onKeyUp={() => setIsDiscountOpen(!isDiscountOpen)}
+              title="open discount input"
               mode={"icon"}
               className="open-discount-state-container"
+              aria-labelledby="labeldiv"
+              role="button"
             >
               {isDiscountOpen ? <ArrowOpenIcon /> : <ArrowClosedIcon />}{" "}
             </Button>

diff --git a/src/components/molecules/CourseCard/CourseCard.md b/src/components/molecules/CourseCard/CourseCard.md
@@ -46,10 +46,7 @@ const Icon1 = () => (
               }
               tags={
                 <React.Fragment>
-                  <Badge
-                    onClick={(e) => console.log("onTag click")}
-                    color={"#ff0000"}
-                  >
+                  <Badge onClick={(e) => console.log("onTag click")}>
                     Bestseller
                   </Badge>
                   <Badge color={"#6d6d6d"}>New</Badge>

diff --git a/src/components/molecules/List/List.tsx b/src/components/molecules/List/List.tsx
@@ -2,6 +2,7 @@ import { FC, HTMLAttributes, ReactNode } from "react";
 import styled, { css, withTheme } from "styled-components";
 import { IconText, Text } from "../../..";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
+import chroma from "chroma-js";
 export interface ListItemProps {
   id: number;
   text: string;
@@ -43,7 +44,7 @@ const ListItem = styled.li<{ $isActive?: boolean }>`
   gap: 10px;
   transition: 0.3s;
   background-color: ${({ theme, $isActive }) =>
-    $isActive ? theme.dm__primaryColor : "transparent"};
+    $isActive ? chroma(theme.primaryColor).darken().hex() : "transparent"};
   cursor: pointer;
   &:hover {
     transform: scale(1.05);
@@ -57,20 +58,20 @@ const StyledText = styled(Text)<{ $isActive?: boolean }>`
 `;
 
 const StyledIconText = styled(IconText)<{ $isActive?: boolean }>`
-  & > span {
+  * {
     font-weight: ${({ $isActive }) => ($isActive ? "bold" : "normal")};
     ${basicColorStyle}
-    & > svg {
-      fill: ${({ theme, $isActive }) =>
-        $isActive
-          ? theme.white
-          : getStylesBasedOnTheme(
-              theme.mode,
-              theme.dm__outlineButtonColor,
-              theme.outlineButtonColor,
-              theme.primaryColor
-            )};
-    }
+  }
+  svg {
+    fill: ${({ theme, $isActive }) =>
+      $isActive
+        ? theme.white
+        : getStylesBasedOnTheme(
+            theme.mode,
+            theme.dm__outlineButtonColor,
+            theme.outlineButtonColor,
+            theme.primaryColor
+          )} !important;
   }
 `;
 const List: FC<ListProps> = ({

diff --git a/src/components/molecules/MarkdownRenderer/MarkdownRenderer.tsx b/src/components/molecules/MarkdownRenderer/MarkdownRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useId, useState } from "react";
 import styled, { createGlobalStyle, withTheme } from "styled-components";
 import ReactMarkdown from "react-markdown";
 import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
@@ -236,12 +236,16 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = (props) => {
 export const MarkdownCheckList: React.FC<
   React.InputHTMLAttributes<HTMLInputElement>
 > = ({ checked, disabled, type }) => {
+  const ID = useId();
   return (
     <input
+      id={ID}
       className="text-checkbox"
       type={type}
       disabled={disabled}
       checked={checked}
+      aria-labelledby={ID}
+      placeholder="checkbox"
     />
   );
 };

diff --git a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md
@@ -20,14 +20,14 @@ import img2 from "./VideoPlayerPoster.png";
             >
               Nowość
             </Badge>
-            <div className="video-player-breadcrumbs">
+            {/* <div className="video-player-breadcrumbs">
               <Link href="http://onet.pl" target="_blank">
                 Onet
               </Link>
               <Link href="http://onet.pl" target="_blank">
                 Onet
               </Link>
-            </div>
+            </div> */}
             <Title level={3}>Video Example</Title>
             <div className="video-player-footer">
               <Text size={"12"} noMargin>
@@ -63,14 +63,14 @@ import img2 from "./VideoPlayerPoster.png";
             >
               Nowość
             </Badge>
-            <div className="video-player-breadcrumbs">
+            {/* <div className="video-player-breadcrumbs">
               <Link href="http://onet.pl" target="_blank">
                 Onet
               </Link>
               <Link href="http://onet.pl" target="_blank">
                 Onet
               </Link>
-            </div>
+            </div> */}
             <Title level={3}>Audio Example</Title>
             <div className="video-player-footer">
               <Text size={"12"} noMargin>

diff --git a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.tsx b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.tsx
@@ -898,7 +898,10 @@ export const AudioVideoPlayer: React.FC<AudioVideoPlayerProps> = (props) => {
               playing: !prevState.playing,
             }))
           }
-          role={audioVideoState.playing ? "button" : undefined}
+          title="play/pause"
+          aria-labelledby="labeldiv"
+          tabIndex={0}
+          role="button"
           onKeyDown={() => {
             return true;
           }}