Incorrect use of aria-hidden with LabIcon in launcher

[krassowski]

Description

The notebook/console/other icons in Launcher sections have aria-hidden defined in:

jupyterlab/packages/launcher/src/widget.tsx

Lines 171 to 180 in 62dcce8

	<div className="jp-Launcher-section" key={cat}>
	<div className="jp-Launcher-sectionHeader">
	<LabIcon.resolveReact
	icon={icon}
	iconClass={classes(iconClass, 'jp-Icon-cover')}
	stylesheet="launcherSection"
	aria-hidden="true"
	/>
	<h2 className="jp-Launcher-sectionTitle">{cat}</h2>
	</div>

But this is incorrect and does not achieve the intended result because these attributes are passed to style, not the node:

Reproduce

Expected behavior

aria-hidden is defined in a such a way that it is set on the HTML node.

Context

• JupyterLab version: 4.2.0a1

The aria-hidden was introduced in #15265 (CC @j264415)

[krassowski]

If we want to allow passing aria-hidden, we should explicitly unpack these from props here:

jupyterlab/packages/ui-components/src/icon/labicon.tsx

Lines 455 to 499 in bbf6ccf

	const {
	className,
	container,
	label,
	title,
	tag = 'div',
	...styleProps
	}: LabIcon.IProps = { ...this._props, ...props };
	// set up component state via useState hook
	const [, setId] = React.useState(this._uuid);
	// subscribe to svg replacement via useEffect hook
	React.useEffect(() => {
	const onSvgReplaced = () => {
	setId(this._uuid);
	};
	this._svgReplaced.connect(onSvgReplaced);
	// specify cleanup callback as hook return
	return () => {
	this._svgReplaced.disconnect(onSvgReplaced);
	};
	});
	// make it so that tag can be used as a jsx component
	const Tag = tag ?? React.Fragment;
	// ensure that svg html is valid
	if (!(this.svgInnerHTML && this.svgReactAttrs)) {
	// bail if failing silently
	return <></>;
	}
	const svgComponent = (
	<svg
	{...this.svgReactAttrs}
	dangerouslySetInnerHTML={{ __html: this.svgInnerHTML }}
	ref={ref}
	/>
	);
	if (container) {
	Private.initContainer({ container, className, styleProps, title });

as currently everything other than className, container, label, title and tag goes to styleProps. We should also add proper typing typing for it. Currently these props inherit from typestyle's NestedCSSProperties:

jupyterlab/packages/ui-components/src/style/icon.ts

Line 133 in bbf6ccf

export interface IProps extends NestedCSSProperties, ISheetOptions {

jupyterlab/packages/ui-components/src/style/icon.ts

Line 5 in bbf6ccf

import { NestedCSSProperties } from 'typestyle/lib/types';

which ironically does not check if the keys are valid style keys, it just defines them as string, also see typestyle/typestyle#276.

Maybe we should deprecate LabIcon.resolveReact and add a new version of this method which would only allow valid HTML attributes, and would not pass styles at all (so that we can remove typestyle dependency in the future altogether).