trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 06:34:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add aria-label to buttons and links

Browse source
This commit is contained in:
trafficlunar 2025-07-18 22:40:24 +01:00
parent 029c7eb84a
commit a37759622a
33 changed files with 113 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/tutorial/scan.tsx
View file

@ -36,7 +36,7 @@ export default function ScanTutorialButton() {
return (
<>
<button type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
<button aria-label="Tutorial" type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
<Icon icon="fa:question-circle" />
<span>Tutorial</span>
</button>
@ -58,7 +58,7 @@ export default function ScanTutorialButton() {
>
<div className="flex justify-between items-center mb-2 p-6 pb-0">
<h2 className="text-xl font-bold">Tutorial</h2>
<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" />
</button>
</div>
@ -76,13 +76,21 @@ export default function ScanTutorialButton() {
</div>
<div className="flex justify-between items-center mt-2 px-6 pb-6">
<button onClick={() => emblaApi?.scrollPrev()} className="pill button !p-1 aspect-square text-2xl">
<button
onClick={() => emblaApi?.scrollPrev()}
aria-label="Scroll Carousel Left"
className="pill button !p-1 aspect-square text-2xl"
>
<Icon icon="tabler:chevron-left" />
</button>
<span className="text-sm">Adding Mii to Island</span>
<button onClick={() => emblaApi?.scrollNext()} className="pill button !p-1 aspect-square text-2xl">
<button
onClick={() => emblaApi?.scrollNext()}
aria-label="Scroll Carousel Right"
className="pill button !p-1 aspect-square text-2xl"
>
<Icon icon="tabler:chevron-right" />
</button>
</div>

2
src/components/tutorial/starting-page.tsx
View file

@ -25,6 +25,7 @@ export default function StartingPage({ emblaApi }: Props) {
<div className="grid grid-cols-2 gap-4 h-full">
<button
onClick={() => goToTutorial(1)}
aria-label="Allow Copying Tutorial"
className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
>
<Image
@ -40,6 +41,7 @@ export default function StartingPage({ emblaApi }: Props) {
<button
onClick={() => goToTutorial(10)}
aria-label="Create QR Code Tutorial"
className="flex flex-col justify-center items-center bg-zinc-50 rounded-xl p-4 shadow-md border-2 border-zinc-300 cursor-pointer text-center text-sm transition hover:scale-[1.03] hover:bg-cyan-100 hover:border-cyan-600"
>
<Image

4
src/components/tutorial/submit.tsx
View file

@ -61,7 +61,7 @@ export default function SubmitTutorialButton() {
>
<div className="flex justify-between items-center mb-2 p-6 pb-0">
<h2 className="text-xl font-bold">Tutorial</h2>
<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
<Icon icon="material-symbols:close-rounded" />
</button>
</div>
@ -105,6 +105,7 @@ export default function SubmitTutorialButton() {
onClick={() => emblaApi?.scrollPrev()}
disabled={isStartingPage}
className={`pill button !p-1 aspect-square text-2xl ${isStartingPage && "!cursor-auto"}`}
aria-label="Scroll Carousel Left"
>
<Icon icon="tabler:chevron-left" />
</button>
@ -115,6 +116,7 @@ export default function SubmitTutorialButton() {
onClick={() => emblaApi?.scrollNext()}
disabled={isStartingPage}
className={`pill button !p-1 aspect-square text-2xl ${isStartingPage && "!cursor-auto"}`}
aria-label="Scroll Carousel Right"
>
<Icon icon="tabler:chevron-right" />
</button>