fix(Icon): replace title attribute with label

packages/beeq/src/components.d.ts

@@ -443,6 +443,10 @@ export namespace Components {
           * Set the stroke color of the SVG. The value should be a valid value of the palette color
          */
         "color"?: string;
+        /**
+          * Label for the icon, used for accessibility
+         */
+        "label"?: string;
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
@@ -2413,6 +2417,10 @@ declare namespace LocalJSX {
           * Set the stroke color of the SVG. The value should be a valid value of the palette color
          */
         "color"?: string;
+        /**
+          * Label for the icon, used for accessibility
+         */
+        "label"?: string;
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */

packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx

@@ -20,13 +20,15 @@ const meta: Meta = {
   argTypes: {
     icons: { table: { disable: true } },
     color: { control: 'text' },
+    label: { control: 'text' },
     name: { control: 'select', options: [...ICONS_SET] },
     size: { control: 'number' },
     src: { control: 'text' },
     weight: { control: 'select', options: [...ICON_WEIGHT] },
   },
   args: {
     color: 'text--brand',
+    label: undefined,
     size: 24,
     src: undefined,
     weight: 'regular',
@@ -39,6 +41,7 @@ type Story = StoryObj;
 const Template = (args: Args) => html`
   <bq-icon
     color=${ifDefined(args.color)}
+    label=${ifDefined(args.label)}
     name=${ifDefined(args.name)}
     size=${ifDefined(args.size)}
     src=${ifDefined(args.src)}

packages/beeq/src/components/icon/bq-icon.tsx

@@ -32,6 +32,9 @@ export class BqIcon {
   // Public Property API
   // ========================
 
+  /** Label for the icon, used for accessibility */
+  @Prop({ reflect: true }) label?: string;
+
   /** Set the stroke color of the SVG. The value should be a valid value of the palette color */
   @Prop({ reflect: true }) color?: string;
 
@@ -125,11 +128,11 @@ export class BqIcon {
     return (
       <Host style={styles}>
         <div
+          aria-label={this.label ?? `${this.name} icon`}
           class="flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]"
           innerHTML={this._svgContent}
           part="base"
           role="img"
-          title={`${this.name} icon`}
         />
       </Host>
     );

packages/beeq/src/components/spinner/bq-spinner.tsx

@@ -140,16 +140,19 @@ export class BqSpinner {
   }
 
   private setIconSize(): void {
+    if (!this.hasIconSlot || !this.bqIcon) return;
+
+    this.bqIcon.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();
+  }
+
+  private get bqIcon(): HTMLBqIconElement | undefined {
     if (!this.hasIconSlot) return;
 
-    const iconElements = this.iconSlotElem
-      .querySelector<HTMLSlotElement>(`slot[name="icon"]`)
-      ?.assignedElements({ flatten: true })
-      .filter((element) => element.nodeName === 'BQ-ICON');
+    const slot = this.iconSlotElem.querySelector('slot');
 
-    iconElements.forEach((element: HTMLBqIconElement) => {
-      element.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();
-    });
+    return [...slot.assignedElements({ flatten: true })].filter(
+      (el: Element) => el.tagName.toLocaleLowerCase() === 'bq-icon',
+    )[0] as HTMLBqIconElement;
   }
 
   // render() function