From 92584afd7a79fe0400dd14bb9d1aa483e376d994 Mon Sep 17 00:00:00 2001 From: basher Date: Wed, 11 Dec 2024 09:47:09 +0000 Subject: [PATCH] show next/prev buttons permanently, fix counter logic --- ui/npm-shrinkwrap.json | 4 +- .../web-components/webui-carousel.ts | 40 ++++++------------- .../WebUI Carousel/WebUICarousel.js | 1 - .../WebUI Carousel/WebUICarousel.mdx | 6 +-- .../WebUI Carousel/WebUICarousel.stories.js | 8 ---- 5 files changed, 17 insertions(+), 42 deletions(-) diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json index 75d8a23..4980d8d 100644 --- a/ui/npm-shrinkwrap.json +++ b/ui/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "web-ui-boilerplate", - "version": "4.0.6", + "version": "4.0.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "web-ui-boilerplate", - "version": "4.0.6", + "version": "4.0.7", "license": "ISC", "dependencies": { "dialog-polyfill": "^0.5.6" diff --git a/ui/src/javascript/web-components/webui-carousel.ts b/ui/src/javascript/web-components/webui-carousel.ts index 19bbb14..7dd912f 100644 --- a/ui/src/javascript/web-components/webui-carousel.ts +++ b/ui/src/javascript/web-components/webui-carousel.ts @@ -1,7 +1,6 @@ export default class WebUICarousel extends HTMLElement { private carousel: HTMLUListElement | null; private slides: NodeListOf; - private hasPrevNextButtons?: boolean; private hasSlideCount?: boolean; private hasSlideCountPips?: boolean; private visibleSlideClass: string; @@ -14,7 +13,6 @@ export default class WebUICarousel extends HTMLElement { this.carousel = this.querySelector('.carousel'); this.slides = this.querySelectorAll('.carousel__slide'); - this.hasPrevNextButtons = this.hasAttribute('data-prev-next-buttons'); this.hasSlideCount = this.hasAttribute('data-slide-count'); this.hasSlideCountPips = this.hasAttribute('data-slide-count-pips'); this.slideCounter = this.querySelector('[data-counter]'); @@ -45,9 +43,7 @@ export default class WebUICarousel extends HTMLElement { } // Show PREV/NEXT buttons. - if (this.hasPrevNextButtons) { - this.showPrevNextButtons(); - } + this.showPrevNextButtons(); // Manage :FOCUS event on slides. this.handleFocus(); @@ -77,21 +73,17 @@ export default class WebUICarousel extends HTMLElement { entry.target.setAttribute('tabIndex', '0'); // Re-instate focusability of interactive child elements. - if (this.hasPrevNextButtons) { - focusableItems.forEach((focusableItem) => { - focusableItem.removeAttribute('tabIndex'); - }); - } + focusableItems.forEach((focusableItem) => { + focusableItem.removeAttribute('tabIndex'); + }); } else { entry.target.classList.remove(this.visibleSlideClass); entry.target.removeAttribute('tabIndex'); // When using PREV/NEXT buttons, make interactive child elements inside non-visible slides non-focusable. This enables keyboard :FOCUS via TAB key to the "current" slide. - if (this.hasPrevNextButtons) { - focusableItems.forEach((focusableItem) => { - focusableItem.setAttribute('tabIndex', '-1'); - }); - } + focusableItems.forEach((focusableItem) => { + focusableItem.setAttribute('tabIndex', '-1'); + }); } }); }, observerSettings); @@ -157,14 +149,10 @@ export default class WebUICarousel extends HTMLElement { ) as HTMLButtonElement; buttonPrev && - buttonPrev.addEventListener('click', () => - this.goToPrevSlide(buttonPrev), - ); + buttonPrev.addEventListener('click', () => this.goToPrevSlide()); buttonNext && - buttonNext.addEventListener('click', () => - this.goToNextSlide(buttonNext), - ); + buttonNext.addEventListener('click', () => this.goToNextSlide()); } private getCurrentSlide(): number { @@ -184,7 +172,7 @@ export default class WebUICarousel extends HTMLElement { return currentSlide; } - private goToPrevSlide(button?: HTMLButtonElement): void { + private goToPrevSlide(): void { const prevSlide = this.getCurrentSlide(); if (prevSlide && prevSlide > 1) { @@ -195,7 +183,7 @@ export default class WebUICarousel extends HTMLElement { } } - private goToNextSlide(button?: HTMLButtonElement): void { + private goToNextSlide(): void { const nextSlide = this.getCurrentSlide(); if (nextSlide && nextSlide < this.slides.length) { @@ -207,10 +195,8 @@ export default class WebUICarousel extends HTMLElement { } private setCurrentSlideCounter(i: number): void { - const counter = - this.carousel?.parentElement?.querySelector('[data-counter]'); - if (counter) { - counter.innerHTML = `slide ${i + 1} of ${this.slides.length}`; + if (this.slideCounter) { + this.slideCounter.innerHTML = `slide ${i + 1} of ${this.slides.length}`; } const counterPips = this.carousel?.parentElement?.querySelector( diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.js index 999cb7e..e395c43 100644 --- a/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.js +++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.js @@ -11,7 +11,6 @@ const style = ` export const WebUICarouselHtml = (args) => ` ${style} diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.mdx b/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.mdx index b612717..a82e6fb 100644 --- a/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.mdx +++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.mdx @@ -4,9 +4,8 @@ import * as WebUICarousel from './WebUICarousel.stories'; # `` -- This is an enhancement of the [default CSS carousel](/story/components-carousel--carousel) - optionally showing a slide count, PREV and NEXT buttons, etc. -- Native scrolling with `LEFT|RIGHT` arrow keys is enhanced, allowing JavaScript to correctly update the slide count when using arrow keys. -- When PREV and NEXT buttons are shown, keyboard `focus` is modified such that **only visible slides are focusable**. +- This is an enhancement of the [default CSS carousel](/story/components-carousel--carousel), with NEXT/PREVIOUS buttons, and an `aria-live` region to announce slide count (which can be optionally shown). +- When using NEXT/PREVIOUS buttons, keyboard `focus` is modified such that **only visible slides are focusable**. @@ -15,7 +14,6 @@ import * as WebUICarousel from './WebUICarousel.stories'; Attribute | Behaviour --- | --- -`data-prev-next-buttons` | Optional. Displays PREV and NEXT slide buttons. `data-slide-count` | Optional. Displays slide count & current slide. `data-slide-count-pips` | Optional. Displays slide count & current slide as pips instead of text. diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.stories.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.stories.js index 7c88116..e5f07bb 100644 --- a/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.stories.js +++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Carousel/WebUICarousel.stories.js @@ -16,14 +16,6 @@ export default { defaultValue: { summary: false } }, }, - showPrevNextButtons: { - control: 'boolean', - description: 'Show previous & next buttons.', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false } - }, - }, showSlideCount: { control: 'boolean', description: 'Show slide counter.',