From 364ccf801bda82a36d5b2e7256a650182e242885 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Fri, 18 Sep 2026 00:16:52 +0200 Subject: [PATCH] Fix accessibility and markup bugs across preview pages and docs (#3082) Co-authored-by: codecalm --- .changeset/fix-a11y-markup-bugs.md | 6 + docs/content/ui/components/alert.mdx | 18 +-- docs/content/ui/components/button.mdx | 18 +-- preview/pages/all-elements.astro | 4 +- preview/pages/billing.astro | 26 +++-- preview/pages/buttons.astro | 92 ++++++++------- preview/pages/dashboard-crypto.astro | 18 +-- preview/pages/emails.astro | 2 +- preview/pages/form-elements.astro | 8 +- preview/pages/terms-of-service.astro | 4 +- shared/components/cards/Card.astro | 4 +- shared/components/cards/TabsCard.astro | 2 +- shared/components/cards/UsersList.astro | 2 +- .../components/cards/UsersListHeaders.astro | 2 +- shared/components/cards/Welcome.astro | 2 +- shared/components/demo/Nav.astro | 2 +- shared/components/forms/FormElements4.astro | 12 +- .../layout/HeaderActionsPhotos.astro | 2 +- .../layout/HeaderActionsUsers.astro | 2 +- .../marketing/sections/Companies.astro | 14 +-- .../marketing/sections/Subscribe.astro | 6 +- .../components/modals/TeamModalContent.astro | 4 +- shared/data/emails.json | 108 +++++++++--------- shared/layouts/MarketingLayout.astro | 2 +- shared/ui/Alert.astro | 2 +- shared/ui/Avatar.astro | 7 +- shared/ui/Rating.astro | 6 +- shared/ui/Tag.astro | 2 +- shared/ui/Wysiwyg.astro | 4 +- 29 files changed, 197 insertions(+), 184 deletions(-) create mode 100644 .changeset/fix-a11y-markup-bugs.md diff --git a/.changeset/fix-a11y-markup-bugs.md b/.changeset/fix-a11y-markup-bugs.md new file mode 100644 index 000000000..571b22c55 --- /dev/null +++ b/.changeset/fix-a11y-markup-bugs.md @@ -0,0 +1,6 @@ +--- +"@tabler/preview": patch +"@tabler/docs": patch +--- + +Fixed keyboard access and accessible names across preview pages, `Alert`, `Avatar`, `Rating`, `Tag` and `Wysiwyg` components. diff --git a/docs/content/ui/components/alert.mdx b/docs/content/ui/components/alert.mdx index 2a03639c3..65054684d 100644 --- a/docs/content/ui/components/alert.mdx +++ b/docs/content/ui/components/alert.mdx @@ -89,7 +89,7 @@ Add `alert-minor` for a quieter alert. It drops the tinted background and keeps - + - + - + - + @@ -271,7 +271,7 @@ You can also use other elements, like icons and dismissible buttons, with this t
Wow! Everything worked!
- + - + @@ -318,7 +318,7 @@ You're not limited to the 4 default alert colors. You can use any [base color](/
Be the first to see it!
- + diff --git a/docs/content/ui/components/button.mdx b/docs/content/ui/components/button.mdx index b3ddf8a97..5033777aa 100644 --- a/docs/content/ui/components/button.mdx +++ b/docs/content/ui/components/button.mdx @@ -467,15 +467,15 @@ Add `.btn-animate-icon` to move the icon on hover. The `-rotate`, `-shake`, `-pu
- Save - Add - Notifications - Settings - Love - Close - Confirm - Next - Previous + + + + + + + + +
diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index 6eef14e1c..0314b0160 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -158,8 +158,8 @@ function greetUser(name) {
- Cancel - Save + +
diff --git a/preview/pages/billing.astro b/preview/pages/billing.astro index 301c3879e..a291aedf2 100644 --- a/preview/pages/billing.astro +++ b/preview/pages/billing.astro @@ -140,18 +140,20 @@ const invoiceStatus = {
{ paymentMethods.map((method) => ( - +
)) } diff --git a/preview/pages/buttons.astro b/preview/pages/buttons.astro index 94f8b7525..d2ab01263 100644 --- a/preview/pages/buttons.astro +++ b/preview/pages/buttons.astro @@ -46,18 +46,18 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const Shapes Round the corners with .btn-pill, or square them off with .btn-square. - Default - Pill - Square - + + + + + + @@ -105,33 +105,33 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const Animated icon Small hover animations draw attention to the icon. - + + + + + + + + + @@ -144,9 +144,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { themeColors.map(([name, color]) => ( - + )) } @@ -161,9 +161,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { themeColors.map(([name, color]) => ( - + )) } @@ -178,9 +178,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { themeColors.map(([name, color]) => ( - + )) } @@ -195,9 +195,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { themeColors.map(([name, color]) => ( - + )) } @@ -212,9 +212,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { themeColors.map(([name, color]) => ( - + )) } @@ -229,9 +229,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { colors.map(([name, color]) => ( - + )) } @@ -246,9 +246,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const { socialColors.map(([name, app]) => ( - + )) } @@ -260,7 +260,15 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const Icon buttons Social brand colors without a label, for compact toolbars. - {socialColors.map(([name, app]) => {app.icon && })} + { + socialColors.map(([name, app]) => ( + + )) + } diff --git a/preview/pages/dashboard-crypto.astro b/preview/pages/dashboard-crypto.astro index baf802c70..f99ca0a36 100644 --- a/preview/pages/dashboard-crypto.astro +++ b/preview/pages/dashboard-crypto.astro @@ -232,8 +232,8 @@ const operationCurrencies = currencies.slice(0, 20)

Place new order:

- - { operationCurrencies.map((currency, i) => (
- - - + + +
- - - + + +
diff --git a/preview/pages/emails.astro b/preview/pages/emails.astro index 6ab7488a8..eb6964742 100644 --- a/preview/pages/emails.astro +++ b/preview/pages/emails.astro @@ -57,7 +57,7 @@ const emailEntries = Object.entries(emails)
- +
diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro index bb7d819ff..c4e9a1af4 100644 --- a/preview/pages/form-elements.astro +++ b/preview/pages/form-elements.astro @@ -239,7 +239,7 @@ const rows = [ rows.map((row) => ( - {sources.map(([v, l]) => (