Merge branch 'daniel-schwartz-k:main' into main

danielschwartz85 · Jul 27, 2023 · c9bddce · c9bddce
2 parents 123cba2 + 7c76574
commit c9bddce
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
     </>
   )