xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf(a11y): add focus outline to SiteHeader buttons and links (#449)

This commit is contained in:
Doma 2023-05-02 08:38:02 +08:00 committed by GitHub
parent 1933ebc936
commit 98913426b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/site/SiteHeader.tsx
View File

@ -44,12 +44,9 @@ const HeaderLink: React.FC<{ link: HeaderLinkType }> = ({ link }) => {
<UniLink
href={link.url}
onClick={link.onClick}
className={cn(
`xlog-site-navigation-item h-10 flex items-center space-x-1 transition-colors relative after:content-[''] hover:after:w-full hover:after:left-0 after:transition-[width,left] after:h-[2px] after:block after:absolute after:bottom-0`,
active
? `text-accent after:w-full after:left-0 after:bg-accent`
: `hover:text-gray-700 after:w-0 after:left-1/2 after:bg-gray-700`,
)}
className={cn("xlog-site-navigation-item", {
"xlog-site-navigation-item-active": active,
})}
>
{link.icon && <span>{link.icon}</span>}
<span className="whitespace-nowrap">{t(link.label)}</span>
@ -342,7 +339,7 @@ export const SiteHeader: React.FC<{
</div>
</div>
<div className="text-gray-500 flex items-center justify-between w-full mt-auto">
<div className="xlog-site-navigation flex items-center space-x-5 min-w-0 overflow-x-auto text-sm sm:text-base">
<div className="xlog-site-navigation flex items-center gap-1 mx-[-.5rem] min-w-0 text-sm sm:text-base">
{leftLinks.map((link, i) => {
return <HeaderLink link={link} key={`${link.label}${i}`} />
})}

26
src/css/tailwind.css
View File

@ -15,6 +15,12 @@
}
}
@layer utilities {
.focus-ring {
@apply focus-visible:outline focus-visible:outline-accent;
}
}
*,
*:after,
*:before {
@ -91,6 +97,7 @@ a {
@apply font-medium;
@apply transition;
@apply active:scale-95;
@apply focus-ring focus-within:ring-offset-1;
}
.button.is-auto-width {
@ -398,3 +405,22 @@ textarea.input {
font: unset;
line-height: unset;
}
.xlog-site-navigation-item {
@apply h-10 px-2 flex items-center space-x-1 transition-colors focus-ring;
@apply hover:text-gray-700;
/* The underline */
@apply relative;
@apply after:absolute after:block after:content-[''] after:h-[2px] after:transition-[left,right] after:bottom-0 after:left-1/2 after:right-1/2 after:bg-gray-700;
@apply hover:after:left-2 hover:after:right-2;
}
/* TODO-Doma */
/* Maybe use CSS nested syntax */
.xlog-site-navigation-item-active {
@apply text-accent hover:text-accent;
/* The underline */
@apply after:left-2 after:right-2 after:bg-accent;
}