@lumx/react 2.2.25 → 2.2.26-alpha-a11y-slideshow.2

package/esm/_internal/useRovingTabIndex.js

@@ -1,150 +1,11 @@
-import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
-import { createContext, useContext, useMemo, useEffect, useCallback } from 'react';
-import { u as uid } from '../index2.js';
-
-var INIT_STATE = {
-  isLazy: true,
-  shouldActivateOnFocus: false,
-  activeTabIndex: 0,
-  ids: {
-    tab: [],
-    tabPanel: []
-  }
-};
-var reducer = function reducer(state, action) {
-  switch (action.type) {
-    case 'update':
-      return _objectSpread2({}, state, {}, action.payload);
-
-    case 'setActiveTabIndex':
-      {
-        if (state.activeTabIndex === action.payload) {
-          return state;
-        } // Change active tab index.
-
-
-        return _objectSpread2({}, state, {
-          activeTabIndex: action.payload
-        });
-      }
-
-    case 'register':
-      {
-        var _action$payload = action.payload,
-            type = _action$payload.type,
-            id = _action$payload.id; // Append tab/tabPanel id in state.
-
-        return _objectSpread2({}, state, {
-          ids: _objectSpread2({}, state.ids, _defineProperty({}, type, [].concat(_toConsumableArray(state.ids[type]), [id])))
-        });
-      }
-
-    case 'unregister':
-      {
-        var _action$payload2 = action.payload,
-            _type = _action$payload2.type,
-            _id = _action$payload2.id;
-
-        var index = state.ids[_type].indexOf(_id);
-
-        if (index === -1) return state; // Remove tab & tab panel at index.
-
-        var tabIds = _toConsumableArray(state.ids.tab);
-
-        tabIds.splice(index, 1);
-
-        var tabPanelIds = _toConsumableArray(state.ids.tabPanel);
-
-        tabPanelIds.splice(index, 1);
-        return _objectSpread2({}, state, {
-          ids: {
-            tab: tabIds,
-            tabPanel: tabPanelIds
-          }
-        });
-      }
-
-    default:
-      return state;
-  }
-};
-var TabProviderContext = createContext(null);
-
-/* eslint-disable react-hooks/rules-of-hooks */
-var useTabProviderContext = function useTabProviderContext(type, originalId) {
-  var context = useContext(TabProviderContext);
-
-  if (!context) {
-    return undefined;
-  }
-
-  var _context = _slicedToArray(context, 2),
-      state = _context[0],
-      dispatch = _context[1]; // Current tab or tab panel id.
-
-
-  var id = useMemo(function () {
-    return originalId || "".concat(type, "-").concat(uid());
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  useEffect(function () {
-    // On mount: register tab or tab panel id.
-    dispatch({
-      type: 'register',
-      payload: {
-        type: type,
-        id: id
-      }
-    });
-    return function () {
-      // On unmount: unregister tab or tab panel id.
-      dispatch({
-        type: 'unregister',
-        payload: {
-          type: type,
-          id: id
-        }
-      });
-    };
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []); // Find tab/tabPanel index using it's id.
-
-  var index = useMemo(function () {
-    return state.ids[type].indexOf(id);
-  }, [state.ids, type, id]);
-  var tabId = useMemo(function () {
-    return state.ids.tab[index] || '';
-  }, [state, index]);
-  var tabPanelId = useMemo(function () {
-    return state.ids.tabPanel[index] || '';
-  }, [state, index]);
-  var isActive = useMemo(function () {
-    return state.activeTabIndex === index;
-  }, [state, index]);
-  var changeToTab = useCallback(function () {
-    return dispatch({
-      type: 'setActiveTabIndex',
-      payload: index
-    });
-  }, [dispatch, index]);
-  return {
-    isLazy: state.isLazy,
-    shouldActivateOnFocus: state.shouldActivateOnFocus,
-    tabId: tabId,
-    tabPanelId: tabPanelId,
-    isActive: isActive,
-    changeToTab: changeToTab
-  };
-};
-var useTabProviderContextState = function useTabProviderContextState() {
-  var context = useContext(TabProviderContext);
-  return context === null || context === void 0 ? void 0 : context[0];
-};
+import { e as _toConsumableArray } from './_rollupPluginBabelHelpers.js';
+import { useEffect } from 'react';
 
 var useRovingTabIndex = function useRovingTabIndex(_ref) {
   var parentRef = _ref.parentRef,
       elementSelector = _ref.elementSelector,
       keepTabIndex = _ref.keepTabIndex,
+      onElementFocus = _ref.onElementFocus,
       _ref$extraDependencie = _ref.extraDependencies,
       extraDependencies = _ref$extraDependencie === void 0 ? [] : _ref$extraDependencie;
   useEffect(function () {
@@ -183,7 +44,11 @@ var useRovingTabIndex = function useRovingTabIndex(_ref) {
         }
 
         var newElement = elements[newTabFocus];
-        newElement === null || newElement === void 0 ? void 0 : newElement.focus();
+        newElement === null || newElement === void 0 ? void 0 : newElement.focus(); // When an element is focused using roving tab index, trigger the onElementFocus callback
+
+        if (newElement && onElementFocus) {
+          onElementFocus(newElement);
+        }
 
         if (keepTabIndex) {
           evt.currentTarget.setAttribute('tabindex', '-1');
@@ -218,5 +83,5 @@ var useRovingTabIndex = function useRovingTabIndex(_ref) {
   [parentRef].concat(_toConsumableArray(extraDependencies)));
 };
 
-export { INIT_STATE as I, TabProviderContext as T, useTabProviderContextState as a, useTabProviderContext as b, reducer as r, useRovingTabIndex as u };
+export { useRovingTabIndex as u };
 //# sourceMappingURL=useRovingTabIndex.js.map

package/esm/_internal/useRovingTabIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRovingTabIndex.js","sources":["../../../src/components/tabs/state.ts","../../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';\nimport { uid } from 'uid';\n\ntype TabType = 'tab' | 'tabPanel';\n\nexport interface State {\n    isLazy: boolean;\n    shouldActivateOnFocus: boolean;\n    activeTabIndex: number;\n    ids: Record<TabType, string[]>;\n}\n\nexport const INIT_STATE: State = {\n    isLazy: true,\n    shouldActivateOnFocus: false,\n    activeTabIndex: 0,\n    ids: { tab: [], tabPanel: [] },\n};\n\nexport type Action =\n    | { type: 'update'; payload: Partial<State> }\n    | { type: 'setActiveTabIndex'; payload: number }\n    | { type: 'register'; payload: { type: TabType; id: string } }\n    | { type: 'unregister'; payload: { type: TabType; id: string } };\n\nexport const reducer = (state: State, action: Action): State => {\n    switch (action.type) {\n        case 'update':\n            return { ...state, ...action.payload };\n        case 'setActiveTabIndex': {\n            if (state.activeTabIndex === action.payload) {\n                return state;\n            }\n            // Change active tab index.\n            return { ...state, activeTabIndex: action.payload };\n        }\n        case 'register': {\n            const { type, id } = action.payload;\n            // Append tab/tabPanel id in state.\n            return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };\n        }\n        case 'unregister': {\n            const { type, id } = action.payload;\n            const index = state.ids[type].indexOf(id);\n            if (index === -1) return state;\n            // Remove tab & tab panel at index.\n            const tabIds = [...state.ids.tab];\n            tabIds.splice(index, 1);\n            const tabPanelIds = [...state.ids.tabPanel];\n            tabPanelIds.splice(index, 1);\n            return {\n                ...state,\n                ids: { tab: tabIds, tabPanel: tabPanelIds },\n            };\n        }\n        default:\n            return state;\n    }\n};\n\nexport const TabProviderContext = createContext<[State, Dispatch<Action>] | null>(null);\n\nexport type TabState = Pick<Required<State>, 'isLazy' | 'shouldActivateOnFocus'> & {\n    isActive: boolean;\n    tabId: string;\n    tabPanelId: string;\n    changeToTab(): void;\n};\n\n/* eslint-disable react-hooks/rules-of-hooks */\nexport const useTabProviderContext = (type: TabType, originalId?: string): undefined | TabState => {\n    const context = useContext(TabProviderContext);\n    if (!context) {\n        return undefined;\n    }\n    const [state, dispatch] = context;\n\n    // Current tab or tab panel id.\n    const id = useMemo(\n        () => originalId || `${type}-${uid()}`,\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n    useEffect(\n        () => {\n            // On mount: register tab or tab panel id.\n            dispatch({ type: 'register', payload: { type, id } });\n            return () => {\n                // On unmount: unregister tab or tab panel id.\n                dispatch({ type: 'unregister', payload: { type, id } });\n            };\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n\n    // Find tab/tabPanel index using it's id.\n    const index = useMemo(() => state.ids[type].indexOf(id), [state.ids, type, id]);\n    const tabId = useMemo(() => state.ids.tab[index] || '', [state, index]);\n    const tabPanelId = useMemo(() => state.ids.tabPanel[index] || '', [state, index]);\n    const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);\n    const changeToTab = useCallback(() => dispatch({ type: 'setActiveTabIndex', payload: index }), [dispatch, index]);\n    return {\n        isLazy: state.isLazy,\n        shouldActivateOnFocus: state.shouldActivateOnFocus,\n        tabId,\n        tabPanelId,\n        isActive,\n        changeToTab,\n    };\n};\n\nexport const useTabProviderContextState = (): State | undefined => {\n    const context = useContext(TabProviderContext);\n    return context?.[0];\n};\n","import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["INIT_STATE","isLazy","shouldActivateOnFocus","activeTabIndex","ids","tab","tabPanel","reducer","state","action","type","payload","id","index","indexOf","tabIds","splice","tabPanelIds","TabProviderContext","createContext","useTabProviderContext","originalId","context","useContext","undefined","dispatch","useMemo","uid","useEffect","tabId","tabPanelId","isActive","changeToTab","useCallback","useTabProviderContextState","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","parent","current","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}
+{"version":3,"file":"useRovingTabIndex.js","sources":["../../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** Action to trigger when an element is focused using roving tab index */\n    onElementFocus?: (element: HTMLElement) => void;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    onElementFocus,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n\n                // When an element is focused using roving tab index, trigger the onElementFocus callback\n                if (newElement && onElementFocus) {\n                    onElementFocus(newElement);\n                }\n\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["useRovingTabIndex","parentRef","elementSelector","keepTabIndex","onElementFocus","extraDependencies","useEffect","parent","current","undefined","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","index","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":";;;IAYaA,iBAAiB,GAAG,SAApBA,iBAAoB,OAMK;AAAA,MALlCC,SAKkC,QALlCA,SAKkC;AAAA,MAJlCC,eAIkC,QAJlCA,eAIkC;AAAA,MAHlCC,YAGkC,QAHlCA,YAGkC;AAAA,MAFlCC,cAEkC,QAFlCA,cAEkC;AAAA,mCADlCC,iBACkC;AAAA,MADlCA,iBACkC,sCADd,EACc;AAClCC,EAAAA,SAAS,CACL,YAAM;AACF,QAAMC,MAAM,GAAGN,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEO,OAA1B;;AACA,QAAI,CAACD,MAAL,EAAa;AACT,aAAOE,SAAP;AACH;;AAED,QAAMC,QAAQ,GAAGH,MAAM,CAACI,gBAAP,CAAwBT,eAAxB,CAAjB;AACA,QAAMU,uBAAuB,GAAGL,MAAH,aAAGA,MAAH,uBAAGA,MAAM,CAAEM,aAAR,WAAyBX,eAAzB,sBAAhC;;AAEA,QAAMY,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAAA,aAAmB,UAACC,GAAD,EAAwB;AAC7D,YAAIC,WAAW,GAAGF,KAAlB;;AACA,YAAI,EAAEC,GAAG,CAACE,GAAJ,KAAY,YAAZ,IAA4BF,GAAG,CAACE,GAAJ,KAAY,WAA1C,CAAJ,EAA4D;AACxD;AACH;;AAED,YAAIF,GAAG,CAACE,GAAJ,KAAY,YAAhB,EAA8B;AAC1B;AACAD,UAAAA,WAAW,IAAI,CAAf,CAF0B;;AAI1B,cAAIA,WAAW,IAAIP,QAAQ,CAACS,MAA5B,EAAoC;AAChCF,YAAAA,WAAW,GAAG,CAAd;AACH;AACJ,SAPD,MAOO,IAAID,GAAG,CAACE,GAAJ,KAAY,WAAhB,EAA6B;AAChC;AACAD,UAAAA,WAAW,IAAI,CAAf;;AACA,cAAIA,WAAW,GAAG,CAAlB,EAAqB;AACjB;AACAA,YAAAA,WAAW,GAAGP,QAAQ,CAACS,MAAT,GAAkB,CAAhC;AACH;AACJ;;AACD,YAAMC,UAAU,GAAGV,QAAQ,CAACO,WAAD,CAA3B;AACAG,QAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEC,KAAZ,GAtB6D;;AAyB7D,YAAID,UAAU,IAAIhB,cAAlB,EAAkC;AAC9BA,UAAAA,cAAc,CAACgB,UAAD,CAAd;AACH;;AAED,YAAIjB,YAAJ,EAAkB;AACba,UAAAA,GAAG,CAACM,aAAL,CAAmCC,YAAnC,CAAgD,UAAhD,EAA4D,IAA5D;AACAH,UAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEG,YAAZ,CAAyB,UAAzB,EAAqC,GAArC;AACH;AACJ,OAjCqB;AAAA,KAAtB;;AAmCA,QAAI,CAAAb,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,MAAV,IAAmB,CAAvB,EAA0B;AACtBT,MAAAA,QAAQ,CAACc,OAAT,CAAiB,UAACC,EAAD,EAAKP,GAAL,EAAa;AAC1B;AACA,YAAI,CAACN,uBAAD,IAA4BM,GAAG,KAAK,CAAxC,EAA2C;AACvCO,UAAAA,EAAE,CAACF,YAAH,CAAgB,UAAhB,EAA4B,GAA5B,EADuC;AAG1C,SAHD,MAGO,IAAIX,uBAAuB,KAAKa,EAAhC,EAAoC;AACvCA,UAAAA,EAAE,CAACF,YAAH,CAAgB,UAAhB,EAA4B,IAA5B;AACH,SAPyB;;;AAS1BE,QAAAA,EAAE,CAACC,gBAAH,CAAoB,SAApB,EAA+BZ,aAAa,CAACI,GAAD,CAA5C;AACH,OAVD;AAWH,KAxDC;;;AA2DF,WAAO,YAAM;AACT,UAAI,CAAAR,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAES,MAAV,IAAmB,CAAvB,EAA0B;AACtBT,QAAAA,QAAQ,CAACc,OAAT,CAAiB,UAACC,EAAD,EAAKP,GAAL,EAAa;AAC1BO,UAAAA,EAAE,CAACE,mBAAH,CAAuB,SAAvB,EAAkCb,aAAa,CAACI,GAAD,CAA/C;AACH,SAFD;AAGH;AACJ,KAND;AAOH,GAnEI;AAAA,GAoEJjB,SApEI,4BAoEUI,iBApEV,GAAT;AAsEH;;;;"}

package/esm/index.js

@@ -68,8 +68,9 @@ export { M as Mosaic } from './_internal/Mosaic2.js';
 export { N as Notification } from './_internal/Notification2.js';
 export { P as PostBlock } from './_internal/PostBlock.js';
 export { a as Progress, P as ProgressVariant } from './_internal/Progress2.js';
-import './_internal/useRovingTabIndex.js';
+import './_internal/state.js';
 export { a as ProgressTracker, P as ProgressTrackerProvider, b as ProgressTrackerStep, c as ProgressTrackerStepPanel } from './_internal/ProgressTrackerStepPanel.js';
+import './_internal/useRovingTabIndex.js';
 export { R as RadioButton, a as RadioGroup } from './_internal/RadioGroup.js';
 export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './_internal/SelectMultiple.js';
 export { S as SideNavigation, a as SideNavigationItem } from './_internal/SideNavigationItem.js';
@@ -77,6 +78,7 @@ export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVari
 export { S as Slider, c as clamp } from './_internal/Slider2.js';
 export { c as Slides, S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/Slides.js';
 import 'lodash/uniqueId';
+import 'lodash/chunk';
 export { S as Switch } from './_internal/Switch2.js';
 export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './_internal/TableRow.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './_internal/TabPanel.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.25",
-        "@lumx/icons": "^2.2.25",
+        "@lumx/core": "^2.2.26-alpha-a11y-slideshow.2",
+        "@lumx/icons": "^2.2.26-alpha-a11y-slideshow.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.25",
-    "gitHead": "b4b01794bb3639e816f4242dc57b7f9a03e56f46"
+    "version": "2.2.26-alpha-a11y-slideshow.2",
+    "gitHead": "24fd0e39f9d0da7d8ada60b03f7dce26ddaf811e"
 }

package/src/components/slideshow/Slides.tsx

@@ -1,9 +1,12 @@
-import React, { CSSProperties, forwardRef } from 'react';
+import React, { Children, CSSProperties, forwardRef } from 'react';
+import chunk from 'lodash/chunk';
 
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { useSlideFocusManagement } from './useSlideFocusManagement';
+import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {
     /** current slide active */
@@ -24,6 +27,13 @@ export interface SlidesProps extends GenericProps, HasTheme {
     toggleAutoPlay: () => void;
     /** component to be rendered after the slides */
     afterSlides?: React.ReactNode;
+    /** Whether the slides have controls linked */
+    hasControls?: boolean;
+    /**
+     * Accessible label to set on a slide group.
+     * Receives the group position starting from 1 and the total number of groups.
+     * */
+    slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
 }
 
 /**
@@ -56,11 +66,22 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
         slidesId,
         children,
         afterSlides,
+        hasControls,
+        slideGroupLabel,
         ...forwardedProps
     } = props;
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+    useSlideFocusManagement({ wrapperRef, activeIndex, groupBy });
+
     // Inline style of wrapper element.
     const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)` };
 
+    const groups = React.useMemo(
+        () => (groupBy && groupBy > 1 ? chunk(Children.toArray(children), groupBy) : [children]),
+        [children, groupBy],
+    );
+
     return (
         <section
             id={id}
@@ -79,8 +100,17 @@ export const Slides: Comp<SlidesProps, HTMLDivElement> = forwardRef((props, ref)
                 onMouseLeave={toggleAutoPlay}
                 aria-live={isAutoPlaying ? 'off' : 'polite'}
             >
-                <div className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
-                    {children}
+                <div ref={wrapperRef} className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
+                    {groups.map((group, index) => (
+                        <SlideshowItemGroup
+                            key={index}
+                            id={slidesId && buildSlideShowGroupId(slidesId, index)}
+                            role={hasControls ? 'tabpanel' : 'group'}
+                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}
+                        >
+                            {group}
+                        </SlideshowItemGroup>
+                    ))}
                 </div>
             </div>
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import range from 'lodash/range';
-import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem } from '@lumx/react';
+import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
 import { boolean, number } from '@storybook/addon-knobs';
 import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 
@@ -15,6 +15,7 @@ export const Simple = ({ theme }: any) => {
 
     return (
         <Slideshow
+            aria-label="Simple carousel example"
             activeIndex={activeIndex}
             autoPlay={autoPlay}
             interval={interval}
@@ -25,6 +26,7 @@ export const Simple = ({ theme }: any) => {
             theme={theme}
             groupBy={groupBy}
             style={{ width: '50%' }}
+            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
         >
             {images.map(({ image, alt }, index) => (
                 <SlideshowItem key={`${image}-${index}`}>
@@ -48,6 +50,7 @@ export const SimpleWithAutoPlay = ({ theme }: any) => {
 
     return (
         <Slideshow
+            aria-label="Simple with autoplay example"
             activeIndex={activeIndex}
             autoPlay
             interval={interval}
@@ -59,6 +62,7 @@ export const SimpleWithAutoPlay = ({ theme }: any) => {
             theme={theme}
             groupBy={groupBy}
             style={{ width: '50%' }}
+            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
         >
             {images.map(({ image, alt }, index) => (
                 <SlideshowItem key={`${image}-${index}`}>
@@ -75,7 +79,7 @@ export const SimpleWithAutoPlay = ({ theme }: any) => {
 };
 
 export const ResponsiveSlideShowSwipe = () => {
-    const slides = range(3);
+    const slides = range(5);
     return (
         <>
             In responsive mode
@@ -86,11 +90,13 @@ export const ResponsiveSlideShowSwipe = () => {
             </ul>
             <FlexBox vAlign="center">
                 <Slideshow
+                    aria-label="Responsive SlideShow Swipe"
                     activeIndex={0}
                     slideshowControlsProps={{
                         nextButtonProps: { label: 'Next' },
                         previousButtonProps: { label: 'Previous' },
                     }}
+                    slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
                 >
                     {slides.map((slide) => (
                         <SlideshowItem key={`${slide}`}>
@@ -114,3 +120,85 @@ export const ResponsiveSlideShowSwipe = () => {
         </>
     );
 };
+
+const slides = [
+    {
+        id: 0,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
+        title: 'Foyle’s War Revisited',
+        subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
+        link: '#',
+    },
+    {
+        id: 1,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        alt: 'British flag with WILL-TV host David Thiel.',
+        title: 'Great Britain Vote: 7 pm Sat.',
+        link: '#',
+    },
+    {
+        id: 2,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        alt: 'Mid-American Gardener panelists on the set.',
+        title: 'Mid-American Gardener: Thursdays at 7 pm',
+        subtitle: 'Watch the latest episode',
+        link: '#',
+    },
+    {
+        id: 3,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
+        title: 'Foyle’s War Revisited',
+        subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
+        link: '#',
+    },
+    {
+        id: 4,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        alt: 'British flag with WILL-TV host David Thiel.',
+        title: 'Great Britain Vote: 7 pm Sat.',
+        link: '#',
+    },
+    {
+        id: 5,
+        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        alt: 'Mid-American Gardener panelists on the set.',
+        title: 'Mid-American Gardener: Thursdays at 7 pm',
+        subtitle: 'Watch the latest episode',
+        link: '#',
+    },
+];
+export const WithComplexContent = () => (
+    <Slideshow
+        aria-label="Carousel with complex content"
+        activeIndex={0}
+        groupBy={2}
+        slideshowControlsProps={{
+            nextButtonProps: { label: 'Next' },
+            previousButtonProps: { label: 'Previous' },
+            playButtonProps: { label: 'Play/Pause' },
+            paginationItemProps: (index) => ({ 'aria-label': `Slide ${index + 1}` }),
+        }}
+        autoPlay
+        slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
+    >
+        {slides.map((slide) => (
+            <SlideshowItem key={slide.id}>
+                <a href={slide.link}>
+                    <img src={slide.src} alt={slide.alt} />
+                </a>
+                <FlexBox orientation={Orientation.vertical}>
+                    <h3>
+                        <a href={slide.link}>{slide.title}</a>
+                        {/* Add a non focusable element to test that it stays that way after a page change. */}
+                        <button type="button" tabIndex={-1} aria-hidden="true">
+                            Not focusable
+                        </button>
+                    </h3>
+                    {slide.subtitle && <p>{slide.subtitle}</p>}
+                </FlexBox>
+            </SlideshowItem>
+        ))}
+    </Slideshow>
+);

package/src/components/slideshow/Slideshow.tsx

@@ -5,19 +5,23 @@ import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { Comp, GenericProps } from '@lumx/react/utils';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { buildSlideShowGroupId } from './SlideshowItemGroup';
 
 /**
  * Defines the props of the component.
  */
 export interface SlideshowProps
     extends GenericProps,
-        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy'> {
+        Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {
     /** current slide active */
     activeIndex?: SlidesProps['activeIndex'];
     /** Interval between each slide when automatic rotation is enabled. */
     interval?: number;
     /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */
-    slideshowControlsProps?: Pick<SlideshowControlsProps, 'nextButtonProps' | 'previousButtonProps'> &
+    slideshowControlsProps?: Pick<
+        SlideshowControlsProps,
+        'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'
+    > &
         Omit<
             SlideshowControlsProps,
             | 'activeIndex'
@@ -61,6 +65,7 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         theme,
         id,
         slidesId,
+        slideGroupLabel,
         ...forwardedProps
     } = props;
     // Number of slideshow items.
@@ -99,6 +104,8 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
         onFocusOut: startAutoPlay,
     });
 
+    const showControls = slideshowControlsProps && slidesCount > 1;
+
     return (
         <Slides
             activeIndex={currentIndex}
@@ -111,8 +118,9 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
             autoPlay={autoPlay}
             slidesId={slideshowSlidesId}
             toggleAutoPlay={toggleAutoPlay}
-            interval={interval}
             ref={mergeRefs(ref, setSlideshow)}
+            hasControls={showControls}
+            slideGroupLabel={slideGroupLabel}
             afterSlides={
                 slideshowControlsProps && slidesCount > 1 ? (
                     <div className={`${Slides.className}__controls`}>
@@ -143,6 +151,10 @@ export const Slideshow: Comp<SlideshowProps, HTMLDivElement> = forwardRef((props
                                       }
                                     : undefined
                             }
+                            paginationItemProps={(index) => ({
+                                'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index),
+                                ...slideshowControlsProps.paginationItemProps?.(index),
+                            })}
                         />
                     </div>
                 ) : undefined

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -26,6 +26,7 @@ export const Simple = () => {
             onPaginationClick={onPaginationClick}
             nextButtonProps={{ label: 'Next' }}
             previousButtonProps={{ label: 'Previous' }}
+            paginationItemLabel={(index) => `Slide ${index}`}
         />
     );
 };
@@ -62,7 +63,6 @@ export const ControllingSlideshow = ({ theme }: any) => {
         onFocusOut: startAutoPlay,
     });
 
-    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
     return (
         <Slides
             activeIndex={currentIndex}