Fix accessiblity for value displays

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",

src/value-boolean/value-boolean.test.tsx

@@ -2,6 +2,7 @@ import { ValueBoolean } from "./value-boolean";
 import { render, screen } from "../tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { within } from "@testing-library/react";
 
 describe("ValueBoolean", () => {
   const renderComponent = ({
@@ -128,5 +129,13 @@ describe("ValueBoolean", () => {
 
       expect(screen.getByRole("checkbox")).toBeChecked();
     });
+
+    it("should have the edit button accessible by label", () => {
+      renderComponent({ editable: true });
+
+      expect(
+        within(screen.getByLabelText(/hello world/i)).getByRole("button", { name: /edit/i }),
+      ).toBeVisible();
+    });
   });
 });

src/value-datetime/value-datetime.test.tsx

@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { pickDatetime } from "../tests/actions";
 import { assertDatetimeInputValue } from "../tests/assertions";
 import { vi } from "vitest";
+import { within } from "@testing-library/react";
 
 const DummyValue = new Date(2022, 7, 10, 0, 0);
 const NewValue = new Date(2021, 8, 9, 11, 21);
@@ -136,5 +137,13 @@ describe("ValueDatetime", () => {
         fmt: datetimeFormat,
       });
     });
+
+    it("should have the edit button accessible by label", () => {
+      renderComponent({ editable: true });
+
+      expect(
+        within(screen.getByLabelText(/hello world/i)).getByRole("button", { name: /edit/i }),
+      ).toBeVisible();
+    });
   });
 });

src/value-datetime/value-datetime.tsx

@@ -86,8 +86,8 @@ export const ValueDatetime = ({
           }}
         />
       ) : (
-        <Box display="flex" alignItems="center">
-          <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
+        <Box display="flex" alignItems="center" aria-labelledby={id}>
+          <Typography variant={dense ? "body1" : "h5"} noWrap>
             {value}
           </Typography>
           {editable && <ValueEditButton dense={dense} onClick={startEdit} />}

src/value-rating/value-rating.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from "../tests/testing-library";
 import { ValueRating } from "./value-rating";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { within } from "@testing-library/react";
 
 describe("ValueRating", () => {
   const renderComponent = ({
@@ -100,5 +101,13 @@ describe("ValueRating", () => {
 
       expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
     });
+
+    it("should have the edit button accessible by label", () => {
+      renderComponent({ editable: true });
+
+      expect(
+        within(screen.getByLabelText(/hello world/i)).getByRole("button", { name: /edit/i }),
+      ).toBeVisible();
+    });
   });
 });

src/value-rating/value-rating.tsx

@@ -25,9 +25,8 @@ export const ValueRating = ({
 
   return (
     <ValueContent label={label} tooltip={value.toString()} dense={dense}>
-      <Box display="flex" alignItems="center">
+      <Box display="flex" alignItems="center" aria-labelledby={id}>
         <Rating
-          aria-labelledby={id}
           readOnly={!isEditing}
           max={maxRating}
           size={dense ? "small" : "medium"}

src/value-text/value-text.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from "../tests/testing-library";
 import { ValueText } from "./value-text";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { within } from "@testing-library/react";
 
 const DummyValue = "Lorem ipsum sit amet";
 
@@ -124,5 +125,13 @@ describe("ValueText", () => {
       expect(onEdit).toHaveBeenCalledTimes(1);
       expect(onEdit).toHaveBeenCalledWith("new value");
     });
+
+    it("should have the edit button accessible by label", () => {
+      renderComponent({ editable: true });
+
+      expect(
+        within(screen.getByLabelText(/hello world/i)).getByRole("button", { name: /edit/i }),
+      ).toBeVisible();
+    });
   });
 });

src/value-text/value-text.tsx

@@ -59,8 +59,8 @@ export const ValueText = ({
           sx={{ marginY: !dense ? 1 : 0 }}
         />
       ) : (
-        <Box display="flex">
-          <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
+        <Box display="flex" aria-labelledby={id}>
+          <Typography variant={dense ? "body1" : "h5"} noWrap>
             {value}
           </Typography>
           {editable && <ValueEditButton dense={dense} onClick={startEdit} />}