From 7c765742f7b1b815e51694aee2297250616cd2c7 Mon Sep 17 00:00:00 2001
From: daniel-schwartz-k <daniel.schwartz@kaltura.com>
Date: Thu, 27 Jul 2023 13:08:44 +0300
Subject: [PATCH] accessibility fixes - using inputProps for direct textArea
 aria-lable for now

---
 src/components/common/textFieldCopy.tsx | 8 ++++++--
 src/components/decoded/decoded.tsx      | 2 ++
 src/components/encoded/encoded.tsx      | 9 ++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/common/textFieldCopy.tsx b/src/components/common/textFieldCopy.tsx
index b2be5ea..39c2096 100644
--- a/src/components/common/textFieldCopy.tsx
+++ b/src/components/common/textFieldCopy.tsx
@@ -4,10 +4,11 @@ import { useState } from 'react'
 
 export type ITextFieldCopyProps = Omit<TextFieldProps, 'onChange'> & {
   onChange: (value: string) => void
+  ariaLabel?: string
 }
 
 export default function TextFieldCopy(props: ITextFieldCopyProps) {
-  const { value, error, onChange, ...rest } = props
+  const { value, error, onChange, ariaLabel, ...rest } = props
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -25,7 +26,10 @@ export default function TextFieldCopy(props: ITextFieldCopyProps) {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       sx={{ '& textarea.MuiInputBase-inputMultiline': { mr: 5 } }}
-      InputProps={{ endAdornment: <CopyButton value={value} visible={!error && isHovered} /> }}
+      inputProps={ariaLabel ? { 'aria-label': ariaLabel } : undefined}
+      InputProps={{
+        endAdornment: <CopyButton value={value} visible={!error && isHovered} />,
+      }}
     />
   )
 }
diff --git a/src/components/decoded/decoded.tsx b/src/components/decoded/decoded.tsx
index 73cf3ce..edbafb4 100644
--- a/src/components/decoded/decoded.tsx
+++ b/src/components/decoded/decoded.tsx
@@ -42,6 +42,7 @@ export default function JwtInput(props: IDecodedProps) {
       <StyledCard>
         <Stack spacing={1}>
           <TextFieldCopy
+            ariaLabel="decoded header input"
             id="header"
             minRows={4}
             maxRows={8}
@@ -51,6 +52,7 @@ export default function JwtInput(props: IDecodedProps) {
             onBlur={onBlur}
           />
           <TextFieldCopy
+            ariaLabel="decoded payload input"
             id="payload"
             minRows={8}
             maxRows={12}
diff --git a/src/components/encoded/encoded.tsx b/src/components/encoded/encoded.tsx
index f4d0df8..7e1d646 100644
--- a/src/components/encoded/encoded.tsx
+++ b/src/components/encoded/encoded.tsx
@@ -18,7 +18,14 @@ export default function Encoded(props: IEncodedProps) {
     <>
       <StyledHeader variant="h4">{'Encoded'}</StyledHeader>
       <StyledCard>
-        <TextFieldCopy value={value} placeholder="Paste JWT.." rows={10} error={error} onChange={onChange} />
+        <TextFieldCopy
+          value={value}
+          placeholder="Paste JWT.."
+          rows={10}
+          error={error}
+          onChange={onChange}
+          ariaLabel="encoded input"
+        />
       </StyledCard>
     </>
   )