diff --git a/.changeset/neat-pets-dream.md b/.changeset/neat-pets-dream.md new file mode 100644 index 0000000..b3db1c7 --- /dev/null +++ b/.changeset/neat-pets-dream.md @@ -0,0 +1,5 @@ +--- +"@itemconsulting/popover-gallery": patch +--- + +Add configurable close button and aria-label diff --git a/index.ts b/index.ts index 193395d..2c73279 100644 --- a/index.ts +++ b/index.ts @@ -4,6 +4,7 @@ export default class PopoverGallery extends HTMLElement { connectedCallback(): void { if(this.isPopoverSupported()) { this.linkEls = this.querySelectorAll(":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 { ${altText} @@ -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; diff --git a/popover-gallery.stories.ts b/popover-gallery.stories.ts index 0b784c6..838e02d 100644 --- a/popover-gallery.stories.ts +++ b/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 => ` - + + Eggman @@ -16,8 +24,11 @@ export default { `, -} satisfies Meta +} satisfies Meta -export const popoverGallery: StoryObj = { - args: {}, +export const popoverGallery: StoryObj = { + args: { + popoverClose: "×", + popoverCloseAriaLabel: "Close", + }, }; diff --git a/tsconfig.json b/tsconfig.json index 2f3d64f..c702ff5 100644 --- a/tsconfig.json +++ b/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"], } }