From 66270c25437096128a102265c9ccd23cc7fc47bd Mon Sep 17 00:00:00 2001 From: Przemek Wiktorski Date: Mon, 11 Mar 2024 11:20:35 +0100 Subject: [PATCH] fixed axe problems (#333) Co-authored-by: Przemek --- src/components/atoms/Button/Button.tsx | 3 ++- src/components/atoms/Input/Input.tsx | 4 +-- .../molecules/CartCard/CartCard.tsx | 16 +++++------ .../molecules/CourseCard/CourseCard.md | 5 +--- src/components/molecules/List/List.tsx | 27 ++++++++++--------- .../MarkdownRenderer/MarkdownRenderer.tsx | 6 ++++- .../AudioVideoPlayer/AudioVideoPlayer.md | 8 +++--- .../AudioVideoPlayer/AudioVideoPlayer.tsx | 5 +++- 8 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index e450784b..2a514bb4 100644 --- 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, @@ -369,6 +369,7 @@ export const Button: React.FC> = ({ {...props} className={`wellms-component ${className}`} role="button" + aria-labelledby="labeldiv" > {loading && } {children} diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx index 1b6dc7f1..6e0af379 100644 --- a/src/components/atoms/Input/Input.tsx +++ b/src/components/atoms/Input/Input.tsx @@ -314,14 +314,14 @@ export const Input: React.FC = (props) => { >
{renderLabel()} -
+
{label ? ( -
+
{label} {required ? "*" : ""} diff --git a/src/components/molecules/CartCard/CartCard.tsx b/src/components/molecules/CartCard/CartCard.tsx index f19c05af..14bcc7ac 100644 --- a/src/components/molecules/CartCard/CartCard.tsx +++ b/src/components/molecules/CartCard/CartCard.tsx @@ -252,6 +252,7 @@ export const CartCard: React.FC = (props) => { role="button" aria-label={t("CartCard.remove")} tabIndex={0} + aria-labelledby="labeldiv" > @@ -266,21 +267,18 @@ export const CartCard: React.FC = (props) => { {!mobile && discount && discount.status !== "granted" && ( <>
-
setIsDiscountOpen(!isDiscountOpen)} - onKeyUp={() => setIsDiscountOpen(!isDiscountOpen)} - role="button" - aria-label={t("CartCard.addDiscountButton")} - tabIndex={0} - > +
{t("CartCard.addDiscountButton")} diff --git a/src/components/molecules/CourseCard/CourseCard.md b/src/components/molecules/CourseCard/CourseCard.md index b29a1a3d..625d3e79 100644 --- a/src/components/molecules/CourseCard/CourseCard.md +++ b/src/components/molecules/CourseCard/CourseCard.md @@ -46,10 +46,7 @@ const Icon1 = () => ( } tags={ - console.log("onTag click")} - color={"#ff0000"} - > + console.log("onTag click")}> Bestseller New diff --git a/src/components/molecules/List/List.tsx b/src/components/molecules/List/List.tsx index fe5d20b3..f0f80251 100644 --- 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 = ({ diff --git a/src/components/molecules/MarkdownRenderer/MarkdownRenderer.tsx b/src/components/molecules/MarkdownRenderer/MarkdownRenderer.tsx index 2bebd101..ed959455 100644 --- 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 = (props) => { export const MarkdownCheckList: React.FC< React.InputHTMLAttributes > = ({ checked, disabled, type }) => { + const ID = useId(); return ( ); }; diff --git a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md index 27beb524..55e99867 100644 --- a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md +++ b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md @@ -20,14 +20,14 @@ import img2 from "./VideoPlayerPoster.png"; > Nowość -
+ {/*
Onet Onet -
+
*/} Video Example
@@ -63,14 +63,14 @@ import img2 from "./VideoPlayerPoster.png"; > Nowość -
+ {/*
Onet Onet -
+
*/} Audio Example
diff --git a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.tsx b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.tsx index 56cfaa34..fbefe247 100644 --- a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.tsx +++ b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.tsx @@ -898,7 +898,10 @@ export const AudioVideoPlayer: React.FC = (props) => { playing: !prevState.playing, })) } - role={audioVideoState.playing ? "button" : undefined} + title="play/pause" + aria-labelledby="labeldiv" + tabIndex={0} + role="button" onKeyDown={() => { return true; }}