Resolve some accessibility issues.

renderers/angular/src/lib/catalog/default.ts

@@ -61,6 +61,7 @@ export const DEFAULT_CATALOG: Catalog = {
       return [
         inputBinding('url', () => properties.url),
         inputBinding('usageHint', () => properties.usageHint),
+        inputBinding('altText', () => properties.altText ?? null),
       ];
     },
   },

renderers/angular/src/lib/catalog/icon.ts

@@ -20,6 +20,10 @@ import * as Primitives from '@a2ui/web_core/types/primitives';
 
 @Component({
   selector: 'a2ui-icon',
+  host: {
+    'aria-hidden': 'true',
+    tabindex: '-1',
+  },
   changeDetection: ChangeDetectionStrategy.Eager,
   styles: `
     :host {

renderers/angular/src/lib/catalog/image.ts

@@ -40,19 +40,25 @@ import { DynamicComponent } from '../rendering/dynamic-component';
   `,
   template: `
     @let resolvedUrl = this.resolvedUrl();
+    @let resolvedAltText = this.resolvedAltText();
 
     @if (resolvedUrl) {
       <section [class]="classes()" [style]="theme.additionalStyles?.Image">
-        <img [src]="resolvedUrl" />
+        <img [src]="resolvedUrl" [alt]="resolvedAltText" />
       </section>
     }
   `,
 })
 export class Image extends DynamicComponent {
   readonly url = input.required<Primitives.StringValue | null>();
   readonly usageHint = input.required<Types.ResolvedImage['usageHint'] | null>();
+  readonly altText = input.required<Primitives.StringValue | null>();
 
   protected readonly resolvedUrl = computed(() => this.resolvePrimitive(this.url()));
+  protected readonly resolvedAltText = computed(() => {
+    const raw = this.altText();
+    return (raw ? this.resolvePrimitive(raw) : null) ?? '';
+  });
 
   protected classes = computed(() => {
     const usageHint = this.usageHint();

renderers/web_core/src/v0_8/types/components.ts

@@ -59,6 +59,7 @@ export interface Image {
     | "largeFeature"
     | "header";
   fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+  altText?: StringValue;
 }
 
 export interface Icon {