activate section after SPACE was released

Author: Lukas742

cypress/support/utils.tsx

@@ -196,16 +196,21 @@ export function testPieSectorFocus(Component, props, { only }: { only?: boolean
 
     cy.realPress('ArrowRight');
     cy.focused().should('have.attr', 'data-sector-index', '5');
-    cy.realPress('Space');
+
+    // Space activates on keyup — hold Space, arrow to next sector, then release
+    cy.focused().then(($el) => $el[0].dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true })));
+    cy.realPress('ArrowRight');
+    cy.focused().should('have.attr', 'data-sector-index', '6');
+    cy.focused().then(($el) => $el[0].dispatchEvent(new KeyboardEvent('keyup', { key: ' ', bubbles: true })));
     cy.get('@onDataPointClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
         detail: Cypress.sinon.match({
-          dataIndex: 5,
+          dataIndex: 6,
         }),
       }),
     );
-    cy.focused().should('have.attr', 'data-sector-index', '5');
+    cy.focused().should('have.attr', 'data-sector-index', '6');
   });
 
   test('sector focus - activeSegment out of bounds is clamped', () => {

packages/charts/src/components/PieChart/usePieSectorFocus.ts

@@ -32,6 +32,7 @@ export function usePieSectorFocus({
 }: UsePieSectorFocusOptions) {
   const sectorFocusRef = useRef(-1);
   const lastSectorRef = useRef(-1);
+  const spaceHeldRef = useRef(false);
   const [inSectorMode, setInSectorMode] = useState(false);
   const getSectorLabelRef = useRef(getSectorLabel);
   // Keep ref in sync so focusSector always uses the latest callback without re-creating the memoized function.
@@ -154,14 +155,19 @@ export function usePieSectorFocus({
           focusSector((sectorFocusRef.current - 1 + dataLength) % dataLength);
           break;
         }
-        case 'Enter':
-        case ' ': {
+        case 'Enter': {
           e.preventDefault();
           if (sectorFocusRef.current >= 0) {
             onSelect?.(sectorFocusRef.current, e);
           }
           break;
         }
+        case ' ': {
+          // Space activates on keyup so users can hold it, arrow to another sector, then release.
+          e.preventDefault();
+          spaceHeldRef.current = true;
+          break;
+        }
       }
     },
     [dataLength, chartRef, activeSegment, exitSectorMode, focusSector, onSelect],
@@ -211,6 +217,18 @@ export function usePieSectorFocus({
     [handleKeyDown, consumerOnKeyDownCapture],
   );
 
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === ' ' && spaceHeldRef.current) {
+        spaceHeldRef.current = false;
+        if (sectorFocusRef.current >= 0) {
+          onSelect?.(sectorFocusRef.current, e);
+        }
+      }
+    },
+    [onSelect],
+  );
+
   const handleSectorClick = useCallback(
     (dataIndex: number) => {
       if (!enabled) {
@@ -249,6 +267,7 @@ export function usePieSectorFocus({
       role: 'application' as const,
       'aria-roledescription': 'chart',
       onKeyDownCapture: handleKeyDownCapture,
+      onKeyUp: handleKeyUp,
       onBlur: handleBlur,
       onFocus: handleFocus,
     },