Merge pull request #11739 from bbc/WSTEAM1-1094-focus-styling-file-up…

…loader WSTEAM1-1094: Adds focus styling for file upload and remove buttons
bbc · Jul 2, 2024 · 64f64fa · 64f64fa
2 parents 5d661cc + 624d94b
commit 64f64fa
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/File/FileList/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/File/FileList/index.tsx
@@ -114,6 +114,7 @@ export default ({ files, name, hasAttemptedSubmit }: FileListProps) => {
             {file.name}
           </span>
           <button
+            css={styles.focusIndicator}
             type="button"
             aria-describedby={ariaDescribedById}
             onClick={() =>

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/File/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/File/index.tsx
@@ -76,7 +76,7 @@ export default ({
       />
       <button
         aria-describedby={labelId}
-        css={styles.fileUploadButton}
+        css={[styles.fileUploadButton, styles.focusIndicator]}
         type="button"
         onClick={() => handleUploadClick()}
       >

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/File/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/FormField/File/styles.ts
@@ -1,5 +1,6 @@
 import pixelsToRem from '#app/utilities/pixelsToRem';
 import { Theme, css } from '@emotion/react';
+import formFieldStyles from '../styles';
 
 export default {
   fileInput: () =>
@@ -106,4 +107,5 @@ export default {
       width: `${spacings.QUADRUPLE}rem`,
       height: `${spacings.QUADRUPLE}rem`,
     }),
+  focusIndicator: formFieldStyles.focusIndicator,
 };