feat(accessibility): Implement Issue 1410: Add accessibility attributes to A2UI components

[josemontespg]

What

This PR implements accessibility attribute mapping for the basic catalog components: Button, Image, TextField, Card, and Text.
Specifically, it maps:

• aria-label (mapped from label)
• aria-describedby (mapped from description)
• role (mapped from role inside accessibility)

It updates both Lit and Angular renderers:

• Lit components are updated using setAttribute in the updated() lifecycle or inline template bindings where applicable.
• Angular components are updated using host bindings with signals.

It also adds unit tests for both Lit and Angular to verify the correct attribute mapping.

Why

To address Issue 1410 and ensure that A2UI components render standard ARIA attributes correctly when provided in the component properties.

Effect

Assistive technologies will now be able to read accessibility attributes from these basic components.

[gemini-code-assist]

Code Review

This pull request introduces accessibility attributes, including role, aria-label, and aria-describedby, to basic components (Button, Card, Image, Text, and TextField) in both Angular and Lit renderers, accompanied by schema updates and unit tests. The review feedback suggests using the nullish coalescing operator (??) instead of logical OR (||) for image alt text fallbacks to preserve empty strings for decorative images. Additionally, it recommends refactoring the Angular Button and TextField components to use a computed accessibility signal to avoid duplicate lookups and maintain consistency.

[gemini-code-assist]

Using the logical OR operator (||) for altText fallback will cause empty strings ("") to be overridden by the fallback descriptions. In HTML/accessibility standards, an empty alt attribute (alt="") is semantically meaningful and indicates a decorative image that screen readers should ignore. Using the nullish coalescing operator (??) preserves empty strings while correctly falling back when the properties are undefined or null.

Suggested change

	readonly altText = computed(() => this.accessibility()?.label || this.accessibility()?.description || this.description());
	readonly altText = computed(() => this.accessibility()?.label ?? this.accessibility()?.description ?? this.description());

[josemontespg]

Done. Implemented using nullish coalescing to preserve empty strings.

[gemini-code-assist]

Using the logical OR operator (||) for altText fallback will cause empty strings ("") to be overridden by the fallback descriptions. In HTML/accessibility standards, an empty alt attribute (alt="") is semantically meaningful and indicates a decorative image that screen readers should ignore. Using the nullish coalescing operator (??) preserves empty strings while correctly falling back when the properties are undefined or null.

Suggested change

	const altText =
	props.accessibility?.label ||
	props.accessibility?.description ||
	props.description ||
	'';
	const altText =
	props.accessibility?.label ??
	props.accessibility?.description ??
	props.description ??
	'';

[josemontespg]

Done. Implemented using nullish coalescing.

[gemini-code-assist]

For consistency with other components (like CardComponent, ImageComponent, and TextComponent) and to avoid duplicate lookups of this.props()['accessibility']?.value(), define a computed accessibility signal and use it to resolve ariaLabel and ariaDescribedBy.

Suggested change

	readonly ariaLabel = computed(() => this.props()['accessibility']?.value()?.label ?? null);
	readonly ariaDescribedBy = computed(() => this.props()['accessibility']?.value()?.description ?? null);
	readonly accessibility = computed(() => this.props()['accessibility']?.value());
	readonly ariaLabel = computed(() => this.accessibility()?.label ?? null);
	readonly ariaDescribedBy = computed(() => this.accessibility()?.description ?? null);

[josemontespg]

Done. Optimized accessibility lookup with a computed signal.

[gemini-code-assist]

For consistency with other components (like CardComponent, ImageComponent, and TextComponent) and to avoid duplicate lookups of this.props()['accessibility']?.value(), define a computed accessibility signal and use it to resolve ariaLabel and ariaDescribedBy.

Suggested change

	readonly ariaLabel = computed(() => this.props()['accessibility']?.value()?.label ?? null);
	readonly ariaDescribedBy = computed(() => this.props()['accessibility']?.value()?.description ?? null);
	readonly accessibility = computed(() => this.props()['accessibility']?.value());
	readonly ariaLabel = computed(() => this.accessibility()?.label ?? null);
	readonly ariaDescribedBy = computed(() => this.accessibility()?.description ?? null);

[josemontespg]

Done. Optimized accessibility lookup with a computed signal.