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