@mbao01/common 0.0.42 → 0.0.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.43",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -62,6 +62,7 @@
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "test:visual": "test-storybook --url http://127.0.0.1:6006",
+    "test:visual:coverage": "test-storybook --coverage",
     "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
     "test:visual:watch": "test-storybook --watch",
     "test:watch": "vitest"
@@ -109,6 +110,7 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-essentials": "^8.3.4",
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
@@ -133,6 +135,7 @@
     "@vitest/coverage-v8": "^2.1.1",
     "@vitest/ui": "^2.1.1",
     "autoprefixer": "^10.4.20",
+    "axe-playwright": "^2.0.3",
     "date-fns": "^4.1.0",
     "eslint": "^8.57.1",
     "eslint-plugin-react": "^7.37.0",
@@ -160,5 +163,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "eeaf76c4b41380b44e7eaed95b0391727e78010f"
+  "gitHead": "a1d0e5c38ce829a3fcf38487bee6bfffba27e2b8"
 }

package/src/components/Calendar/Calendar.tsx

@@ -52,7 +52,8 @@ export const Calendar = ({
         weekdays: "flex",
         weekday: "rounded-md w-9 font-normal text-[0.8rem]",
         week: "flex w-full mt-2",
-        week_number: "flex items-center text-sm italic",
+        week_number: "flex items-center text-sm italic w-6",
+        week_number_header: "w-6",
         ...classNames,
       }}
       components={{

package/src/components/Description/Description.tsx

@@ -2,11 +2,11 @@ import type { DescriptionDetailProps, DescriptionProps, DescriptionTermProps } f
 import { cn } from "../../utilities";
 
 const Description = (props: DescriptionProps) => {
-  return <dl role="list" {...props} />;
+  return <dl {...props} />;
 };
 
 const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
-  return <dt role="listitem" className={cn("py-2 text-sm font-semibold", className)} {...props} />;
+  return <dt className={cn("py-2 text-sm font-semibold", className)} {...props} />;
 };
 
 const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {

package/src/components/Form/Phone/Phone.tsx

@@ -50,6 +50,7 @@ const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
           <Popover.Trigger asChild>
             <Button
               role="combobox"
+              aria-label="Select country code"
               aria-expanded={open}
               size={size}
               variant={variant}

package/src/components/Form/Slider/Slider.tsx

@@ -12,27 +12,42 @@ import {
 import { type SliderProps } from "./types";
 
 const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-  ({ className, size, variant, wide, disabled, name, ...props }, ref) => (
+  (
+    {
+      className,
+      size,
+      variant,
+      wide,
+      disabled,
+      name,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...props
+    },
+    ref
+  ) => (
     <SliderPrimitive.Root
       ref={ref}
       name={name}
       disabled={disabled}
       className={cn(getSliderRootClasses({ wide, disabled }), className)}
-      data-testid={`${name}-slider-root`}
+      data-testid={name ? `${name}-slider-root` : null}
       {...props}
     >
       <SliderPrimitive.Track
         className={cn(getSliderTrackClasses({ size, variant }))}
-        data-testid={`${name}-slider-track`}
+        data-testid={name ? `${name}-slider-track` : null}
       >
         <SliderPrimitive.Range
           className={cn(getSliderClasses({ variant }))}
-          data-testid={`${name}-slider-range`}
+          data-testid={name ? `${name}-slider-range` : null}
         />
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb
         className={cn(getSliderThumbClasses({ size, variant }))}
-        data-testid={`${name}-slider-thumb`}
+        data-testid={name ? `${name}-slider-thumb` : null}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
       />
     </SliderPrimitive.Root>
   )

package/src/components/Form/TextField/TextField.tsx

@@ -5,7 +5,7 @@ import { type TextFieldProps } from "./types";
 
 export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
   ({ id, name, info, error, label, ...props }: TextFieldProps, ref) => {
-    const feedbackId = `${name}-information`;
+    const feedbackId = name ? `${name}-information` : undefined;
 
     return (
       <FormControl as="label" htmlFor={id}>