Can the ChangeHistory component adjust the label rendering logic or the passed value?

Enter your suggestions in details:

If the label is passed a string, then both aria-label and the content rendered by the div will be plain strings. The special Markdown formatting within the div will not be rendered correctly. If the label is passed a JSX object, the div will render correctly, but the aria-label attribute will display [object Object].

nodejs.org/packages/ui-components/src/Common/ChangeHistory/index.tsx

Lines 9 to 19 in 147063e

    
           export type HistoryChange = { 
        
             versions: Array<string>; 
        
             label: string; 
        
             url?: string; 
        
           }; 
        
           type ChangeHistoryProps = ComponentProps<'div'> & { 
        
             label: string; 
        
             changes: Array<HistoryChange>; 
        
             as?: LinkLike; 
        
           };

nodejs.org/packages/ui-components/src/Common/ChangeHistory/index.tsx

Lines 46 to 58 in 147063e

    
           <MenuItem 
        
             key={change.label} 
        
             className={styles.dropdownItem} 
        
             role="menuitem" 
        
             tabIndex={0} 
        
             aria-label={`${change.label}: ${change.versions.join(', ')}`} 
        
             href={change.url} 
        
           > 
        
             <div className={styles.dropdownLabel}>{change.label}</div> 
        
             <div className={styles.dropdownVersions}> 
        
               {change.versions.join(', ')} 
        
             </div> 
        
           </MenuItem>

The doc-kit previously fixed the aria-label rendering issue using nodejs/doc-kit#1034. However, it wasn't completely resolved; currently, Markdown formatting is not rendered correctly within divs.

@avivkeller

It seems that #9115 has solved the problem. cc @avivkeller

it's accept react value now but need to transform first nodejs/doc-kit#1049

I noticed that too. Good job. 👍

Yep! Great minds think alike :-) this is on my list of things to do. After changing the component to accept a node I'll fix the remaining parts in doc kit

Navigation Menu

Repository navigation

Can the `ChangeHistory` component adjust the label rendering logic or the passed value? #9114

Enter your suggestions in details:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	export type HistoryChange = {
	versions: Array<string>;
	label: string;
	url?: string;
	};

	type ChangeHistoryProps = ComponentProps<'div'> & {
	label: string;
	changes: Array<HistoryChange>;
	as?: LinkLike;
	};

	<MenuItem
	key={change.label}
	className={styles.dropdownItem}
	role="menuitem"
	tabIndex={0}
	aria-label={`${change.label}: ${change.versions.join(', ')}`}
	href={change.url}
	>
	<div className={styles.dropdownLabel}>{change.label}</div>
	<div className={styles.dropdownVersions}>
	{change.versions.join(', ')}
	</div>
	</MenuItem>

Can the ChangeHistory component adjust the label rendering logic or the passed value? #9114

Description

Enter your suggestions in details:

Activity

btea commented on Aug 22, 2026

AugustinMauroy commented on Aug 22, 2026

btea commented on Aug 22, 2026

avivkeller commented on Aug 22, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Can the `ChangeHistory` component adjust the label rendering logic or the passed value? #9114