Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Fix accessibility and markup bugs across preview pages and docs (#3082)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
This commit is contained in:
Bartosz-Doandcodecalm authored and GitHub committed 2026-09-18 00:16:52 +02:00
1 parent c99a436cc2
commit 364ccf801b
29 files changed
+197 -184
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

preview/pages/all-elements.astro
+2 -2
View File
@@ -158,8 +158,8 @@ function greetUser(name) {
</CardBody>
<CardFooter>
<div class="d-flex">
<a class="btn btn-link">Cancel</a>
<a class="btn btn-primary ms-auto">Save</a>
<button type="button" class="btn btn-link">Cancel</button>
<button type="button" class="btn btn-primary ms-auto">Save</button>
</div>
</CardFooter>
</Card>
preview/pages/billing.astro
+14 -12
View File
@@ -140,18 +140,20 @@ const invoiceStatus = {
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{
paymentMethods.map((method) => (
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="payment-method" value={method.provider} class="form-selectgroup-input" checked={method.isDefault} />
<div class="form-selectgroup-item flex-fill">
<input type="radio" id={`payment-method-${method.provider}`} name="payment-method" value={method.provider} class="form-selectgroup-input" checked={method.isDefault} />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="me-3">
<span class="form-selectgroup-check" />
</div>
<Payment payment={method.provider} size="sm" class="me-3" />
<div class="me-auto">
<div class="fw-medium">{method.title}</div>
<div class="text-secondary">{method.description}</div>
</div>
{method.isDefault && <Badge text="Default" color="primary" light class="me-2" />}
<label for={`payment-method-${method.provider}`} class="d-flex align-items-center flex-fill mb-0">
<div class="me-3">
<span class="form-selectgroup-check" />
</div>
<Payment payment={method.provider} size="sm" class="me-3" />
<div class="me-auto">
<div class="fw-medium">{method.title}</div>
<div class="text-secondary">{method.description}</div>
</div>
{method.isDefault && <Badge text="Default" color="primary" light class="me-2" />}
</label>
<div class="dropdown">
<button type="button" class="btn btn-action btn-sm" data-bs-toggle="dropdown" aria-expanded="false" aria-label={`Actions for ${method.title}`}>
<Icon name="dots-vertical" />
@@ -174,7 +176,7 @@ const invoiceStatus = {
</div>
</div>
</div>
</label>
</div>
))
}
</div>
preview/pages/buttons.astro
+50 -42
View File
@@ -46,18 +46,18 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<CardTitle>Shapes</CardTitle>
<CardSubtitle>Round the corners with <code>.btn-pill</code>, or square them off with <code>.btn-square</code>.</CardSubtitle>
<ButtonList>
<a class="btn">Default</a>
<a class="btn btn-pill">Pill</a>
<a class="btn btn-square">Square</a>
<a class="btn btn-icon">
<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-pill">Pill</button>
<button type="button" class="btn btn-square">Square</button>
<button type="button" class="btn btn-icon">
<Icon name="star" />
</a>
<a class="btn btn-pill btn-icon">
</button>
<button type="button" class="btn btn-pill btn-icon">
<Icon name="star" />
</a>
<a class="btn btn-square btn-icon">
</button>
<button type="button" class="btn btn-square btn-icon">
<Icon name="star" />
</a>
</button>
</ButtonList>
</CardBody>
</Card>
@@ -105,33 +105,33 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<CardTitle>Animated icon</CardTitle>
<CardSubtitle>Small hover animations draw attention to the icon.</CardSubtitle>
<ButtonList>
<a class="btn btn-animate-icon">
<button type="button" class="btn btn-animate-icon">
Save <Icon name="arrow-right" class="icon-end" />
</a>
<a class="btn btn-animate-icon btn-animate-icon-rotate">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
<Icon name="plus" /> Add
</a>
<a class="btn btn-animate-icon btn-animate-icon-shake">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-shake">
<Icon name="bell" /> Notifications
</a>
<a class="btn btn-animate-icon btn-animate-icon-rotate">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
<Icon name="settings" /> Settings
</a>
<a class="btn btn-animate-icon btn-animate-icon-pulse">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-pulse">
<Icon name="heart" /> Love
</a>
<a class="btn btn-animate-icon btn-animate-icon-rotate">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
<Icon name="x" /> Close
</a>
<a class="btn btn-animate-icon btn-animate-icon-tada">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-tada">
<Icon name="check" /> Confirm
</a>
<a class="btn btn-animate-icon">
</button>
<button type="button" class="btn btn-animate-icon">
Next <Icon name="chevron-right" class="icon-end" />
</a>
<a class="btn btn-animate-icon btn-animate-icon-move-start">
</button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-move-start">
<Icon name="chevron-left" /> Previous
</a>
</button>
</ButtonList>
</CardBody>
</Card>
@@ -144,9 +144,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
themeColors.map(([name, color]) => (
<a class={`btn btn-${name}`}>
<button type="button" class={`btn btn-${name}`}>
{color.icon && <Icon name={color.icon} />} {color.title}
</a>
</button>
))
}
</ButtonList>
@@ -161,9 +161,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
themeColors.map(([name, color]) => (
<a class={`btn btn-outline btn-${name}`}>
<button type="button" class={`btn btn-outline btn-${name}`}>
{color.icon && <Icon name={color.icon} />} {color.title}
</a>
</button>
))
}
</ButtonList>
@@ -178,9 +178,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
themeColors.map(([name, color]) => (
<a class={`btn btn-ghost btn-${name}`}>
<button type="button" class={`btn btn-ghost btn-${name}`}>
{color.icon && <Icon name={color.icon} />} {color.title}
</a>
</button>
))
}
</ButtonList>
@@ -195,9 +195,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
themeColors.map(([name, color]) => (
<a class={`btn btn-pill btn-${name}`}>
<button type="button" class={`btn btn-pill btn-${name}`}>
{color.icon && <Icon name={color.icon} />} {color.title}
</a>
</button>
))
}
</ButtonList>
@@ -212,9 +212,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
themeColors.map(([name, color]) => (
<a class={`btn btn-square btn-${name}`}>
<button type="button" class={`btn btn-square btn-${name}`}>
{color.icon && <Icon name={color.icon} />} {color.title}
</a>
</button>
))
}
</ButtonList>
@@ -229,9 +229,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
colors.map(([name, color]) => (
<a class={`btn btn-${name}`}>
<button type="button" class={`btn btn-${name}`}>
{color.icon && <Icon name={color.icon} />} {color.title}
</a>
</button>
))
}
</ButtonList>
@@ -246,9 +246,9 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<ButtonList>
{
socialColors.map(([name, app]) => (
<a class={`btn btn-${name}`}>
<button type="button" class={`btn btn-${name}`}>
{app.icon && <Icon name={app.icon} />} {app.title}
</a>
</button>
))
}
</ButtonList>
@@ -260,7 +260,15 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
<CardBody>
<CardTitle>Icon buttons</CardTitle>
<CardSubtitle>Social brand colors without a label, for compact toolbars.</CardSubtitle>
<ButtonList>{socialColors.map(([name, app]) => <a class={`btn btn-icon btn-${name}`}>{app.icon && <Icon name={app.icon} />}</a>)}</ButtonList>
<ButtonList
>{
socialColors.map(([name, app]) => (
<button type="button" class={`btn btn-icon btn-${name}`}>
{app.icon && <Icon name={app.icon} />}
</button>
))
}</ButtonList
>
</CardBody>
</Card>
</div>
preview/pages/dashboard-crypto.astro
+9 -9
View File
@@ -232,8 +232,8 @@ const operationCurrencies = currencies.slice(0, 20)
<p>Place new order:</p>
<div class="input-group mb-3">
<label class="input-group-text">Amount</label>
<select class="form-select">
<label class="input-group-text" for="crypto-amount-value">Amount</label>
<select class="form-select" aria-label="Currency">
{
operationCurrencies.map((currency, i) => (
<option value={currency.symbol} selected={i === 0}>
@@ -242,19 +242,19 @@ const operationCurrencies = currencies.slice(0, 20)
))
}
</select>
<input type="text" class="form-control" value="0.25" />
<input type="text" id="crypto-amount-value" class="form-control" value="0.25" />
</div>
<div class="input-group mb-3">
<label class="input-group-text">Price</label>
<input type="text" class="form-control" readonly="" value="23,077.05" />
<label class="input-group-text">$</label>
<label class="input-group-text" for="crypto-order-price">Price</label>
<input type="text" id="crypto-order-price" class="form-control" readonly="" value="23,077.05" />
<label class="input-group-text" for="crypto-order-price">$</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text">Total</label>
<input type="text" class="form-control" readonly="" value="5,769.27" />
<label class="input-group-text">$</label>
<label class="input-group-text" for="crypto-order-total">Total</label>
<input type="text" id="crypto-order-total" class="form-control" readonly="" value="5,769.27" />
<label class="input-group-text" for="crypto-order-total">$</label>
</div>
<div class="d-grid">
preview/pages/emails.astro
+1 -1
View File
@@ -57,7 +57,7 @@ const emailEntries = Object.entries(emails)
<div class="row g-0">
<div class="col-6">
<div class="p-6 bg-surface-secondary rounded-start">
<img src="" class="img-fluid rounded-start" data-email-image />
<img class="img-fluid rounded-start" alt="" data-email-image />
</div>
</div>
<div class="col-6">
preview/pages/form-elements.astro
+4 -4
View File
@@ -239,7 +239,7 @@ const rows = [
rows.map((row) => (
<tr>
<td>
<select class="form-select">
<select class="form-select" aria-label="Source">
{sources.map(([v, l]) => (
<option value={v} selected={v === row.source || undefined}>
{l}
@@ -248,10 +248,10 @@ const rows = [
</select>
</td>
<td>
<input type="text" class="form-control" value={row.prop || undefined} />
<input type="text" class="form-control" aria-label="Property" value={row.prop || undefined} />
</td>
<td>
<select class="form-select">
<select class="form-select" aria-label="Comparison">
{comparisons.map(([v, l]) => (
<option value={v} selected={v === row.comparison || undefined}>
{l}
@@ -260,7 +260,7 @@ const rows = [
</select>
</td>
<td>
<input type="text" class="form-control" value={row.target} />
<input type="text" class="form-control" aria-label="Target" value={row.target} />
</td>
</tr>
))
preview/pages/terms-of-service.astro
+1 -3
View File
@@ -2,14 +2,12 @@
import SingleLayout from '@shared/layouts/SingleLayout.astro'
import CardTitle from '@ui/CardTitle.astro'
import Prose from '@ui/Prose.astro'
// Card title is empty on purpose.
---
<SingleLayout title="Terms of service" containerSize="narrow">
<div class="card card-md">
<div class="card-body">
<CardTitle />
<CardTitle>Terms of service</CardTitle>
<Prose>
<p>
We (the folks at Tabler) run a website hosting platform called <a href="https://tabler.io">tabler.io</a> and would love for you to use it. Tabler.io's basic service is free, and we offer paid upgrades for advanced features. Our service is designed to give you as much control and ownership over what goes on your