palantir/blueprint

Close popover when menu item is selected via enter / space key

Open

#4,903 opened on Sep 14, 2021

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Domain: accessibilityP2Package: corePackage: popover2Type: enhancementhelp wanted

Description

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>

Contributor guide

Tech stack
typescriptreact
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptBlueprint library usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
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.
Close popover when menu item is selected via enter / space key · palantir/blueprint#4903 | Good First Issue