Close popover when menu item is selected via enter / space key · palantir/blueprint#4903

(1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import

Domain: accessibilityP2Package: corePackage: popover2Type: enhancementhelp wanted

説明

Environment

Package version(s): core 3.49.1 / popover2 0.11.4
Browser and OS versions:

Feature request

When a menu item inside a popover is clicked, the popover gets closed automatically. For accessibility reasons, menu items also need to be selectable via keyboard (pressing the enter or space key) - in this case the popover should also close automatically.

Examples

Sandbox: https://codesandbox.io/s/blueprint-sandbox-forked-co638?file=/src/index.tsx

In the below example, if the key used on the menu item was enter or space, the popover should close.

<Popover2
      content={
        <Menu>
          <MenuItem
            onClick={() => console.info("click")}
            onKeyUp={() => console.info("Key up")}
            tabIndex={0}
            text="Test"
          />
        </Menu>
      }
    >
      <Button>Click me</Button>
    </Popover2>

コントリビューターガイド

技術スタック: typescriptreact
領域: frontendaccessibility
Issue 種別: feature
難度: 3
推定時間: 1-3 hours
活動状況: stale
明確さ: clear
前提条件: ReactTypeScriptBlueprint library usage
初心者向け度: 70
調査方針: Start by examining the Popover2 component in `packages/popover2/src/`. Look for how it currently closes on mouse click, likely through a click handler or `onInteraction`. Then trace the MenuItem component in `packages/core/src/components/menu/` to see how it emits key events. The goal is to ensure that when a MenuItem receives a 'Enter' or 'Space' keyup, the Popover2 closes. Consider adding a `shouldCloseOnActivate` prop or using the existing `onInteraction` callback. The provided sandbox can be used for testing.