Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 23:32:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: accessibility fixes

Browse Source
This commit is contained in:
saicaca
2023-10-20 11:36:55 +08:00
parent 1ccf80f9a2
commit a15b88bdbd
14 changed files with 31 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/widget/CategoriesLink.astro
View File

@@ -13,7 +13,7 @@ const {categories} = Astro.props;
---
<div>
{Object.entries(categories).map(([key, value]) =>
<ButtonLink url={getCategoryUrl(key)} badge={value.count}>{value.name}</ButtonLink>
<ButtonLink url={getCategoryUrl(key)} badge={value.count} label=`View all posts in the ${value.name} category`>{value.name}</ButtonLink>
<div class="ml-2">
{Object.keys(value.children).length > 0 && <Astro.self categories={value.children}></Astro.self>}
</div>

15
src/components/widget/DisplaySetting.astro
View File

@@ -2,7 +2,6 @@
import {getConfig} from "../../utils/config-utils";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
const hueSet: number[] = [0, 30, 60, 180, 250, 270, 300, 330, 345];
const enableBanner = getConfig().banner.enable;
@@ -21,20 +20,8 @@ const enableBanner = getConfig().banner.enable;
{0}
</div>
</div>
<div id="preset-list" class="flex flex-row gap-1 mb-4 hidden">
{hueSet.map((hue) => <div
class="h-7 w-8 rounded-md cursor-pointer
bg-[oklch(0.75_0.14_var(--hue))]
hover:bg-[oklch(0.70_0.12_var(--hue))]
active:bg-[oklch(0.65_0.11_var(--hue))]
"
style=`--hue: ${hue}` data-hue={hue}
>
</div>)}
</div>
<div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none">
<input type="range" min="0" max="360" value="0" class="slider" id="colorSlider" step="5" style="width: 100%;">
<input aria-label="Theme Color" type="range" min="0" max="360" value="0" class="slider" id="colorSlider" step="5" style="width: 100%;">
</div>
</div>

6
src/components/widget/Profile.astro
View File

@@ -12,20 +12,20 @@ const vConf = getConfig();
---
<div class="card-base">
<a href="/about" class="group block relative m-3 overflow-hidden rounded-xl active:scale-95">
<a aria-label="Go to About Page" href="/about" class="group block relative m-3 overflow-hidden rounded-xl active:scale-95">
<div class="absolute transition group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center">
<Icon name="material-symbols:person-outline-rounded"
class="transition opacity-0 group-hover:opacity-100 text-white text-6xl">
</Icon>
</div>
<ImageBox src={vConf.profile.avatar} class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
<ImageBox src={vConf.profile.avatar} alt="Profile Image of the Author" class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
</a>
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
<div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
<div class="flex gap-2 mx-2 justify-center mb-4">
{vConf.profile.links.map(item =>
<a href={item.url} target="_blank">
<a aria-label={item.name} href={item.url} target="_blank">
<Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
</a>
)}

2
src/components/widget/Tags.astro
View File

@@ -16,7 +16,7 @@ const isCollapsed = tags.length >= 20;
<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
<div class="flex gap-2 flex-wrap">
{tags.map(t => (
<ButtonTag href={`/archive/tag/${t.name}`}>
<ButtonTag href={`/archive/tag/${t.name}`} label={`View all posts with the ${t.name} tag`}>
{t.name}
</ButtonTag>
))}