Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-08 05:30:08 +04:00
Code Issues Projects Releases Wiki Activity

Accessibility and semantic improvements (#2488)

Browse Source
This commit is contained in:
Paweł Kuna
2025-09-17 16:34:36 +02:00
committed by GitHub
parent 736e60408b
commit 596237e8cc
24 changed files with 174 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
preview/pages/form-layout.html
View File

@@ -21,20 +21,24 @@ page-libs: [litepicker]
<form class="space-y">
<div class="row">
<div class="col-6">
<input type="text" placeholder="Name" class="form-control" />
<label class="form-label visually-hidden" for="basic-name">Name</label>
<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
</div>
<div class="col-6">
<input type="email" placeholder="Email address" class="form-control" />
<label class="form-label visually-hidden" for="basic-email">Email address</label>
<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
</div>
</div>
<div>
<input type="password" placeholder="Password" class="form-control" />
<label class="form-label visually-hidden" for="basic-password">Password</label>
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
</div>
<div>
<input type="password" placeholder="Confirm Password" class="form-control" />
<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
</div>
<div>
@@ -55,31 +59,31 @@ page-libs: [litepicker]
<form>
<div class="space-y">
<div>
<label class="form-label">
<label class="form-label" for="example-first-name">
First Name
</label>
<input type="text" placeholder="Enter first name" class="form-control">
<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name">
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-last-name">
Last Name
</label>
<input type="text" placeholder="Enter last name" class="form-control">
<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name">
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-email">
Email
</label>
<input type="email" placeholder="Enter email address" class="form-control">
<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email">
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-subject">
Select Subject
</label>
<select class="form-select">
<select class="form-select" id="example-subject" name="subject">
<option>
Option 1
</option>
@@ -96,10 +100,10 @@ page-libs: [litepicker]
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-message">
Message
</label>
<textarea placeholder="Enter your message" rows="6" class="form-control"></textarea>
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
</div>
<div>

4
preview/pages/job-listing.html
View File

@@ -46,9 +46,9 @@ permalink: job-listing.html
<div class="small text-secondary">Only show companies that can sponsor a visa</div>
</div>
<div class="form-label">Location</div>
<label class="form-label" for="job-location">Location</label>
<div class="mb-4">
<select class="form-select">
<select class="form-select" id="job-location" name="location">
<option>Anywhere</option>
<option>London</option>
<option>San Francisco</option>

2
preview/pages/marketing/real-estate.html
View File

@@ -12,7 +12,7 @@ permalink: marketing/real-estate.html
<div class="col-xl-6 col-lg-8 text-center">
<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
<div class="col flex-grow-1">
<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" />
<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" aria-label="Search properties near you" />
</div>
<div class="col"><button type="submit" class="btn btn-teal fw-500">Search</button></div>
</form>

15
preview/pages/settings.html
View File

@@ -19,16 +19,16 @@ permalink: settings.html
<div class="row g-3">
<div class="col-md">
<div class="form-label">Business Name</div>
<input type="text" class="form-control" value="{{ people[0].company }}">
<label class="form-label" for="business-name">Business Name</label>
<input type="text" class="form-control" id="business-name" name="business-name" value="{{ people[0].company }}">
</div>
<div class="col-md">
<div class="form-label">Business ID</div>
<input type="text" class="form-control" value="560afc32">
<label class="form-label" for="business-id">Business ID</label>
<input type="text" class="form-control" id="business-id" name="business-id" value="560afc32">
</div>
<div class="col-md">
<div class="form-label">Location</div>
<input type="text" class="form-control"
<label class="form-label" for="location">Location</label>
<input type="text" class="form-control" id="location" name="location"
value="{{ people[0].city }}, {{ people[0].country }}">
</div>
</div>
@@ -39,7 +39,8 @@ permalink: settings.html
<div>
<div class="row g-2">
<div class="col-auto">
<input type="text" class="form-control w-auto" value="{{ people[0].email }}">
<label for="email" class="form-label visually-hidden">Email</label>
<input type="text" class="form-control w-auto" id="email" name="email" value="{{ people[0].email }}">
</div>
<div class="col-auto">{% include "ui/button.html" text="Change" %}</div>
</div>

9
preview/pages/signatures.html
View File

@@ -66,12 +66,12 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
<p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
<form action="">
<div class="mb-3">
<label class="form-label required">First name</label>
<input type="text" class="form-control" />
<label class="form-label required" for="signature-first-name">First name</label>
<input type="text" class="form-control" id="signature-first-name" name="first_name" />
</div>
<div class="mb-3">
<label class="form-label required">Last name</label>
<input type="text" class="form-control" />
<label class="form-label required" for="signature-last-name">Last name</label>
<input type="text" class="form-control" id="signature-last-name" name="last_name" />
</div>
<div class="mb-3">
<label class="form-label required">Signature</label>
@@ -105,6 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
<div class="mt-4">
<div class="row">
<div class="col">
<label for="signature-advanced-color" class="form-label visually-hidden">Pen color</label>
<input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
</div>
<div class="col">