Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(UI, accessibility): more items

Browse Source 
- radio icon buttons
- links should be parent of icon
styled links to still line up with sibling components
This commit is contained in:
ElrikUnderlake 2023-03-12 15:50:14 -05:00
parent 60614badaf
commit e3aef20f42
No known key found for this signature in database
GPG Key ID: E9A5CF18AF6E2C67
3 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/common/components/IAIIconButton.tsx
View File

@ -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);

3
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -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;

85
invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
View File

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