adobe / adobe/spectrum-web-components

[Bug]: docs: sp-grid toggle card usage in docs site is not working

Open
#5,582 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Documentation Component:Grid SEV 4
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

Grid

### Expected behavior

- Space bar should toggle the card's checkbox state
- Page should not scroll when space bar is pressed on focused cards
- Cards should maintain their toggle functionality as they do in other contexts (e.g., Storybook examples)

### Actual behavior

- Space bar causes page scrolling
- Card checkbox does not toggle
- User cannot interact with cards using keyboard

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Firefox, Chrome, Safari

### How can we reproduce this issue?

1. Navigate to the Grid component documentation or Storybook
2. Create a grid with cards that have `toggles="true"`
3. Tab to focus on a card in the grid
4. Press the space bar
5. **Expected**: Card checkbox toggles between checked/unchecked
6. **Actual**: Page scrolls down instead of toggling the card

### Sample code or abstract reproduction which illustrates the problem

```html

const grid = document.querySelector('#grid-demo');
grid.focusableSelector = 'sp-card';

grid.renderItem = (item, index, selected) => {
const card = document.createElement('sp-card');
card.toggles = true; // Cards should be toggleable
card.variant = 'quiet';
card.heading = `Card Heading ${index}`;
// ... other card setup
return card;
};

```

### Severity

SEV 4

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [ ] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue from the Grid component documentation or Storybook using the supplied sp-grid and sp-card example, then trace the Grid card focus behavior. Compare the docs-site behavior with the referenced Storybook examples; done means focused toggle cards respond to Space without scrolling in Firefox, Chrome, and Safari.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.