fix(a11y): add explicit imports, title props, and star rating semantics in demo pages

- Add explicit imports for Base layout and Icon component to replace
  implicit globals; makes component contracts clear and auditable
- Fix variable name: _icon -> icon so the runtime reference resolves
- Add title prop to standalone icons so they are exposed as role='img'
  with an accessible name to screen readers (WCAG 1.1.1)
- Wrap star icons in <figure aria-label='Rating: 4 out of 5 stars'>
  with a visually-hidden <figcaption> so the group meaning is
  communicated to AT users (WCAG 1.1.1, 1.3.1)
- Add .visually-hidden utility class following the standard SR-only
  clip pattern

Author: yacosta738

demo/src/pages/index.astro

@@ -1,5 +1,8 @@
 ---
-const _icon = "adjustment";
+import Base from "../layouts/base.astro";
+import { Icon } from "@dallay/astro-icon/components";
+
+const icon = "adjustment";
 ---
 
 <Base>
@@ -12,6 +15,7 @@ const _icon = "adjustment";
 
   <article>
     <h2>Local Icons</h2>
+    <!-- Decorative icons: aria-hidden handled automatically by Icon component -->
     <Icon size={24} name="adjustment" />
     <Icon size={24} name={icon} />
     <Icon size={24} name="annotation" />
@@ -30,16 +34,18 @@ const _icon = "adjustment";
       render it here!
     </p>
   </article>
+
   <!-- Pull your icon from the default remote service -->
-  <Icon size={32} name="ic:baseline-account-box" />
-  <Icon size={64} name="ic:baseline-account-box" />
-  <Icon size={80} name="ic:baseline-account-box" />
-
-  <Icon size={24} name="ic:baseline-directions-run" />
-  <Icon size={64} name="fe:building" />
-  <Icon size={64} name="ri:aliens-fill" />
-  <Icon name="bi:stars" />
-  <Icon name="ic:outline-star" />
+  <!-- Meaningful icons: title prop exposes them as role="img" to screen readers -->
+  <Icon size={32} name="ic:baseline-account-box" title="Account box" />
+  <Icon size={64} name="ic:baseline-account-box" title="Account box" />
+  <Icon size={80} name="ic:baseline-account-box" title="Account box" />
+
+  <Icon size={24} name="ic:baseline-directions-run" title="Running directions" />
+  <Icon size={64} name="fe:building" title="Building" />
+  <Icon size={64} name="ri:aliens-fill" title="Alien" />
+  <Icon name="bi:stars" title="Stars" />
+  <Icon name="ic:outline-star" title="Star" />
 </Base>
 
 <style lang="css">

demo/src/pages/map.astro

@@ -1,10 +1,25 @@
 ---
+import Base from "../layouts/base.astro";
+import { Icon } from "@dallay/astro-icon/components";
 ---
 
 <Base>
   <h1>Welcome to Astro Icon!</h1>
 
-  {Array.from({ length: 5 }).map(() => <Icon name="ic:outline-star" />)}
+  <!--
+    Star rating example: wrap the group in a <figure> with a <figcaption>
+    so screen readers understand the collective meaning (WCAG 1.1.1 / 1.3.1).
+    Each Icon is decorative within the group — aria-hidden is set automatically.
+  -->
+  <figure aria-label="Rating: 4 out of 5 stars">
+    {Array.from({ length: 5 }, (_, i) => (
+      <Icon
+        name="ic:outline-star"
+        title={i < 4 ? `Star ${i + 1}` : `Empty star ${i + 1}`}
+      />
+    ))}
+    <figcaption class="visually-hidden">4 out of 5 stars</figcaption>
+  </figure>
 </Base>
 
 <style lang="css">
@@ -14,4 +29,17 @@
   [data-icon="ic:outline-star"]:last-of-type {
     color: lightgray;
   }
+
+  /* Visually hidden but available to assistive technologies (WCAG 1.3.1) */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>