fix(frontend): set aria-label for some element

mst-mkt · Sep 12, 2024 · 89f8de1 · 89f8de1
1 parent 5a8e5e8
commit 89f8de1
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 1 deletion.
diff --git a/apps/frontend/src/components/layout/Header.tsx b/apps/frontend/src/components/layout/Header.tsx
@@ -15,6 +15,7 @@ export const Header = () => {
         <button
           type="button"
           onClick={toggleTheme}
+          aria-label="Toggle theme"
           className="w-fit rounded-md p-2 transition-colors hover:bg-background-200 focus:outline-none"
         >
           <IconBrightness size={20} />

diff --git a/apps/frontend/src/routes/_app/upload/.camera-button.tsx b/apps/frontend/src/routes/_app/upload/.camera-button.tsx
@@ -117,6 +117,7 @@ export const CameraButton: FC<CameraButtonProps> = ({
       <button
         type="button"
         onClick={() => setIsCameraOpen(true)}
+        aria-label="Open camera"
         className={twJoin(
           'flex aspect-1 w-20 items-center justify-center rounded-lg border-2 border-background-200 bg-primary text-accent transition-colors',
           'hover:border-background-400 hover:bg-background-50',

diff --git a/apps/frontend/src/routes/_app/upload/.image-picker.tsx b/apps/frontend/src/routes/_app/upload/.image-picker.tsx
@@ -66,6 +66,7 @@ export const ImagePicker: FC<ImagePickerProps> = ({
             <button
               type="button"
               className="absolute top-0 right-0 cursor-pointer rounded-bl-md bg-red-400 p-1 text-white opacity-0 transition-opacity hover:bg-red-600 group-hover:opacity-100"
+              aria-label="Remove image"
               onClick={() => handleFileRemove(i)}
             >
               <IconX size={16} color="#fff" />

diff --git a/apps/frontend/src/routes/index.tsx b/apps/frontend/src/routes/index.tsx
@@ -40,7 +40,8 @@ const Home = () => {
       </div>
       <a
         href={PROJECT_REPOSITORY_URL}
-        className="absolute right-4 bottom-4 w-fit rounded-md p-2 transition-colors hover:bg-background-100"
+        className="absolute right-8 bottom-8 w-fit rounded-md p-2 transition-colors hover:bg-background-100"
+        aria-label="GitHub repository link"
       >
         <IconBrandGithubFilled size={20} className="text-foreground" />
       </a>