Enhance CodeTabs tab naming

[canerakdas]

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-components package and indirectly affects doc-kit as well, it should also cover scenarios like ESM (2), CJS (2), JS etc.

The design can be reviewed in Figma (apologies in advance for my terrible Figma skills 😅).

[naveenkarmegam]

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 ?

[avivkeller]

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]

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?

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]

Ahhh, I see. So, to clarify, we are putting the language in a secondary label if a custom displayTitle is specified

[ovflowd]

Ahhh, I see. So, to clarify, we are putting the language in a secondary label if a custom displayTitle is specified

I guess? It really depends on implementation, hence why I'm unsure if #8552 is actually a proper solution implementation-wise.