aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorShin'ya Ueoka <ueokande@i-beam.org>2020-08-16 22:21:50 +0900
committerShin'ya Ueoka <ueokande@i-beam.org>2020-09-21 12:48:18 +0900
commite4a9c831381a9c90ca0d44844d103b9c83a56c8d (patch)
treec03f40340e9afa43f841772a799549bb4642f3e9
parentd53f010cc92f1fcb9580ca770766790e783e28a5 (diff)
Improve a11y on Message component
-rw-r--r--src/console/components/console/Message.tsx4
-rw-r--r--test/console/components/console/Message.test.tsx27
2 files changed, 29 insertions, 2 deletions
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!"]);
+ });
+});