fixes #102 Browsing with tabulation in Carousel can switch on hidden cards with buttons

Author: correi-f

src/components/Card/Card.tsx

@@ -124,11 +124,21 @@ export interface CardProps {
   imageAlternative?: string;
   buttons?: Button[];
   roleDescription?: string;
+  isHidden?: boolean;
   onAction: (button: Button) => void;
 }
 
 const Card = React.forwardRef<HTMLLIElement, CardProps>(function cardRender(
-  { title, subTitle, imageUrl, imageAlternative, buttons, roleDescription, onAction }: CardProps,
+  {
+    title,
+    subTitle,
+    imageUrl,
+    imageAlternative,
+    buttons,
+    roleDescription,
+    isHidden = false,
+    onAction,
+  }: CardProps,
   ref,
 ) {
   return (
@@ -143,7 +153,7 @@ const Card = React.forwardRef<HTMLLIElement, CardProps>(function cardRender(
           : 'Slide'
       }
     >
-      <CardContainer>
+      <CardContainer aria-hidden={isHidden}>
         {imageUrl && <CardImage src={imageUrl} alt={imageAlternative} />}
         <CardTitle>{title}</CardTitle>
         {subTitle && (
@@ -158,6 +168,7 @@ const Card = React.forwardRef<HTMLLIElement, CardProps>(function cardRender(
                 <Button
                   onClick={onAction.bind(null, button)}
                   onKeyPress={onAction.bind(null, button)}
+                  {...(isHidden && { tabIndex: -1 })}
                 >
                   {button.label}
                 </Button>

src/components/Carousel/Carousel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-
+import { UrlButton } from '../../TockContext';
 import Carousel from './Carousel';
 import Card, { CardProps } from '../Card';
 
@@ -14,10 +14,30 @@ const cards: CardProps[] = Array.from(Array(CARD_COUNT)).map((_, i) => ({
   onAction: onButtonClick,
 }));
 
-storiesOf('Carousel', module).add('Default', () => (
-  <Carousel>
-    {cards.map((props: CardProps) => (
-      <Card key={props.title} {...props} />
-    ))}
-  </Carousel>
-));
+const cardsWithButtons: CardProps[] = Array.from(Array(CARD_COUNT)).map(
+  (_, i) => ({
+    title: `Card #${i}`,
+    imageUrl: 'https://avatars0.githubusercontent.com/u/48585267?s=200&v=4',
+    onAction: onButtonClick,
+    buttons: [
+      new UrlButton('Website 1', 'https://sncf.com'),
+      new UrlButton('Website 2', 'https://sncf.com'),
+    ],
+  }),
+);
+
+storiesOf('Carousel', module)
+  .add('Default', () => (
+    <Carousel>
+      {cards.map((props: CardProps) => (
+        <Card key={props.title} {...props} />
+      ))}
+    </Carousel>
+  ))
+  .add('With buttons', () => (
+    <Carousel>
+      {cardsWithButtons.map((props: CardProps) => (
+        <Card key={props.title} {...props} />
+      ))}
+    </Carousel>
+  ));

src/components/Carousel/Carousel.tsx

@@ -128,7 +128,7 @@ const Carousel: (props: {
   const [ref, previous, next] = useCarousel<HTMLUListElement>(children?.length);
   const [leftVisible, rightVisible] = useArrowVisibility(
     ref.container,
-    ref.items,
+    ref.items.map((item) => item.refObject),
   );
 
   return (
@@ -151,13 +151,15 @@ const Carousel: (props: {
         aria-roledescription={
           accessibility?.carousel?.roleDescription || 'Carousel'
         }
+        tabIndex={-1}
       >
         {children?.map((child, i) =>
           React.cloneElement(
             child,
             {
-              ref: ref.items[i],
+              ref: ref.items[i].refObject,
               roleDescription: accessibility?.carousel?.slideRoleDescription,
+              isHidden: ref.items[i].isHidden,
             },
             undefined,
           ),

src/components/Carousel/hooks/useCarousel.ts

@@ -1,11 +1,25 @@
-import { RefObject, useRef, useCallback, useEffect } from 'react';
+import {
+  RefObject,
+  useRef,
+  useCallback,
+  useEffect,
+  useState,
+  Dispatch,
+  SetStateAction,
+} from 'react';
 import useRefs from './useRefs';
 import useMeasures, { Measure } from './useMeasures';
 
+type CarouselItem = {
+  refObject: RefObject<HTMLElement>;
+  isHidden: boolean;
+  setIsHidden: Dispatch<SetStateAction<boolean>>;
+};
+
 type CarouselReturn<T> = [
   {
     container: RefObject<T>;
-    items: RefObject<HTMLElement>[];
+    items: CarouselItem[];
   },
   () => void,
   () => void,
@@ -19,26 +33,24 @@ function getMeanX(
   return Math.round((previous.x + previous.width + target.x) / 2);
 }
 
-function setAriaAttributes(
+function setHiddenItems(
   measures: Measure[],
-  itemRefs: RefObject<HTMLElement>[],
+  carouselItems: CarouselItem[],
   targetIndex: number,
   width: number,
 ) {
   if (width !== 0) {
-    itemRefs.forEach((item) => {
-      const offsetLeftItem = item.current?.offsetLeft || 0;
+    carouselItems.forEach((item) => {
+      const offsetLeftItem = item.refObject.current?.offsetLeft || 0;
 
       if (
         offsetLeftItem < measures[targetIndex].x ||
-        offsetLeftItem + (item.current?.offsetWidth || 0) >
+        offsetLeftItem + (item.refObject.current?.offsetWidth || 0) >
           measures[targetIndex].x + width
       ) {
-        item.current?.setAttribute('aria-hidden', 'true');
-        item.current?.setAttribute('tabIndex', '-1');
+        item.setIsHidden(true);
       } else {
-        item.current?.removeAttribute('aria-hidden');
-        item.current?.removeAttribute('tabIndex');
+        item.setIsHidden(false);
       }
     });
   }
@@ -48,7 +60,7 @@ function scrollStep(
   direction: 'NEXT' | 'PREVIOUS',
   container: HTMLElement | null,
   measures: Measure[],
-  itemRefs: RefObject<HTMLElement>[],
+  carouselItems: CarouselItem[],
 ) {
   if (!container) return;
   const x = container.scrollLeft;
@@ -62,7 +74,7 @@ function scrollStep(
       measures[targetIndex],
       measures[targetIndex - 1],
     );
-    setAriaAttributes(measures, itemRefs, targetIndex, width);
+    setHiddenItems(measures, carouselItems, targetIndex, width);
   } else {
     const firstLeftHidden = measures
       .slice()
@@ -78,30 +90,36 @@ function scrollStep(
       measures[targetIndex - 1],
       measures[targetIndex],
     );
-    setAriaAttributes(measures, itemRefs, targetIndex, width);
+    setHiddenItems(measures, carouselItems, targetIndex, width);
   }
 }
 
 export default function useCarousel<T>(itemCount = 0): CarouselReturn<T> {
   const containerRef = useRef(null);
   const itemRefs = useRefs(itemCount);
   const measures = useMeasures(itemRefs);
+  const carouselItems: CarouselItem[] = Array.from(Array(itemCount)).map<
+    CarouselItem
+  >((_, i) => {
+    const [isHidden, setIsHidden] = useState(false);
+    return Object.create({ refObject: itemRefs[i++], isHidden, setIsHidden });
+  });
 
   const previous = useCallback(
-    () => scrollStep('PREVIOUS', containerRef.current, measures, itemRefs),
+    () => scrollStep('PREVIOUS', containerRef.current, measures, carouselItems),
     [containerRef, measures],
   );
 
   const next = useCallback(
-    () => scrollStep('NEXT', containerRef.current, measures, itemRefs),
+    () => scrollStep('NEXT', containerRef.current, measures, carouselItems),
     [containerRef, measures],
   );
 
   useEffect(() => {
     if (measures !== undefined && measures.length !== 0) {
-      setAriaAttributes(
+      setHiddenItems(
         measures,
-        itemRefs,
+        carouselItems,
         0,
         (containerRef.current as HTMLElement | null)?.clientWidth || 0,
       );
@@ -111,7 +129,7 @@ export default function useCarousel<T>(itemCount = 0): CarouselReturn<T> {
   return [
     {
       container: containerRef,
-      items: itemRefs,
+      items: carouselItems,
     },
     previous,
     next,