show next/prev buttons permanently, fix counter logic

basher · Dec 11, 2024 · 92584af · 92584af
1 parent 9ccf79f
commit 92584af
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 42 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git 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<HTMLElement>;
-    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
@@ -11,7 +11,6 @@ const style = `
 export const WebUICarouselHtml = (args) => `
 ${style}
 <webui-carousel
-    ${args.showPrevNextButtons === true ? 'data-prev-next-buttons' : ''}
     ${args.showSlideCount === true ? 'data-slide-count' : ''}
     ${args.showSlideCountPips === true ? 'data-slide-count-pips' : ''}
 >

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
@@ -4,9 +4,8 @@ import * as WebUICarousel from './WebUICarousel.stories';
 <Meta of={WebUICarousel} />
 
 # `<webui-carousel>`
-- 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**.
 
 <Canvas of={WebUICarousel.WebUICarousel} />
 <Controls of={WebUICarousel.WebUICarousel} />
@@ -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
@@ -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.',