Skip to content

docs: hide placeholder select options from assistive tech #42739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hashim1999164 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: hide placeholder select options from assistive tech #42739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions js/tests/visual/floating-label.html
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions site/src/assets/examples/cheatsheet-rtl/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<div class="mb-3">
<label for="exampleSelect" class="form-label">قائمة اختيار</label>
<select class="form-select" id="exampleSelect">
<option selected>افتح قائمة الاختيار هذه</option>
<option selected aria-hidden="true">افتح قائمة الاختيار هذه</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
Expand Down Expand Up @@ -451,7 +451,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</div>
<div class="mb-3">
<select class="form-select form-select-lg" aria-label=".form-select-lg مثال">
<option selected>افتح قائمة الاختيار هذه</option>
<option selected aria-hidden="true">افتح قائمة الاختيار هذه</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
Expand All @@ -468,7 +468,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</div>
<div class="mb-3">
<select class="form-select form-select-sm" aria-label=".form-select-sm مثال">
<option selected>افتح قائمة الاختيار هذه</option>
<option selected aria-hidden="true">افتح قائمة الاختيار هذه</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
Expand Down Expand Up @@ -577,7 +577,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<div class="col-md-3">
<label for="validationServer04" class="form-label">حالة</label>
<select class="form-select is-invalid" id="validationServer04" required>
<option selected disabled value="">اختر...</option>
<option selected disabled value="" aria-hidden="true">اختر...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Expand Down
8 changes: 4 additions & 4 deletions site/src/assets/examples/cheatsheet/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ export const body_class = 'bg-body-tertiary'
<div class="mb-3">
<label for="exampleSelect" class="form-label">Select menu</label>
<select class="form-select" id="exampleSelect">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down Expand Up @@ -433,7 +433,7 @@ export const body_class = 'bg-body-tertiary'
</div>
<div class="mb-3">
<select class="form-select form-select-lg" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -449,7 +449,7 @@ export const body_class = 'bg-body-tertiary'
</div>
<div class="mb-3">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down Expand Up @@ -558,7 +558,7 @@ export const body_class = 'bg-body-tertiary'
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" required>
<option selected disabled value="">Choose...</option>
<option selected disabled value="" aria-hidden="true">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Expand Down
6 changes: 3 additions & 3 deletions site/src/content/docs/forms/floating-labels.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Other than `.form-control`, floating labels are only available on `.form-select`

<Example code={`<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -83,7 +83,7 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down Expand Up @@ -143,7 +143,7 @@ When working with the Bootstrap grid system, be sure to place form elements with
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down
8 changes: 4 additions & 4 deletions site/src/content/docs/forms/input-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ Input groups include support for custom selects and custom file inputs. Browser
<Example code={`<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -248,7 +248,7 @@ Input groups include support for custom selects and custom file inputs. Browser

<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -259,7 +259,7 @@ Input groups include support for custom selects and custom file inputs. Browser
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -268,7 +268,7 @@ Input groups include support for custom selects and custom file inputs. Browser

<div class="input-group">
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down
8 changes: 4 additions & 4 deletions site/src/content/docs/forms/layout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ More complex layouts can also be created with the grid system.
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option>...</option>
</select>
</div>
Expand Down Expand Up @@ -214,7 +214,7 @@ The example below uses a flexbox utility to vertically center the contents and c
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down Expand Up @@ -250,7 +250,7 @@ You can then remix that once again with size-specific column classes.
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down Expand Up @@ -285,7 +285,7 @@ Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option selected aria-hidden="true">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down
12 changes: 6 additions & 6 deletions site/src/content/docs/forms/select.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ toc: true
Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>`s due to browser limitations.

<Example code={`<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
Comment on lines 9 to 14

@greptile-apps greptile-apps Bot Jul 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 aria-hidden on <option> has inconsistent AT support

Screen readers on Windows (NVDA, JAWS) traditionally access native <select> elements through OS-level accessibility APIs (IAccessible2/UIA) rather than the ARIA accessibility tree. The degree to which those APIs propagate aria-hidden on individual <option> children varies by browser/AT pairing. There's real risk that the attribute is silently ignored by major screen readers in practice, leaving the documentation teaching a pattern that may not behave as described. A more broadly supported technique for a non-selectable placeholder is disabled hidden value="" on the <option>, which signals non-selectability at the HTML level rather than relying on ARIA propagation through a native OS widget. This applies across every changed file in this PR.

@Hashim1999164 Hashim1999164 Jul 26, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair point on the uneven AT support. The intent here is only to stop the placeholder from being read out as a real choice in the options list; visual rendering is unchanged. If the team prefers, I can scope this down to the select.mdx examples only, or drop it entirely in favor of documenting the disabled+hidden placeholder pattern instead. Happy to go either way.

<option value="3">Three</option>
Expand All @@ -20,14 +20,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
You may also choose from small and large custom selects to match our similarly sized text inputs.

<Example code={`<select class="form-select form-select-lg mb-3" aria-label="Large select example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<select class="form-select form-select-sm" aria-label="Small select example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -36,7 +36,7 @@ You may also choose from small and large custom selects to match our similarly s
The `multiple` attribute is also supported:

<Example code={`<select class="form-select" multiple aria-label="Multiple select example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -45,7 +45,7 @@ The `multiple` attribute is also supported:
As is the `size` attribute:

<Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand All @@ -56,7 +56,7 @@ As is the `size` attribute:
Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.

<Example code={`<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option>
<option selected aria-hidden="true">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
Expand Down
8 changes: 4 additions & 4 deletions site/src/content/docs/forms/validation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option selected disabled value="" aria-hidden="true">Choose...</option>
<option>...</option>
Comment on lines 69 to 73

@greptile-apps greptile-apps Bot Jul 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 aria-hidden on the currently-selected option may suppress value announcement

In these validation examples the placeholder option is both selected and the current value of the control. When AT focuses the <select>, it typically announces the currently selected option text. If that option is aria-hidden="true" and the browser does propagate the attribute, AT would have nothing to announce as the current value — users would know they're on a select control but not what it currently says. The disabled value="" already present on these options communicates non-selectability at the HTML level; the additional aria-hidden is both redundant and potentially harmful to the value-announcement flow.

@Hashim1999164 Hashim1999164 Jul 26, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is the stronger concern, since the placeholder is also the current value here and hiding it could leave the control announcing nothing on focus. I can revert the validation.mdx changes so aria-hidden is only used where the placeholder is not the selected value, if that is the direction the team wants.

</select>
<div class="invalid-feedback">
Expand Down Expand Up @@ -130,7 +130,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
<div class="col-md-3">
<label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option selected disabled value="" aria-hidden="true">Choose...</option>
<option>...</option>
</select>
</div>
Expand Down Expand Up @@ -194,7 +194,7 @@ To fix [issues with border radius](https://github.com/twbs/bootstrap/issues/2511
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option selected disabled value="" aria-hidden="true">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Expand Down Expand Up @@ -316,7 +316,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option selected disabled value="" aria-hidden="true">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Expand Down