chore(UI, accessibility): more items

- radio icon buttons
- links should be parent of icon
styled links to still line up with sibling components

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;