[button][material-ui] Fix 'File upload' demo a11y (#40943)

mui · Feb 11, 2024 · e3b6520 · e3b6520
1 parent af72a04
commit e3b6520
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js
@@ -17,7 +17,13 @@ const VisuallyHiddenInput = styled('input')({
 
 export default function InputFileUpload() {
   return (
-    <Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
+    <Button
+      component="label"
+      role={undefined}
+      variant="contained"
+      tabIndex={-1}
+      startIcon={<CloudUploadIcon />}
+    >
       Upload file
       <VisuallyHiddenInput type="file" />
     </Button>

diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/InputFileUpload.tsx
@@ -17,7 +17,13 @@ const VisuallyHiddenInput = styled('input')({
 
 export default function InputFileUpload() {
   return (
-    <Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
+    <Button
+      component="label"
+      role={undefined}
+      variant="contained"
+      tabIndex={-1}
+      startIcon={<CloudUploadIcon />}
+    >
       Upload file
       <VisuallyHiddenInput type="file" />
     </Button>

diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview
@@ -1,4 +1,10 @@
-<Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
+<Button
+  component="label"
+  role={undefined}
+  variant="contained"
+  tabIndex={-1}
+  startIcon={<CloudUploadIcon />}
+>
   Upload file
   <VisuallyHiddenInput type="file" />
 </Button>