From e135f02d7c5beba398dd136a05c91410b24529e3 Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Tue, 10 Apr 2018 14:31:35 +0100
Subject: [PATCH] fix: make ValidatedField more accessible
---
app/components/ui/atoms/ValidatedField.js | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/app/components/ui/atoms/ValidatedField.js b/app/components/ui/atoms/ValidatedField.js
index c19dc4f..26516ae 100644
--- a/app/components/ui/atoms/ValidatedField.js
+++ b/app/components/ui/atoms/ValidatedField.js
@@ -4,9 +4,12 @@ import { Field } from 'formik'
import { get } from 'lodash'
import { TextField, th } from '@pubsweet/ui'
-const ErrorMessage = styled.div`
+const MessageWrapper = styled.div`
display: block;
margin-top: calc(${th('gridUnit')} * -1);
+`
+
+const ErrorMessage = styled.div`
color: ${th('colorError')};
`
@@ -26,7 +29,11 @@ export default ({ name, component: FieldComponent = TextField, ...props }) => {
{...field}
{...props}
/>
- {touched && errors && <ErrorMessage>{errors}</ErrorMessage>}
+
+ {/* live region DOM node must be initially present for changes to be announced */}
+ <MessageWrapper role="alert">
+ {touched && errors && <ErrorMessage>{errors}</ErrorMessage>}
+ </MessageWrapper>
</div>
)
}
--
GitLab