chore(UI, accessibility): Icons. Header links & radio button (#2935)

# Overview
- Links should be parent of icon
- _Added style to link still so they still line up with sibling
components_
- Radio icon buttons

invokeai/frontend/web/dist/assets/ThemeLocaleProvider-a1ea5622.js

@@ -1,4 +1,4 @@
-import{j as y,cN as Ie,r as _,cO as bt,q as Lr,cP as o,cQ as b,cR as v,cS as S,cT as Vr,cU as ut,cV as vt,cM as ft,cW as mt,n as gt,cX as ht,E as pt}from"./index-e1f916bd.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-548a355c.js";var Or=`
+import{j as y,cN as Ie,r as _,cO as bt,q as Lr,cP as o,cQ as b,cR as v,cS as S,cT as Vr,cU as ut,cV as vt,cM as ft,cW as mt,n as gt,cX as ht,E as pt}from"./index-2ad84bef.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-e63a2dc4.js";var Or=`
   :root {
     --chakra-vh: 100vh;
   }

invokeai/frontend/web/dist/index.html

@@ -12,7 +12,7 @@
         margin: 0;
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-e1f916bd.js"></script>
+    <script type="module" crossorigin src="./assets/index-2ad84bef.js"></script>
     <link rel="stylesheet" href="./assets/index-5483945c.css">
   </head>
 

invokeai/frontend/web/src/common/components/IAIIconButton.tsx

@@ -8,13 +8,14 @@ import {
 import { memo } from 'react';
 
 export type IAIIconButtonProps = IconButtonProps & {
+  role?: string;
   tooltip?: string;
   tooltipProps?: Omit<TooltipProps, 'children'>;
   isChecked?: boolean;
 };
 
 const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
-  const { tooltip = '', tooltipProps, isChecked, ...rest } = props;
+  const { role, tooltip = '', tooltipProps, isChecked, ...rest } = props;
 
   return (
     <Tooltip
@@ -27,6 +28,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
     >
       <IconButton
         ref={forwardedRef}
+        role={role}
         aria-checked={isChecked !== undefined ? isChecked : undefined}
         {...rest}
       />
@@ -34,4 +36,5 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
   );
 });
 
+IAIIconButton.displayName = 'IAIIconButton';
 export default memo(IAIIconButton);

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -101,12 +101,14 @@ const ImageGalleryContent = () => {
                 aria-label={t('gallery.showGenerations')}
                 tooltip={t('gallery.showGenerations')}
                 isChecked={currentCategory === 'result'}
+                role="radio"
                 icon={<FaImage />}
                 onClick={() => dispatch(setCurrentCategory('result'))}
               />
               <IAIIconButton
                 aria-label={t('gallery.showUploads')}
                 tooltip={t('gallery.showUploads')}
+                role="radio"
                 isChecked={currentCategory === 'user'}
                 icon={<FaUser />}
                 onClick={() => dispatch(setCurrentCategory('user'))}
@@ -251,4 +253,5 @@ const ImageGalleryContent = () => {
   );
 };
 
+ImageGalleryContent.displayName = 'ImageGalleryContent';
 export default ImageGalleryContent;

invokeai/frontend/web/src/features/system/components/SiteHeader.tsx

@@ -61,47 +61,53 @@ const SiteHeader = () => {
 
         <LanguagePicker />
 
-        <IAIIconButton
+        <Link
-          aria-label={t('common.reportBugLabel')}
+          isExternal
-          tooltip={t('common.reportBugLabel')}
+          href="http://github.com/invoke-ai/InvokeAI/issues"
-          variant="link"
+          marginBottom="-0.25rem"
-          data-variant="link"
+        >
-          fontSize={20}
+          <IAIIconButton
-          size="sm"
+            aria-label={t('common.reportBugLabel')}
-          icon={
+            tooltip={t('common.reportBugLabel')}
-            <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
+            variant="link"
-              <FaBug />
+            data-variant="link"
-            </Link>
+            fontSize={20}
-          }
+            size="sm"
-        />
+            icon={<FaBug />}
+          />
+        </Link>
 
-        <IAIIconButton
+        <Link
-          aria-label={t('common.githubLabel')}
+          isExternal
-          tooltip={t('common.githubLabel')}
+          href="http://github.com/invoke-ai/InvokeAI"
-          variant="link"
+          marginBottom="-0.25rem"
-          data-variant="link"
+        >
-          fontSize={20}
+          <IAIIconButton
-          size="sm"
+            aria-label={t('common.githubLabel')}
-          icon={
+            tooltip={t('common.githubLabel')}
-            <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
+            variant="link"
-              <FaGithub />
+            data-variant="link"
-            </Link>
+            fontSize={20}
-          }
+            size="sm"
-        />
+            icon={<FaGithub />}
+          />
+        </Link>
 
-        <IAIIconButton
+        <Link
-          aria-label={t('common.discordLabel')}
+          isExternal
-          tooltip={t('common.discordLabel')}
+          href="https://discord.gg/ZmtBAhwWhy"
-          variant="link"
+          marginBottom="-0.25rem"
-          data-variant="link"
+        >
-          fontSize={20}
+          <IAIIconButton
-          size="sm"
+            aria-label={t('common.discordLabel')}
-          icon={
+            tooltip={t('common.discordLabel')}
-            <Link isExternal href="https://discord.gg/ZmtBAhwWhy">
+            variant="link"
-              <FaDiscord />
+            data-variant="link"
-            </Link>
+            fontSize={20}
-          }
+            size="sm"
-        />
+            icon={<FaDiscord />}
+          />
+        </Link>
 
         <SettingsModal>
           <IAIIconButton
@@ -119,4 +125,5 @@ const SiteHeader = () => {
   );
 };
 
+SiteHeader.displayName = 'SiteHeader';
 export default SiteHeader;