The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.Problem/Motivation
The vertical tabs title items (the elements that one clicks to select a tab) use a strong element.
From the HTML spec:
The strong element represents strong importance, seriousness, or urgency for its contents.
That probably doesn't apply to these elements, which seem to be simple labels.
Screenshot of a the first tab at /admin/config/people/accounts, with the corresponding element highlighted in DevTools:
Current markup:
<strong class="vertical-tabs__menu-item-title">... Tab title ...</strong>
Steps to reproduce
- Set Default Admin as the administration theme.
- Go to
/admin/config/people/accounts. - Inspect the vertical tab titles in the browser inspector.
Proposed resolution
Use another element, probably a span.
Remaining tasks
User interface changes
Introduced terminology
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | Screenshot 2026-09-14 at 8.41.12 PM.png | 84.47 KB | smustgrave |
| #10 | Screenshot 2026-09-14 at 8.41.07 PM.png | 89.26 KB | smustgrave |
| vertical-tabs-strong-element-default-admin.png | 96.91 KB | kentr |
Issue fork drupal-3612323
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3612323-do-not-use
changes, plain diff MR !16871
Comments
Comment #2
kentr commentedComment #3
kentr commentedComment #4
mgiffordSo for clarity we are suggesting that we move to:
<span class="vertical-tabs__menu-item-title">... Tab title ...</span>So we'd need to make sure that 'class="vertical-tabs__menu-item-title"' was visually bolded, avoiding the potential accessibility error described here:
I'm not sure how big an issue this is, and if perhaps
<b>might be a better option still:https://accessibility.psu.edu/boldfacehtml/
However it may still likely trigger false positives (depending on how you interpret this WCAG SC).
Comment #5
kentr commentedI believe the bold font weight is already set in CSS, to
575:It should just be a matter of changing the HTML tag.
Comment #6
mgiffordComment #9
luissousa21 commentedMR !16871 changes the
strongelement to aspanincore/themes/default_admin/js/vertical-tabs.js.Confirming @kentr's point in #5 that this is only an HTML tag change, the bold is already set in CSS, so there is no visual difference.
.vertical-tabs__menu-item-titleis a class-only selector carryingfont-weight: var(--admin-font-weight-bold), and--admin-font-weight-bold: 575is defined on:rootincss/_variables/variables-typography.css. I checked the computed value in a browser: it is 575 both before and after the change, because thestrongwas already being overridden to 575 rather than the user agent default of 700.One thing worth flagging for scope. The same
strongelement with classvertical-tabs__menu-item-titleis emitted in two other places:core/misc/vertical-tabs.jscore/themes/claro/js/vertical-tabs.jsNeither of those has a
font-weightrule for.vertical-tabs__menu-item-title. Claro has no rule for that class at all, andcore/misc/vertical-tabs.cssand stable9 only reference it inside:focus,:hoverand.is-selectedselectors. So in those two the bold comes from the user agent default forstrong, and changing the element there without adding afont-weightdeclaration would silently unbold the tab titles.I have left those alone, since this issue sits under #3585823, but they have the same semantic problem and would each need a CSS change alongside. Happy to open a follow-up if that would be useful.
Comment #10
smustgrave commentedSeems as though styling is unchanged so change seems fine.
For another stable9 related since it's been removed already we can open an issue in contrib for it.
Comment #13
amateescu commentedCommitted and pushed de104d38df1 to main and dd7ad22a7fe to 11.x. Thanks!
Let's open the followup for the findings in #9 and link to it here :)