Merge branch 'main' of github.com:hydralauncher/hydra into fix/video-controller-not-clickable-on-game-details

src/renderer/src/components/bottom-panel/bottom-panel.tsx

@@ -64,7 +64,7 @@ export function BottomPanel() {
         <small>{status}</small>
       </button>
 
-      <small tabIndex={0}>
+      <small>
         v{version} &quot;{VERSION_CODENAME}&quot;
       </small>
     </footer>

src/renderer/src/components/checkbox-field/checkbox-field.tsx

@@ -24,7 +24,7 @@ export function CheckboxField({ label, ...props }: CheckboxFieldProps) {
         />
         {props.checked && <CheckIcon />}
       </div>
-      <label htmlFor={id} className={styles.checkboxLabel} tabIndex={0}>
+      <label htmlFor={id} className={styles.checkboxLabel}>
         {label}
       </label>
     </div>

src/renderer/src/components/modal/modal.tsx

@@ -92,7 +92,9 @@ export function Modal({
     <Backdrop isClosing={isClosing}>
       <div
         className={styles.modal({ closing: isClosing })}
-        role="modal"
+        role="dialog"
+        aria-labelledby={title}
+        aria-describedby={description}
         ref={modalContentRef}
       >
         <div className={styles.modalHeader}>

src/renderer/src/components/text-field/text-field.tsx

@@ -33,7 +33,7 @@ export function TextField({
 
   return (
     <div className={styles.textFieldContainer} {...containerProps}>
-      {label && <label tabIndex={0}>{label}</label>}
+      {label && <label htmlFor={id}>{label}</label>}
 
       <div
         className={styles.textField({ focused: isFocused, theme })}
@@ -49,7 +49,7 @@ export function TextField({
         />
       </div>
 
-      {hint && <small tabIndex={0}>{hint}</small>}
+      {hint && <small>{hint}</small>}
     </div>
   );
 }

src/renderer/src/pages/game-details/game-details.tsx

@@ -231,6 +231,7 @@ export function GameDetails() {
                 <img
                   src={steamUrlBuilder.logo(objectID!)}
                   style={{ width: 300, alignSelf: "flex-end" }}
+                  alt={game?.title}
                 />
               </div>
             </div>