Skip to content

Commit

Permalink
fix(forms): add required info in mandatory input fields with visually…
Browse files Browse the repository at this point in the history 
… hidden span (#2114)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
  • Loading branch information
@MewenLeHo @julien-deramond
MewenLeHo and julien-deramond authored Aug 24, 2023
1 parent 7b34125 commit 851a0e3
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 40 deletions.
18 changes: 9 additions & 9 deletions site/content/docs/5.3/examples/form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ <h1 class="display-1">Become a reseller</h1>
</p>
</div>
<div class="col-sm-4 col-md-6 mb-3">
<label for="selectTitle" id="selectTitleLabel" class="form-label is-required">Title</label>
<label for="selectTitle" id="selectTitleLabel" class="form-label is-required">Title<span class="visually-hidden"> (required)</span></label>
<select class="form-select" id="selectTitle" aria-labelledby="selectTitleLabel selectTitleFeedback" autocomplete="sex" required>
<option selected disabled value="" aria-hidden="true">Select a title</option>
<option value="1">Miss</option>
Expand All @@ -111,7 +111,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
<div class="col-12">
<div class="mb-3">
<label for="firstName" id="firstNameLabel" class="form-label is-required">First name</label>
<label for="firstName" id="firstNameLabel" class="form-label is-required">First name<span class="visually-hidden"> (required)</span></label>
<input type="text" class="form-control" id="firstName" aria-labelledby="firstNameLabel firstNameFeedback" autocomplete="given-name" required>
<div class="valid-feedback">
Looks good!
Expand All @@ -121,7 +121,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="lastName" id="lastNameLabel" class="form-label is-required">Last name</label>
<label for="lastName" id="lastNameLabel" class="form-label is-required">Last name<span class="visually-hidden"> (required)</span></label>
<input type="text" class="form-control" id="lastName" aria-labelledby="lastNameLabel lastNameFeedback" autocomplete="family-name" required>
<div class="valid-feedback">
Looks good!
Expand All @@ -131,7 +131,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="email" id="emailLabel" class="form-label is-required">Email</label>
<label for="email" id="emailLabel" class="form-label is-required">Email<span class="visually-hidden"> (required)</span></label>
<input type="email" class="form-control" id="email" aria-labelledby="emailLabel emailFeedback" autocomplete="email" required>
<div class="valid-feedback">
Looks good!
Expand All @@ -141,7 +141,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="country" id="countryLabel" class="form-label is-required">Country</label>
<label for="country" id="countryLabel" class="form-label is-required">Country<span class="visually-hidden"> (required)</span></label>
<select class="form-select" id="country" aria-labelledby="countryLabel countryFeedback" autocomplete="country-name" required>
<option selected disabled value="" aria-hidden="true">Select a country</option>
<option value="1">Australia</option>
Expand All @@ -157,7 +157,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="company" id="companyLabel" class="form-label is-required">Name of company</label>
<label for="company" id="companyLabel" class="form-label is-required">Name of company<span class="visually-hidden"> (required)</span></label>
<input type="text" class="form-control" id="company" aria-labelledby="companyLabel companyFeedback" required>
<div class="valid-feedback">
Looks good!
Expand All @@ -167,7 +167,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="business" id="businessLabel" class="form-label is-required">Business type</label>
<label for="business" id="businessLabel" class="form-label is-required">Business type<span class="visually-hidden"> (required)</span></label>
<select class="form-select" id="business" aria-labelledby="businessLabel businessFeedback" required>
<option selected disabled value="" aria-hidden="true">Select a type</option>
<option value="1">Corporation</option>
Expand All @@ -183,7 +183,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="website" id="websiteLabel" class="form-label">Website</label>
<label for="website" id="websiteLabel" class="form-label">Website<span class="visually-hidden"> (required)</span></label>
<input type="text" class="form-control" id="website" aria-labelledby="websiteLabel websiteFeedback">
<div class="valid-feedback">
Looks good!
Expand All @@ -193,7 +193,7 @@ <h1 class="display-1">Become a reseller</h1>
</div>
</div>
<div class="mb-3">
<label for="message" id="messageLabel" class="form-label is-required">Message</label>
<label for="message" id="messageLabel" class="form-label is-required">Message<span class="visually-hidden"> (required)</span></label>
<button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for text area">
<span class="visually-hidden">Helper for text area</span>
</button>
Expand Down
13 changes: 9 additions & 4 deletions site/content/docs/5.3/forms/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,23 +102,28 @@ Use the `.is-disabled` class on `label` to make it appear lighter too.

Use the `.is-required` class on `label` to add a `*` symbol after it.

{{< callout info >}}
The `*` symbol is actually inserted via CSS in a `::after` pseudo-element. Unfortunately CSS generated content is not well supported by all assistive technologies and/or browsers.
That is why mandatory input fields require an additional `<span class="visually-hidden"> (required)</span>` element added inside corresponding labels to ensure correct restitution by assistive technologies like screen readers.
{{< /callout >}}

{{< example >}}
<form>
<fieldset>
<div class="mb-3">
<label for="requiredTextInput" class="form-label is-required">Required input</label>
<label for="requiredTextInput" class="form-label is-required">Required input<span class="visually-hidden"> (required)</span></label>
<input type="text" id="requiredTextInput" class="form-control" placeholder="Required input" required>
</div>
<div class="mb-3">
<label for="requiredSelect" class="form-label is-required">Required select menu</label>
<label for="requiredSelect" class="form-label is-required">Required select menu<span class="visually-hidden"> (required)</span></label>
<select id="requiredSelect" class="form-select" required>
<option value="">Required select</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="requiredFieldsetCheck" required>
<label class="form-check-label" for="requiredFieldsetCheck">Must check this</label>
<label class="form-check-label" for="requiredFieldsetCheck">Must check this<span class="visually-hidden"> (required)</span></label>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
Expand All @@ -143,7 +148,7 @@ This form helper should be displayed right after the label.
<input type="text" id="tooltipTextInput" class="form-control" placeholder="Tooltip input">
</div>
<div>
<label for="tooltipSelect" class="form-label is-required mt-3">Select menu with helper inside a Tooltip</label>
<label for="tooltipSelect" class="form-label is-required mt-3">Select menu with helper inside a Tooltip<span class="visually-hidden"> (required)</span></label>
<button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for select menu">
<span class="visually-hidden">Helper for select menu</span>
</button>
Expand Down
Loading

0 comments on commit 851a0e3

Please sign in to comment.