Add role prop to Text and Message

src/components/Message.js

@@ -52,7 +52,15 @@ function Message(props) {
       title: (title) => typeof title === "string" && title.length > 0,
     }
   );
-  const { severity, bg, title, callToAction, children, testId } = mergedProps;
+  const {
+    severity,
+    bg,
+    title,
+    callToAction,
+    role,
+    children,
+    testId,
+  } = mergedProps;
   const theme = useTheme();
   const textAndIconColor = [
     "highlight.pink.t100",
@@ -134,7 +142,7 @@ function Message(props) {
                   }),
                 }}
               >
-                <Text color={textAndIconColor}>
+                <Text color={textAndIconColor} role={role}>
                   {title && (
                     <strong
                       css={{ display: "block", marginBottom: theme.space[1] }}
@@ -173,6 +181,7 @@ Message.propTypes = {
   title: PropTypes.string,
   ...responsivePropType("hasBreakpointWidth", PropTypes.bool),
   ...responsivePaddingType,
+  role: PropTypes.string,
   children: PropTypes.node.isRequired,
   testId: PropTypes.string,
 };

src/components/Message.test.js

@@ -138,6 +138,19 @@ describe("Message", () => {
     });
   });
 
+  it("with role", () => {
+    render(
+      <Message severity="blocking" bg="secondary.pink.t30" role="alert">
+        Please fix the errors above.
+      </Message>
+    );
+
+    expect(screen.getByText("Please fix the errors above.")).toHaveAttribute(
+      "role",
+      "alert"
+    );
+  });
+
   it("with testId", () => {
     const { container } = render(
       <Message severity="info-or-minor" testId="my-message">

src/components/Text.js

@@ -95,7 +95,7 @@ function Text(props) {
     align: (align) => ALIGNS.includes(align),
     wrap: (wrap) => typeof wrap === "boolean",
   });
-  const { id, as, align, wrap, children, testId } = mergedProps;
+  const { id, as, align, wrap, role, children, testId } = mergedProps;
   const css = useResponsivePropsCSS(mergedProps, DEFAULT_PROPS, {
     color: (_, theme, bp) => {
       const color =
@@ -115,7 +115,7 @@ function Text(props) {
   const Component = as;
 
   return (
-    <Component id={id} css={css} data-testid={testId}>
+    <Component id={id} css={css} role={role} data-testid={testId}>
       {children}
     </Component>
   );
@@ -142,6 +142,7 @@ Text.propTypes = {
   },
   align: PropTypes.oneOf(ALIGNS),
   wrap: PropTypes.bool,
+  role: PropTypes.string,
   children: PropTypes.node,
   testId: PropTypes.string,
 };

src/components/Text.test.js

@@ -149,6 +149,14 @@ describe("Text", () => {
     });
   });
 
+  it("with role", () => {
+    render(<Text role="alert">Hello World</Text>);
+
+    const node = screen.getByText("Hello World");
+
+    expect(node).toHaveAttribute("role", "alert");
+  });
+
   it("with testId", () => {
     const { container } = render(<Text testId="my-text">Hello World</Text>);