Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !35327
An error occurred while fetching the assigned milestone of the selected merge_request.

floating-labels: remove `aria-label` in the `select` example

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/scottaohara/patch-1 into main 3 years ago
  • Overview 2
  • Commits 2
  • Pipelines 0
  • Changes 1

Created by: scottaohara

removes the aria-label on the floating label select example.

While it is understood that this is just an example, the visible text (label) of "Works with selects" and the aria-label="Floating label select example" created a WCAG 2.5.3 Label in name failure.

As the aria-label isn't necessary here since this select is already provided an accessible name by its label element, removing the unnecessary aria-label seems the best course of action as:

  • removing it solves the WCAG issue
  • it removes the potential implication to developers that they'd even need an aria-label here, let alone indirectly suggesting that it's ok for the visible text and accessible name to be out of alignment
Compare
  • main (base)

and
  • latest version
    42822afd
    2 commits, 2 years ago

1 file
+ 1
- 1

    Preferences

    File browser
    Compare changes
site/content/docs/5.1/forms/floating-labels.md
+ 1
- 1
  • View file @ 42822afd

  • Edit in single-file editor

  • Open in Web IDE


@@ -89,7 +89,7 @@ When working with the Bootstrap grid system, be sure to place form elements with
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference:
Source branch: github/fork/scottaohara/patch-1

Menu

Explore Projects Groups Snippets