Add configurable close button icon and aria-label (#2)

Closes: #1

.changeset/neat-pets-dream.md

@@ -0,0 +1,5 @@
+---
+"@itemconsulting/popover-gallery": patch
+---
+
+Add configurable close button and aria-label

index.ts

@@ -4,6 +4,7 @@ export default class PopoverGallery extends HTMLElement {
   connectedCallback(): void {
     if(this.isPopoverSupported()) {
       this.linkEls = this.querySelectorAll<HTMLAnchorElement>(":scope > a[id]");
+      this.dataset.popoverCloseAriaText = "";
 
       // Create popover with large image
       this.linkEls.forEach((linkEl) => {
@@ -14,8 +15,9 @@ export default class PopoverGallery extends HTMLElement {
             <button
               popovertarget="${linkEl.id}-popover"
               popovertargetaction="hide"
-              class="popover-gallery--button">
-              ×
+              class="popover-gallery--button"
+              ${this.dataset.popoverCloseAriaLabel ? `aria-label="${this.dataset.popoverCloseAriaLabel}"` : ""}>
+              ${this.dataset.popoverClose ?? "×"}
             </button>
             <img src="${linkEl.getAttribute("href")}" alt="${altText}">
           </div>
@@ -76,6 +78,10 @@ export default class PopoverGallery extends HTMLElement {
         -webkit-appearance: none;
       }
 
+      .popover-gallery--button img {
+        display: block;
+      }
+
       .popover-gallery--popover {
         box-sizing: border-box;
         background-color: transparent;

popover-gallery.stories.ts

@@ -3,10 +3,18 @@ import PopoverGallery from "./index";
 
 window.customElements.define("popover-gallery", PopoverGallery);
 
+type PopoverGalleryArgs = {
+  popoverClose?: string;
+  popoverCloseAriaLabel?: string;
+}
+
 export default {
   title: 'Popover Gallery',
   render: (args): string => `
-    <popover-gallery>
+    <popover-gallery
+      data-popover-close="${args.popoverClose}"
+      data-popover-close-aria-label="${args.popoverCloseAriaLabel}">
+
       <a href="eggman.jpg" id="pg-image-1" target="_blank">
         <img src="eggman-thumb.jpg" alt="Eggman" />
       </a>
@@ -16,8 +24,11 @@ export default {
       </a>
     </popover-gallery>
     `,
-} satisfies Meta
+} satisfies Meta<PopoverGalleryArgs>
 
-export const popoverGallery: StoryObj = {
-  args: {},
+export const popoverGallery: StoryObj<PopoverGalleryArgs> = {
+  args: {
+    popoverClose: "×",
+    popoverCloseAriaLabel: "Close",
+  },
 };

tsconfig.json

@@ -16,6 +16,6 @@
     "module": "ESNext",
     "noEmit": true,
     /* If your code runs in the DOM: */
-    "lib": ["es2023", "dom", "dom.iterable", ""],
+    "lib": ["es2023", "dom"],
   }
 }