Repository navigation
Enhance CodeTabs tab naming #8549
Description
The tab naming in our current CodeTabs component isn’t very descriptive and doesn’t clearly indicate that the displayed code is an example. This can be confusing for screen reader users and for people who are new to the ecosystem
Renaming them to something like Example CJS, Example MJS, and displaying the type separately could be more intuitive.
- Since this improvement is implemented in the
ui-componentspackage and indirectly affectsdoc-kitas well, it should also cover scenarios likeESM (2),CJS (2),JSetc.
The design can be reviewed in Figma (apologies in advance for my terrible Figma skills 😅).
Activity
naveenkarmegam commentedon Jan 14, 2026
This makes a lot of sense — the current tab labels aren’t very descriptive, especially for screen readers and for developers who are new to the Node.js ecosystem. Shall i proceed ?
feat(style): update code tab badge styling (nodejs#8549)
avivkeller commentedon Jan 15, 2026
I'm afraid I don't understand this, why should we give every code box the same name (
Example), aren't they assumed to be examples already?ovflowd commentedon Jan 15, 2026
Not every codebox. It allows us to add actual titles to the CodeBoxes and keep the "language tag". Right now in most we're just saying ESM/CJS but that isn't much clear. Imagine if you have a CodeBox with 4 tabs CJS, MJS, CJS, MJS... It becomes confusing what it is. So naming it as Example 1 (CJS), Example 1 (MJS), Example 2 (CJS), Example 2 (MJS) makes it easier to understand.
avivkeller commentedon Jan 15, 2026
Ahhh, I see. So, to clarify, we are putting the language in a secondary label if a custom
displayTitleis specifiedovflowd commentedon Jan 15, 2026
I guess? It really depends on implementation, hence why I'm unsure if #8552 is actually a proper solution implementation-wise.
feat: Improve CodeTabs tab naming (#8552)