@charcoal-ui/react 6.0.0-rc.5 → 6.0.0-rc.6

package/src/components/Carousel/index.css

@@ -134,23 +134,44 @@
   }
 }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 .charcoal-carousel:hover .charcoal-carousel__navigation,
-.charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
 .charcoal-carousel__navigation__item {
   pointer-events: auto;
 
+  /* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 72px;
+  }
+
   &[data-direction='prev'] {
     grid-column: 1;
     justify-self: center;
+
+    &::after {
+      left: 0;
+    }
   }
 
   &[data-direction='next'] {
     grid-column: 3;
     justify-self: center;
+
+    &::after {
+      right: 0;
+    }
   }
 }
 

package/src/components/Carousel/index.test.tsx

@@ -634,6 +634,58 @@ describe('Carousel', () => {
     })
   })
 
+  describe('navigation button visibility (focus modality)', () => {
+    // jsdom はジオメトリが全て 0 で Next ボタンが disabled（=フォーカス不可）の
+    // ままになるため、スクロール余地をモックして有効化してからフォーカスする。
+    function renderWithFocusableNext() {
+      render(<Carousel size="M">{slides}</Carousel>)
+      const scroller = getScroller()
+      mockScrollerGeometry(scroller, { scrollLeft: 0 })
+      scroller.scrollBy = vi.fn()
+      act(() => {
+        fireEvent.scroll(scroller)
+      })
+      const next = screen.getByRole('button', { name: 'Next' })
+      expect(next).not.toBeDisabled()
+      return next
+    }
+
+    // react-aria は document 上の keydown / pointerdown でフォーカスの由来
+    // （keyboard / pointer）を判定するため、focus() の前にイベントを発火して
+    // モダリティを切り替える。
+    it('does not mark focus-visible when a button is focused by pointer', () => {
+      const next = renderWithFocusableNext()
+      fireEvent.pointerDown(next)
+      fireEvent.mouseDown(next)
+      act(() => next.focus())
+      fireEvent.click(next)
+      expect(document.activeElement).toBe(next)
+      expect(screen.getByRole('region')).not.toHaveAttribute(
+        'data-focus-visible-within',
+      )
+    })
+
+    it('marks focus-visible when a button is focused by keyboard', () => {
+      const next = renderWithFocusableNext()
+      fireEvent.keyDown(document.body, { key: 'Tab' })
+      act(() => next.focus())
+      expect(screen.getByRole('region')).toHaveAttribute(
+        'data-focus-visible-within',
+        'true',
+      )
+    })
+
+    it('clears focus-visible when focus leaves the carousel', () => {
+      const next = renderWithFocusableNext()
+      fireEvent.keyDown(document.body, { key: 'Tab' })
+      act(() => next.focus())
+      act(() => next.blur())
+      expect(screen.getByRole('region')).not.toHaveAttribute(
+        'data-focus-visible-within',
+      )
+    })
+  })
+
   describe('SSR (server rendering)', () => {
     // jsdom では window が定義されているため renderToString 時に
     // 「useLayoutEffect does nothing on the server」警告が出る（実 SSR=window 無しでは

package/src/components/Carousel/index.tsx

@@ -208,8 +208,14 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
     isFocusVisible: scrollerFocusVisible,
   } = useFocusRing()
 
+  // ナビゲーションボタン表示用。クリックで残留したフォーカス（pointer 由来）では
+  // 表示し続けないよう、キーボード由来のフォーカスのみを検知する。
+  const { focusProps: rootFocusProps, isFocusVisible: rootFocusVisible } =
+    useFocusRing({ within: true })
+
   return (
     <div
+      {...rootFocusProps}
       className={className}
       data-size={size}
       data-has-gradient={hasGradient}
@@ -219,6 +225,7 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
       data-scroll-snap-align={snapAlign}
       data-can-prev={canPrev}
       data-can-next={canNext}
+      data-focus-visible-within={rootFocusVisible || undefined}
       role="region"
       aria-roledescription="carousel"
       aria-label="Carousel"