#58 - add screenreader support for count value changes

jnahumphreys · Jan 25, 2024 · cc27bca · cc27bca
1 parent e2caf45
commit cc27bca
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/src/app/counter-output.tsx b/src/app/counter-output.tsx
@@ -1,43 +1,45 @@
+import React from "react";
 import styled from "@emotion/styled";
 import { useCounterState } from "./counter-provider";
 
 const Container = styled.div({
   margin: "0 0 1rem 0",
 
-  "& > span": {
-    display: "block",
-    width: "100%",
-    maxWidth: "100%",
-    textAlign: "center",
-    fontSize: "6.25rem",
-    color: "#313131",
-    textOverflow: "ellipsis",
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-
-    "@media (prefers-color-scheme: dark)": {
-      color: "#b9b9b9",
-    },
-
-    "@media screen and (min-width: 48rem)": {
-      fontSize: "8rem",
-    },
+  display: "block",
+  width: "100%",
+  maxWidth: "100%",
+  textAlign: "center",
+  fontSize: "6.25rem",
+  color: "#313131",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+
+  "@media (prefers-color-scheme: dark)": {
+    color: "#b9b9b9",
+  },
+
+  "@media screen and (min-width: 48rem)": {
+    fontSize: "8rem",
   },
 });
 
 function CountValue() {
   const count = useCounterState();
 
-  return (
-    <span aria-label="Count value" data-cy="count">
-      {count.toString()}
-    </span>
-  );
+  return <React.Fragment>{count.toString()}</React.Fragment>;
 }
 
+export const COUNTER_VALUE_CONTAINER_ID = "counter-value";
+
 export const CounterOutput = () => {
   return (
-    <Container>
+    <Container
+      role="status"
+      data-cy="count"
+      aria-label="Counter value"
+      id={COUNTER_VALUE_CONTAINER_ID}
+    >
       <CountValue />
     </Container>
   );