Skip to content

Commit 667752c

Browse files
JamesN-devJamesN-dev
authored
docs: add aria-label and title attributes to btn-icon elements (#3595)
1 parent a285e06 commit 667752c

File tree

9 files changed

+31
-20
lines changed

9 files changed

+31
-20
lines changed

‎playgrounds/skeleton-core/src/pages/components/buttons.astro

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Layout from '@layouts/Layout.astro';
99
</div>
1010
<!-- Sizes -->
1111
<div class="flex items-center gap-4">
12-
<button type="button" class="btn-icon btn-icon-sm preset-filled">
12+
<button type="button" class="btn-icon btn-icon-sm preset-filled" title="Small right arrow" aria-label="Small right arrow">
1313
<span>&rarr;</span>
1414
</button>
1515
<button type="button" class="btn btn-sm preset-filled">
@@ -21,15 +21,17 @@ import Layout from '@layouts/Layout.astro';
2121
</button>
2222
</div>
2323
<div class="flex items-center gap-4">
24-
<button type="button" class="btn-icon preset-filled">&rarr;</button>
24+
<button type="button" class="btn-icon preset-filled" title="Right arrow" aria-label="Right arrow">&rarr;</button>
2525
<button type="button" class="btn preset-filled">Base</button>
2626
<button type="button" class="btn preset-filled">
2727
<span>Base</span>
2828
<span>&rarr;</span>
2929
</button>
3030
</div>
3131
<div class="flex items-center gap-4">
32-
<button type="button" class="btn-icon btn-icon-lg preset-filled">&rarr;</button>
32+
<button type="button" class="btn-icon btn-icon-lg preset-filled" title="Large right arrow" aria-label="Large right arrow"
33+
>&rarr;</button
34+
>
3335
<button type="button" class="btn btn-lg preset-filled">Large</button>
3436
<button type="button" class="btn btn-lg preset-filled">
3537
<span>Large</span>
@@ -38,9 +40,13 @@ import Layout from '@layouts/Layout.astro';
3840
</div>
3941
<!-- Icons -->
4042
<div class="flex items-center gap-4">
41-
<button type="button" class="btn-icon btn-icon-sm preset-filled">&rarr;</button>
42-
<button type="button" class="btn-icon preset-filled">&rarr;</button>
43-
<button type="button" class="btn-icon btn-icon-lg preset-filled">&rarr;</button>
43+
<button type="button" class="btn-icon btn-icon-sm preset-filled" title="Small right arrow" aria-label="Small right arrow"
44+
>&rarr;</button
45+
>
46+
<button type="button" class="btn-icon preset-filled" title="Right arrow" aria-label="Right arrow">&rarr;</button>
47+
<button type="button" class="btn-icon btn-icon-lg preset-filled" title="Large right arrow" aria-label="Large right arrow"
48+
>&rarr;</button
49+
>
4450
</div>
4551
<!-- Presets -->
4652
<div class="space-y-4">
@@ -97,7 +103,12 @@ import Layout from '@layouts/Layout.astro';
97103
<!-- Responsive -->
98104
<div class="flex items-center gap-4">
99105
<button type="button" class="btn btn-sm md:btn-base lg:btn-lg preset-filled">Responsive</button>
100-
<button type="button" class="btn-icon btn-icon-sm md:btn-icon-base lg:btn-icon-lg preset-filled">&rarr;</button>
106+
<button
107+
type="button"
108+
class="btn-icon btn-icon-sm md:btn-icon-base lg:btn-icon-lg preset-filled"
109+
title="Responsive right arrow"
110+
aria-label="Responsive right arrow">&rarr;</button
111+
>
101112
</div>
102113
<!-- Disabled -->
103114
<div class="flex items-center gap-4">

‎sites/skeleton.dev/src/components/docs/Drawer.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const {
2424
class="flex justify-between items-center p-6 from-surface-100-900 from-75% to-surface-100-900/0 bg-linear-to-b start sticky top-0"
2525
>
2626
<h2 class="h3">Skeleton</h2>
27-
<button class="btn-icon" data-drawer-trigger>
27+
<button class="btn-icon" title="Close drawer" aria-label="Close drawer" data-drawer-trigger>
2828
<IconClose />
2929
</button>
3030
</header>
@@ -35,7 +35,7 @@ const {
3535
</dialog>
3636

3737
{/* Drawer Trigger */}
38-
<button class="xl:hidden btn-icon translate-x" data-drawer-trigger>
38+
<button class="xl:hidden btn-icon translate-x" title="Open drawer" aria-label="Open drawer" data-drawer-trigger>
3939
<IconMenu />
4040
</button>
4141

‎sites/skeleton.dev/src/components/docs/Footer.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { classList = 'p-4' } = Astro.props;
1818
<nav class="flex items-center">
1919
{
2020
socialLinks.get().map((l) => (
21-
<a class="btn-icon hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
21+
<a class="btn-icon hover:preset-tonal" href={l.href} target="_blank" title={l.label} aria-label={l.label}>
2222
<Icon name={l.icon} size={24} />
2323
</a>
2424
))

‎sites/skeleton.dev/src/components/docs/Header.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const versionLinks = [
7474
.get()
7575
.slice(0, 2)
7676
.map((l) => (
77-
<a class="btn-icon hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
77+
<a class="btn-icon hover:preset-tonal" href={l.href} target="_blank" title={l.label} aria-label={l.label}>
7878
<Icon name={l.icon} size={20} />
7979
</a>
8080
))

‎sites/skeleton.dev/src/components/docs/Lightswitch.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { SunMoon } from 'lucide-react';
66
---
77

88
<nav>
9-
<button class="btn-icon hover:preset-tonal" title="Toggle dark mode." data-lightswitch>
9+
<button class="btn-icon hover:preset-tonal" title="Toggle dark mode." aria-label="Toggle dark mode." data-lightswitch>
1010
<SunMoon size={20} />
1111
</button>
1212
</nav>

‎sites/skeleton.dev/src/content/docs/headless/bits-ui.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ Styling the `<Calendar.Root>` parent component.
169169
Styling the `<Calendar.PrevButton>` sub-component. You can clone these to `<Calendar.NextButton>` too.
170170

171171
```svelte
172-
<Calendar.PrevButton class="btn-icon preset-filled-primary-500">
172+
<Calendar.PrevButton class="btn-icon preset-filled-primary-500" title="Previous month" aria-label="Previous month">
173173
<span>&larr;</span>
174174
</Calendar.PrevButton>
175175
```
@@ -213,11 +213,11 @@ Below is a complete example showing the entire component with all styles and bas
213213
>
214214
{#snippet children({ months, weekdays })}
215215
<Calendar.Header class="flex items-center justify-between">
216-
<Calendar.PrevButton class="btn-icon preset-filled-primary-500">
216+
<Calendar.PrevButton class="btn-icon preset-filled-primary-500" title="Previous month" aria-label="Previous month">
217217
<span>&larr;</span>
218218
</Calendar.PrevButton>
219219
<Calendar.Heading class="text-lg font-bold" />
220-
<Calendar.NextButton class="btn-icon preset-filled-primary-500">
220+
<Calendar.NextButton class="btn-icon preset-filled-primary-500" title="Next month" aria-label="Next month">
221221
<span>&rarr;</span>
222222
</Calendar.NextButton>
223223
</Calendar.Header>

‎sites/skeleton.dev/src/examples/guides/cookbook/scroll-containers/ExampleCarousel.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const generatedArray = Array.from({ length: 6 });
88
<!-- Carousel -->
99
<div class="card p-4 grid grid-cols-[auto_1fr_auto] gap-4 items-center">
1010
<!-- Button: Left -->
11-
<button type="button" class="btn-icon preset-filled" data-carousel-left>
11+
<button type="button" class="btn-icon preset-filled" data-carousel-left title="Previous slide" aria-label="Previous slide">
1212
<ArrowLeft size={16} />
1313
</button>
1414
<!-- Full Images -->
@@ -26,7 +26,7 @@ const generatedArray = Array.from({ length: 6 });
2626
}
2727
</div>
2828
<!-- Button: Right -->
29-
<button type="button" class="btn-icon preset-filled" data-carousel-right>
29+
<button type="button" class="btn-icon preset-filled" data-carousel-right title="Next slide" aria-label="Next slide">
3030
<ArrowRight size={16} />
3131
</button>
3232
</div>

‎sites/skeleton.dev/src/examples/guides/cookbook/scroll-containers/ExampleMultiColumn.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const movies: Movie[] = [
6060
<div class="w-ful">
6161
<div class="grid grid-cols-[auto_1fr_auto] gap-4 items-center">
6262
<!-- Button: Left -->
63-
<button type="button" class="btn-icon preset-filled" data-multi-column-left>
63+
<button type="button" class="btn-icon preset-filled" data-multi-column-left title="Scroll left" aria-label="Scroll left">
6464
<ArrowLeft size={16} />
6565
</button>
6666
<!-- Carousel -->
@@ -81,7 +81,7 @@ export const movies: Movie[] = [
8181
}
8282
</div>
8383
<!-- Button-Right -->
84-
<button type="button" class="btn-icon preset-filled" data-multi-column-right>
84+
<button type="button" class="btn-icon preset-filled" data-multi-column-right title="Scroll right" aria-label="Scroll right">
8585
<ArrowRight size={16} />
8686
</button>
8787
</div>

‎sites/skeleton.dev/src/examples/tailwind/buttons/Example.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ArrowRight as IconArrowRight } from 'lucide-react';
44

55
<div class="flex items-center gap-4">
66
<!-- A simple icon button -->
7-
<button type="button" class="btn-icon preset-filled"><IconArrowRight size={18} /></button>
7+
<button type="button" class="btn-icon preset-filled" title="Go" aria-label="Go"><IconArrowRight size={18} /></button>
88
<!-- A standard button -->
99
<button type="button" class="btn preset-filled">Button</button>
1010
<!-- A button + icon -->

0 commit comments

Comments
 (0)