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,6 +61,11 @@ const SiteHeader = () => {
 
         <LanguagePicker />
 
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI/issues"
+          marginBottom="-0.25rem"
+        >
           <IAIIconButton
             aria-label={t('common.reportBugLabel')}
             tooltip={t('common.reportBugLabel')}
@@ -68,13 +73,15 @@ const SiteHeader = () => {
             data-variant="link"
             fontSize={20}
             size="sm"
-          icon={
+            icon={<FaBug />}
-            <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
-              <FaBug />
-            </Link>
-          }
           />
+        </Link>
 
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI"
+          marginBottom="-0.25rem"
+        >
           <IAIIconButton
             aria-label={t('common.githubLabel')}
             tooltip={t('common.githubLabel')}
@@ -82,13 +89,15 @@ const SiteHeader = () => {
             data-variant="link"
             fontSize={20}
             size="sm"
-          icon={
+            icon={<FaGithub />}
-            <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
-              <FaGithub />
-            </Link>
-          }
           />
+        </Link>
 
+        <Link
+          isExternal
+          href="https://discord.gg/ZmtBAhwWhy"
+          marginBottom="-0.25rem"
+        >
           <IAIIconButton
             aria-label={t('common.discordLabel')}
             tooltip={t('common.discordLabel')}
@@ -96,12 +105,9 @@ const SiteHeader = () => {
             data-variant="link"
             fontSize={20}
             size="sm"
-          icon={
+            icon={<FaDiscord />}
-            <Link isExternal href="https://discord.gg/ZmtBAhwWhy">
-              <FaDiscord />
-            </Link>
-          }
           />
+        </Link>
 
         <SettingsModal>
           <IAIIconButton
@@ -119,4 +125,5 @@ const SiteHeader = () => {
   );
 };
 
+SiteHeader.displayName = 'SiteHeader';
 export default SiteHeader;