-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: interactive tile expand button #16644
fix: interactive tile expand button #16644
Conversation
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This LGTM, should we add a test around this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 🚀
To add some tests you can use this as an example.
- Add a new
Tab
; - Change the selector;
- Change from
Enter
toSpace
carbon/e2e/components/Tile/Tile-test.avt.e2e.js
Lines 112 to 127 in 6bd58e6
test('@avt-keyboard-nav SelectableTile', async ({ page }) => { | |
await visitStory(page, { | |
component: 'SelectableTile', | |
id: 'components-tile--selectable', | |
globals: { | |
theme: 'white', | |
}, | |
}); | |
await expect(page.locator('body')).toBeFocused(); | |
await page.keyboard.press('Tab'); | |
await expect(page.locator('#selectable-tile-1')).toBeFocused(); | |
await page.keyboard.press('Enter'); | |
await expect(page.locator('#selectable-tile-1')).toHaveClass( | |
'cds--tile cds--tile--selectable cds--tile--is-selected' | |
); | |
}); |
@lee-chase would you be up for adding tests to this? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added the necessary tests and corrected some that were failing
d9e9bae
Interactive tile expand button ignores spacebar press.
Changelog
InteractiveTile expand/close
Testing / Reviewing
Buttons should be operable via the spacebar. In the existing code the expand/collapse of the interactive tile has this disabled to cope with text box usage.
This PR processes the keypress to check that it is targeting the expand button.