fix(file-uploade): add error aria state (uber#2937)

refrigeratorstory · Feb 28, 2020 · 940b394 · 940b394
1 parent 9ca755d
commit 940b394
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/documentation-site/components/yard/config/file-uploader.ts b/documentation-site/components/yard/config/file-uploader.ts
@@ -86,6 +86,12 @@ const FileUploaderConfig: TConfig = {
       description: 'Name attribute.',
       hidden: true,
     },
+    ['aria-describedby']: {
+      value: undefined,
+      type: PropTypes.String,
+      description: `Sets aria-describedby attribute.`,
+      hidden: true,
+    },
     overrides: {
       value: undefined,
       type: PropTypes.Custom,

diff --git a/src/file-uploader/file-uploader.js b/src/file-uploader/file-uploader.js
@@ -182,6 +182,9 @@ function FileUploader(props: PropsT) {
                           onClick={() => {
                             props.onRetry && props.onRetry();
                           }}
+                          aria-invalid={Boolean(props.errorMessage)}
+                          aria-describedby={props['aria-describedby']}
+                          aria-errormessage={props.errorMessage}
                           overrides={{
                             BaseButton: {
                               style: {outline: null, fontWeight: 'normal'},
@@ -196,6 +199,7 @@ function FileUploader(props: PropsT) {
                           onClick={() => {
                             props.onCancel && props.onCancel();
                           }}
+                          aria-describedby={props['aria-describedby']}
                           overrides={{
                             BaseButton: {
                               style: {outline: null, fontWeight: 'normal'},
@@ -210,6 +214,9 @@ function FileUploader(props: PropsT) {
                 </FileDragAndDrop>
 
                 <HiddenInput
+                  aria-invalid={Boolean(props.errorMessage) || null}
+                  aria-describedby={props['aria-describedby']}
+                  aria-errormessage={props.errorMessage || null}
                   {...getInputProps()}
                   {...prefixedStyledProps}
                   {...hiddenInputProps}

diff --git a/src/file-uploader/types.js b/src/file-uploader/types.js
@@ -52,6 +52,7 @@ export type PropsT = {|
   onDropRejected?: DropFileEventHandlerT,
   onFileDialogCancel?: () => mixed,
   preventDropOnDocument?: boolean,
+  'aria-describedby'?: string,
 
   // Error message to be displayed
   errorMessage?: string,