diff --git a/.changeset/fix-preview-heading-form-markup.md b/.changeset/fix-preview-heading-form-markup.md new file mode 100644 index 000000000..919734dc6 --- /dev/null +++ b/.changeset/fix-preview-heading-form-markup.md @@ -0,0 +1,6 @@ +--- +"@tabler/preview": patch +"@tabler/docs": patch +--- + +Fixed heading order, form `autocomplete` and accessible names on preview pages, `Alert`, `Button`, `Dropzone` and `Avatar`. diff --git a/preview/pages/2-step-verification-code.astro b/preview/pages/2-step-verification-code.astro index 767b19997..a843c74dd 100644 --- a/preview/pages/2-step-verification-code.astro +++ b/preview/pages/2-step-verification-code.astro @@ -10,7 +10,7 @@ import OtpInput from '@ui/OtpInput.astro'
- Authenticate Your Account + Authenticate Your Account

Please confirm your account by entering the authorization code sent to +1 856-672-8552. @@ -33,7 +33,7 @@ import OtpInput from '@ui/OtpInput.astro'

diff --git a/preview/pages/2-step-verification.astro b/preview/pages/2-step-verification.astro index 1c28f33c7..b28d27db2 100644 --- a/preview/pages/2-step-verification.astro +++ b/preview/pages/2-step-verification.astro @@ -10,7 +10,7 @@ import CardTitle from '@ui/CardTitle.astro'
- 2-Step Verification + 2-Step Verification +
diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index bc9d2ebf5..a7453cc51 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -79,12 +79,12 @@ function greetUser(name) {
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
+
Heading 1
+
Heading 2
+
Heading 3
+
Heading 4
+
Heading 5
+
Heading 6

This is a lead paragraph with larger text.

@@ -238,7 +238,7 @@ function greetUser(name) { - + @@ -377,7 +377,7 @@ function greetUser(name) { - +
diff --git a/preview/pages/auth-lock.astro b/preview/pages/auth-lock.astro index a8c0823a6..39c2e8dd1 100644 --- a/preview/pages/auth-lock.astro +++ b/preview/pages/auth-lock.astro @@ -3,6 +3,6 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro' import AuthLockCard from '@shared/components/cards/AuthLockCard.astro' --- - + diff --git a/preview/pages/badges.astro b/preview/pages/badges.astro index 8747897eb..9628b345e 100644 --- a/preview/pages/badges.astro +++ b/preview/pages/badges.astro @@ -25,12 +25,12 @@ const sizes = ['sm', 'md', 'lg'] In headings A badge scales with the heading level it sits next to. -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
diff --git a/preview/pages/chat.astro b/preview/pages/chat.astro index 8f31bd220..e596b2f0f 100644 --- a/preview/pages/chat.astro +++ b/preview/pages/chat.astro @@ -53,12 +53,12 @@ const messages = chats as Message[]
- + - + - +
diff --git a/preview/pages/colors.astro b/preview/pages/colors.astro index 2a5f01444..733f385a3 100644 --- a/preview/pages/colors.astro +++ b/preview/pages/colors.astro @@ -135,7 +135,7 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans Gradient Build a gradient from any two colors and preview it live. - +
diff --git a/preview/pages/emails.astro b/preview/pages/emails.astro index eb6964742..a65188fec 100644 --- a/preview/pages/emails.astro +++ b/preview/pages/emails.astro @@ -22,7 +22,7 @@ const emailEntries = Object.entries(emails)
-

Tabler Emails

+

Tabler Emails

{emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed. diff --git a/preview/pages/faq.astro b/preview/pages/faq.astro index 5627926bb..4b3f126b7 100644 --- a/preview/pages/faq.astro +++ b/preview/pages/faq.astro @@ -18,18 +18,18 @@ const categories = faq as { name: string; questions: { question: string }[] }[]

{ci + 1}. {category.name}

-
+
{category.questions.map((question, qi) => (
-
- -
-
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias dignissimos dolorum ea est eveniet, excepturi illum in iste iure maiores nemo recusandae rerum saepe sed, sunt totam! Explicabo, ipsa?

diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro index 1667080b1..a2cfb8f44 100644 --- a/preview/pages/form-elements.astro +++ b/preview/pages/form-elements.astro @@ -179,10 +179,10 @@ const rows = [ - + -
diff --git a/preview/pages/form-layout.astro b/preview/pages/form-layout.astro index 22512fb78..a78735081 100644 --- a/preview/pages/form-layout.astro +++ b/preview/pages/form-layout.astro @@ -45,12 +45,12 @@ const countries = flags as { name: string }[]
- + - + -
+
@@ -83,7 +83,7 @@ const countries = flags as { name: string }[] -
+
@@ -106,12 +106,12 @@ const countries = flags as { name: string }[]
-
-
+
+
-
+
@@ -193,7 +193,7 @@ const countries = flags as { name: string }[]

Address

- +
@@ -224,7 +224,7 @@ const countries = flags as { name: string }[]
diff --git a/preview/pages/job-listing.astro b/preview/pages/job-listing.astro index 00a528447..3c3ededdd 100644 --- a/preview/pages/job-listing.astro +++ b/preview/pages/job-listing.astro @@ -77,7 +77,7 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
- + Reset to defaults
diff --git a/preview/pages/logs.astro b/preview/pages/logs.astro index 06084a25d..4cbeaa148 100644 --- a/preview/pages/logs.astro +++ b/preview/pages/logs.astro @@ -13,23 +13,23 @@ import { site } from '@shared/lib/site'
-

Checked URL

+

Checked URL

-

Request Timing

+

Request Timing

Effective URL            {site.previewUrl}
Redirect count           0
Name lookup time         3.4e-05
Connect time             0.000521
Pre-transfer time        0.0
Start-transfer time      0.0
App connect time         0.0
Redirect time            0.0
Total time               28.000601
Response code            0
Return keyword           operation_timedout
-

Response Headers

+

Response Headers

HTTP/1.1 200 Connection established
 -

Escalation

+

Escalation

Entire team
 @@ -37,7 +37,7 @@ import { site } from '@shared/lib/site'
-

Application Log

+

Application Log

2024-01-15 14:23:45 [INFO] Application started successfully
 2024-01-15 14:23:46 [DEBUG] Database connection established
@@ -48,7 +48,7 @@ import { site } from '@shared/lib/site'
 2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms
-

Log Levels

+

Log Levels

@@ -57,7 +57,7 @@ import { site } from '@shared/lib/site' -

Log Source

+

Log Source

Application Server (prod-01)
 diff --git a/preview/pages/marketing/pricing.astro b/preview/pages/marketing/pricing.astro index 435dff23c..b2c360869 100644 --- a/preview/pages/marketing/pricing.astro +++ b/preview/pages/marketing/pricing.astro @@ -8,7 +8,7 @@ import Faq from '@shared/components/marketing/sections/Faq.astro'
-

Simple, transparent pricing

+

Simple, transparent pricing

Get early access to 100+ components and free updates every month. Make it yours today!

diff --git a/preview/pages/marketing/testimonials.astro b/preview/pages/marketing/testimonials.astro index 7b670b801..5f1392467 100644 --- a/preview/pages/marketing/testimonials.astro +++ b/preview/pages/marketing/testimonials.astro @@ -6,7 +6,7 @@ import Testimonials from '@shared/components/marketing/sections/Testimonials.ast
-

Trusted by hundreds

+

Trusted by hundreds

Our Users send us bunch of smilies with our services, and we love them 😍

diff --git a/preview/pages/modals.astro b/preview/pages/modals.astro index 8cc22dbd6..e38324507 100644 --- a/preview/pages/modals.astro +++ b/preview/pages/modals.astro @@ -61,109 +61,109 @@ const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-
-

Simple modal

+

Simple modal

-

Large modal

+

Large modal

-

Small modal

+

Small modal

-

Full width modal

+

Full width modal

-

Scrollable modal

+

Scrollable modal

-

Modal with form

+

Modal with form

-

Success modal

+

Success modal

-

Danger modal

+

Danger modal

-

Modal with simple form

+

Modal with simple form

-

Modal with signature form

+

Modal with signature form

-

New email modal

+

New email modal

-

New event modal

+

New event modal

-

New task modal

+

New task modal

-

Edit profile modal

+

Edit profile modal

-

Confirm delete modal

+

Confirm delete modal

-

Change password modal

+

Change password modal

-

Add task modal

+

Add task modal

-

Top tracks

+

Top tracks

{ diff --git a/preview/pages/pay.astro b/preview/pages/pay.astro index 9814923c1..cd1e3b4c5 100644 --- a/preview/pages/pay.astro +++ b/preview/pages/pay.astro @@ -22,7 +22,7 @@ import Icon from '@ui/Icon.astro'
-

Front-End Learning

+

Front-End Learning

Learn to build web apps with HTML & CSS. Get started quickly with included templates.
diff --git a/preview/pages/prose.astro b/preview/pages/prose.astro index bbd9afbcc..ce7617403 100644 --- a/preview/pages/prose.astro +++ b/preview/pages/prose.astro @@ -13,7 +13,7 @@ import DocsLink from '@ui/DocsLink.astro'
-

Getting started with documentation New

+

Getting started with documentation New

Written by Paweł Kuna · 6 min read @@ -38,7 +38,7 @@ import DocsLink from '@ui/DocsLink.astro'

-

A quick glossary

+

A quick glossary

Prose
Long-form, readable content — articles, changelogs, help center entries.
@@ -48,13 +48,13 @@ import DocsLink from '@ui/DocsLink.astro'
A shared reference so every writer on the team formats things the same way.
-

Adding code examples

+

Adding code examples

Inline code looks like console.log("Hello") and uses monospace styling. For anything longer, drop it into a code block, and mention shortcuts with Ctrl + C style keys: 

{`function add(a, b) {\n  return a + b;\n}`}
-

Structuring steps and points

+

Structuring steps and points

Use an ordered list to walk through a process:

  1. Start with the most important information.
    2. @@ -68,7 +68,7 @@ import DocsLink from '@ui/DocsLink.astro'
  2. Avoid overly long items.
    3. -

    Nesting related items

    +

    Nesting related items

    Lists can nest, with indentation and spacing handled automatically:

    • @@ -88,7 +88,7 @@ import DocsLink from '@ui/DocsLink.astro'
    • Sharing
    -

    A visual checklist

    +

    A visual checklist

    For a status readers can scan at a glance, drop in the steps component instead of a plain list:

    • Draft
      • @@ -99,14 +99,14 @@ import DocsLink from '@ui/DocsLink.astro'
      -

      Supporting images

      +

      Supporting images

      Images should support the text and provide useful context, not just decorate the page.

      Open book and coffee
      A quiet spot makes for better writing sessions.
      -

      Comparing data in tables

      +

      Comparing data in tables

      Tables work best for comparing related data points, like votes on a proposal:

      diff --git a/preview/pages/screenshot.astro b/preview/pages/screenshot.astro index 3f8bba2e8..a75da874e 100644 --- a/preview/pages/screenshot.astro +++ b/preview/pages/screenshot.astro @@ -45,6 +45,7 @@ import { site } from '@shared/lib/site'
      +

      Screenshot

      )) diff --git a/shared/components/cards/SignInForm.astro b/shared/components/cards/SignInForm.astro index 7309e9685..ad7ef55f2 100644 --- a/shared/components/cards/SignInForm.astro +++ b/shared/components/cards/SignInForm.astro @@ -9,12 +9,10 @@ import InputGroup from '@ui/InputGroup.astro'
      - +
      + + I forgot password +
      diff --git a/shared/components/cards/SignUpCard.astro b/shared/components/cards/SignUpCard.astro index f72dd47ad..fc007abc0 100644 --- a/shared/components/cards/SignUpCard.astro +++ b/shared/components/cards/SignUpCard.astro @@ -8,7 +8,7 @@ import CardTitle from '@ui/CardTitle.astro'
      - Create new account + Create new account @@ -20,11 +20,10 @@ import CardTitle from '@ui/CardTitle.astro' -
      - +
      + + + terms and policy.
      diff --git a/shared/components/cards/TabsCard.astro b/shared/components/cards/TabsCard.astro index e9c7657a0..0d055112c 100644 --- a/shared/components/cards/TabsCard.astro +++ b/shared/components/cards/TabsCard.astro @@ -76,17 +76,17 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
      -

      Home tab

      +

      Home tab

      Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh
      -

      Profile tab

      +

      Profile tab

      Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
      { settings && (
      -

      Settings tab

      +

      Settings tab

      Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
      ) @@ -94,7 +94,7 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}` { activity && (
      -

      Activity tab

      +

      Activity tab

      Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
      ) diff --git a/shared/components/cards/TasksDue.astro b/shared/components/cards/TasksDue.astro index 64ac0c7ec..271d640a8 100644 --- a/shared/components/cards/TasksDue.astro +++ b/shared/components/cards/TasksDue.astro @@ -25,14 +25,14 @@ const tasks = crmDashboard.tasks_due { - tasks.items.map((item) => ( - + tasks.items.map((item, index) => ( +
      - +
      -
      {item.text}
      +
      diff --git a/shared/components/cards/YouWin.astro b/shared/components/cards/YouWin.astro index 13b4b2bbf..c933ab63b 100644 --- a/shared/components/cards/YouWin.astro +++ b/shared/components/cards/YouWin.astro @@ -5,7 +5,7 @@ import Button from '@ui/Button.astro'
      🏆
      -

      You are winner!

      +

      You are winner!

      You've been selected as our lucky winner for completing 100 orders this month! Click below to claim your exclusive prize and enjoy the benefits!

      diff --git a/shared/components/demo/Accordion.astro b/shared/components/demo/Accordion.astro index e4778212f..d415346c0 100644 --- a/shared/components/demo/Accordion.astro +++ b/shared/components/demo/Accordion.astro @@ -34,16 +34,16 @@ const accordionClasses = ['accordion', ...types.map((t) => `accordion-${t}`)].jo

      diff --git a/shared/components/forms/FormElements1.astro b/shared/components/forms/FormElements1.astro index 2ec4945c1..f743d1653 100644 --- a/shared/components/forms/FormElements1.astro +++ b/shared/components/forms/FormElements1.astro @@ -18,7 +18,7 @@ const states = (selects as { states: { options: Record - + @@ -139,7 +139,15 @@ const states = (selects as { states: { options: Record
      - ? +
      diff --git a/shared/components/forms/FormElements2.astro b/shared/components/forms/FormElements2.astro index 067f476e4..6a6ef218c 100644 --- a/shared/components/forms/FormElements2.astro +++ b/shared/components/forms/FormElements2.astro @@ -68,7 +68,7 @@ import InputGroup from '@ui/InputGroup.astro' - + @@ -103,7 +103,7 @@ import InputGroup from '@ui/InputGroup.astro'
      - +
      diff --git a/shared/components/forms/FormElements4.astro b/shared/components/forms/FormElements4.astro index b570c563d..d0f440c37 100644 --- a/shared/components/forms/FormElements4.astro +++ b/shared/components/forms/FormElements4.astro @@ -236,13 +236,13 @@ import Avatar from '@ui/Avatar.astro' - + - + - + - + @@ -252,9 +252,9 @@ import Avatar from '@ui/Avatar.astro' - + - +
      @@ -277,15 +277,15 @@ import Avatar from '@ui/Avatar.astro' - + - + - + - + - + @@ -296,13 +296,13 @@ import Avatar from '@ui/Avatar.astro' - + - + - + - +
      diff --git a/shared/components/modals/SignatureModalContent.astro b/shared/components/modals/SignatureModalContent.astro index 2bb2b8fdc..806d0d89e 100644 --- a/shared/components/modals/SignatureModalContent.astro +++ b/shared/components/modals/SignatureModalContent.astro @@ -10,7 +10,7 @@ import Signature from '@ui/Signature.astro'
      Confirm transfer Please confirm the transfer of funds by signing below. - +
      @@ -21,6 +21,6 @@ import Signature from '@ui/Signature.astro'
      - - + +
      diff --git a/shared/components/navbar/Navbar.astro b/shared/components/navbar/Navbar.astro index d4ff6c0f5..3476ff4bf 100644 --- a/shared/components/navbar/Navbar.astro +++ b/shared/components/navbar/Navbar.astro @@ -120,6 +120,7 @@ const headerClass = [ +
      )}
      diff --git a/shared/components/navbar/NavbarSearch.astro b/shared/components/navbar/NavbarSearch.astro index 5f2395a58..c9ea2e9e7 100644 --- a/shared/components/navbar/NavbarSearch.astro +++ b/shared/components/navbar/NavbarSearch.astro @@ -12,7 +12,7 @@ const { class: className } = Astro.props
      - +
      diff --git a/shared/components/navbar/SidebarUser.astro b/shared/components/navbar/SidebarUser.astro index 52497bfd1..ae46851e8 100644 --- a/shared/components/navbar/SidebarUser.astro +++ b/shared/components/navbar/SidebarUser.astro @@ -19,10 +19,10 @@ const person = requireIndex(people, personId - 1)
    • - +
      {person.full_name}
      {person.job_title}
      - +
      Profile diff --git a/shared/components/parts/NavAside.astro b/shared/components/parts/NavAside.astro index fd84b7437..98e4c976e 100644 --- a/shared/components/parts/NavAside.astro +++ b/shared/components/parts/NavAside.astro @@ -61,7 +61,7 @@ const tags = ['business', 'evening', 'leisure', 'party'] Shipping
      - @@ -71,7 +71,7 @@ const tags = ['business', 'evening', 'leisure', 'party']
      -
      diff --git a/shared/ui/Alert.astro b/shared/ui/Alert.astro index 4ffb2fbb9..6ecd8c4be 100644 --- a/shared/ui/Alert.astro +++ b/shared/ui/Alert.astro @@ -1,4 +1,5 @@ --- +import type { HTMLTag } from 'astro/types' import Icon from './Icon.astro' /** alert-{color} — matches defaultIcons below */ @@ -11,6 +12,8 @@ interface Props { showClose?: boolean class?: string title?: string + /** heading level for the title; match it to the surrounding context */ + titleAs?: HTMLTag description?: string list?: string[] action?: string @@ -19,7 +22,7 @@ interface Props { [key: string]: unknown } -const { color = 'success', variant, showClose, class: className, title, description, list, action, link, ...rest } = Astro.props +const { color = 'success', variant, showClose, class: className, title, titleAs: Title = 'h3', description, list, action, link, ...rest } = Astro.props const defaultIcons: Record = { success: 'check', @@ -38,7 +41,7 @@ const classes = ['alert', variant && `alert-${variant}`, `alert-${color}`, showC description || list ? (
      {/* set:html preserves entities like … in the title */} - {title &&

      } + {title && } <div class="alert-description"> <Fragment set:html={description ?? ''} /> {list && list.length > 0 && ( diff --git a/shared/ui/Avatar.astro b/shared/ui/Avatar.astro index e99268338..d38fb0f94 100644 --- a/shared/ui/Avatar.astro +++ b/shared/ui/Avatar.astro @@ -51,5 +51,7 @@ const classes = ['avatar', size && `avatar-${size}`, className, shape && `avatar --- <El {...linkAttrs} class:list={classes} style={src ? `background-image: url(${base}/${src})` : undefined} {...rest} - >{status && <span class={`badge bg-${status}`} aria-label={statusLabel ?? status} />}{brand && <span class="avatar-brand" style={`background-image: url(${base}/static/brands/${brand}.svg);`} />}{src ? null : placeholder ? placeholder : icon ? <Icon name={icon} /> : <Icon name="user" />}</El + >{status && <span class={`badge bg-${status}`} role={statusLabel ? 'img' : undefined} aria-label={statusLabel} />}{brand && <span class="avatar-brand" style={`background-image: url(${base}/static/brands/${brand}.svg);`} />}{ + src ? null : placeholder ? placeholder : icon ? <Icon name={icon} /> : <Icon name="user" /> + }</El > diff --git a/shared/ui/Button.astro b/shared/ui/Button.astro index 7cdfff600..ae3471bf1 100644 --- a/shared/ui/Button.astro +++ b/shared/ui/Button.astro @@ -47,7 +47,7 @@ const Element = element ?? (href && !isAction ? 'a' : 'button') const resolvedHref = Element === 'a' ? href : undefined const resolvedType = Element === 'button' ? (type ?? 'button') : undefined -const classes = ['btn', color ? `btn-${variant ? `${variant}-` : ''}${color}` : variant && `btn-${variant}`, size && size !== 'md' && `btn-${size}`, className, block && 'w-100', iconOnly && 'btn-icon', loading && 'btn-loading'] +const classes = ['btn', color ? `btn-${variant ? `${variant}-` : ''}${color}` : variant && `btn-${variant}`, size && size !== 'md' && `btn-${size}`, className, block && 'w-100', iconOnly && 'btn-icon', loading && 'btn-loading', Element === 'a' && disabled && 'disabled'] --- <Element @@ -62,6 +62,8 @@ const classes = ['btn', color ? `btn-${variant ? `${variant}-` : ''}${color}` : aria-label={iconOnly ? text : undefined} data-bs-dismiss={dismiss ? 'modal' : undefined} disabled={Element === 'button' && disabled ? true : undefined} + aria-disabled={Element === 'a' && disabled ? 'true' : undefined} + tabindex={Element === 'a' && disabled ? -1 : undefined} {...rest} > {icon && <Icon name={icon} color={iconColor} />} diff --git a/shared/ui/Dropzone.astro b/shared/ui/Dropzone.astro index 352a77874..0c0d73347 100644 --- a/shared/ui/Dropzone.astro +++ b/shared/ui/Dropzone.astro @@ -1,4 +1,5 @@ --- +import type { HTMLTag } from 'astro/types' import CaptureScript from '../components/CaptureScript.astro' interface Props { id: string @@ -6,9 +7,11 @@ interface Props { custom?: boolean text?: string description?: string + /** heading level for the custom message title; match it to the surrounding context */ + titleAs?: HTMLTag } -const { id, multiple, custom, text, description } = Astro.props +const { id, multiple, custom, text, description, titleAs: Title = 'h3' } = Astro.props const label = 'Upload file' const dropzoneId = `dropzone-${id}` @@ -16,7 +19,7 @@ const dropzoneSelector = `#dropzone-${id}` const fileInputId = `${dropzoneId}-file` --- -<form class="dropzone" id={dropzoneId} action="./" autocomplete="off" novalidate tabindex="0" role="button" aria-label="Click or drag files to upload"> +<form class="dropzone" id={dropzoneId} action="./" autocomplete="off" novalidate> <div class="fallback"> <label class="visually-hidden" for={fileInputId}>{label}</label> <input id={fileInputId} name="file" type="file" multiple={multiple ? '' : undefined} /> @@ -24,7 +27,7 @@ const fileInputId = `${dropzoneId}-file` { custom && ( <div class="dz-message"> - <h3>{text}</h3> + <Title>{text} {description}

      ) @@ -40,12 +43,18 @@ const fileInputId = `${dropzoneId}-file` const instance = new Dropzone(dropzoneSelector) window.tabler_dropzone[dropzoneId] = instance - // Dropzone.js is click/drag-only by default: it binds a click handler on the whole - // element but never wires a keyboard equivalent. Since the element is now focusable - // (role="button" + tabindex="0"), forward Enter/Space to a programmatic click on - // Dropzone's own hidden file input so keyboard users can open the file picker too. + // Dropzone.js hides the .fallback label/input once it initializes, which is why + // role="button" + tabindex only get added here rather than in the static markup — + // adding them upfront would nest one focusable control (the fallback input) inside + // another (this "button"). Dropzone.js is also click/drag-only by default: it binds + // a click handler on the whole element but never wires a keyboard equivalent, so + // forward Enter/Space to a programmatic click on Dropzone's own hidden file input. // Note: that input is appended to (hiddenInputContainer default), not inside // dropzoneEl, so it must be reached via the instance rather than a DOM query here. + dropzoneEl?.setAttribute('role', 'button') + dropzoneEl?.setAttribute('tabindex', '0') + dropzoneEl?.setAttribute('aria-label', 'Click or drag files to upload') + dropzoneEl?.addEventListener('keydown', (event) => { if (event.target !== dropzoneEl) return if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') return diff --git a/shared/ui/ListGroupItem.astro b/shared/ui/ListGroupItem.astro index 0b48eff2e..d62588d7f 100644 --- a/shared/ui/ListGroupItem.astro +++ b/shared/ui/ListGroupItem.astro @@ -18,6 +18,6 @@ interface Props extends PolymorphicProps { const { as: Element = 'div', action, active, disabled, class: className, ...rest }: Props = Astro.props --- - + diff --git a/shared/ui/Progress.astro b/shared/ui/Progress.astro index 143f55eab..1ebd590b0 100644 --- a/shared/ui/Progress.astro +++ b/shared/ui/Progress.astro @@ -35,7 +35,7 @@ const classes = ['progress', size && `progress-${size}`, className] indeterminate ? (
      ) : valueList ? ( - valueList.map((v, i) =>
      ) + valueList.map((v, i) =>
      ) ) : (
      {showValue ? `${percentage}%` : } diff --git a/shared/ui/Sparkline.astro b/shared/ui/Sparkline.astro index a64a0255d..523a0d881 100644 --- a/shared/ui/Sparkline.astro +++ b/shared/ui/Sparkline.astro @@ -65,5 +65,6 @@ const classes = ['sparkline', size && `sparkline-${size}`, (square || isCircle) data-bs-animation={animation} data-bs-width={isCircle ? 40 : undefined} data-bs-height={isCircle ? 40 : undefined} + role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel} {...rest}> diff --git a/shared/ui/form/InputIcon.astro b/shared/ui/form/InputIcon.astro index c241618a1..7f740e2a6 100644 --- a/shared/ui/form/InputIcon.astro +++ b/shared/ui/form/InputIcon.astro @@ -6,15 +6,17 @@ interface Props { class?: string prepend?: boolean type?: string + name?: string value?: string rounded?: boolean ariaLabel?: string readonly?: boolean placeholder?: string loader?: boolean + autocomplete?: string } -const { icon = 'search', class: className, prepend, type = 'text', value = '', rounded, ariaLabel, readonly, placeholder = 'Search…', loader } = Astro.props +const { icon = 'search', class: className, prepend, type = 'text', name, value = '', rounded, ariaLabel, readonly, placeholder = 'Search…', loader, autocomplete } = Astro.props const wrapperClass = ['input-icon', className] const addonClass = ['input-icon-addon'] @@ -22,7 +24,7 @@ const controlClass = ['form-control', rounded && 'form-control-rounded'] ---
      - {prepend && {loader ?
      • {invoice.price} - +
      - +