From e4a9c831381a9c90ca0d44844d103b9c83a56c8d Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 16 Aug 2020 22:21:50 +0900
Subject: Improve a11y on Message component

---
 src/console/components/console/Message.tsx       |  4 ++--
 test/console/components/console/Message.test.tsx | 27 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 test/console/components/console/Message.test.tsx

diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index e039020..73498fd 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -23,9 +23,9 @@ interface Props {
 const Message: React.FC<Props> = ({ mode, children }) => {
   switch (mode) {
     case "error":
-      return <Error>{children}</Error>;
+      return <Error role="alert">{children}</Error>;
     case "info":
-      return <Info>{children}</Info>;
+      return <Info role="status">{children}</Info>;
   }
   return null;
 };
diff --git a/test/console/components/console/Message.test.tsx b/test/console/components/console/Message.test.tsx
new file mode 100644
index 0000000..f8f950a
--- /dev/null
+++ b/test/console/components/console/Message.test.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import ReactTestRenderer from "react-test-renderer";
+import { expect } from "chai";
+import Message from "../../../../src/console/components/console/Message";
+
+describe("console/components/console/completion/Message", () => {
+  it("renders an information message", () => {
+    const root = ReactTestRenderer.create(<Message mode="info">Hello!</Message>)
+      .root;
+
+    const p = root.findByType("p");
+
+    expect(p.props["role"]).to.equal("status");
+    expect(p.children).to.deep.equal(["Hello!"]);
+  });
+
+  it("renders an error message", () => {
+    const root = ReactTestRenderer.create(
+      <Message mode="error">Hello!</Message>
+    ).root;
+
+    const p = root.findByType("p");
+
+    expect(p.props["role"]).to.equal("alert");
+    expect(p.children).to.deep.equal(["Hello!"]);
+  });
+});
-- 
cgit v1.2.3