fix(card): small quiet action menu a11y

[marissahuysentruyt]

Description

This PR fixes keyboard accessibility issues for action buttons in small, quiet variant Cards. The action buttons are now accessible via keyboard navigation and become visible when focused.

Changes made:

• Changed action button visibility from visibility: hidden to opacity: 0 to keep elements in the accessibility tree
• Added :focus-within CSS rule to make actions visible when any child element receives focus
• Reorganized template structure to ensure proper focus handling for small quiet cards
• Added focusable attribute to the action button slot

Motivation and context

Small quiet Cards with action buttons were not keyboard accessible. The action menu button had visibility: hidden except on :hover or :focus-within, which prevented the button from receiving focus unless the Card was hovered. This made it impossible for keyboard-only users to access critical card actions.

The fix changes the visibility approach to use opacity: 0 instead, which keeps elements in the accessibility tree while maintaining the same visual behavior. Action buttons now properly receive focus and become visible when navigating with the keyboard.

Related issue(s)

• fixes [Bug][a11y]: Card action menu is not accessible using the keyboard in small variant  #3389
• SWC-275

Screenshots (if appropriate)

Screenshots will be added showing keyboard focus behavior before and after the fix.

Before 🚫
Only after hovering with a mouse can Tab enter the card to focus the action menu button.

Screen.Recording.2025-11-24.at.1.43.50.PM.mov

After ✅
With a mouse not hovering, tab can enter the card to focus on the action menu button.

Screen.Recording.2025-11-24.at.1.44.28.PM.mov

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes. (N/A - CSS-only changes, existing functionality unchanged)
• I have included a well-written changeset if my change needs to be published. (Changeset will be added)
• I have included updated documentation if my change required it. (N/A - no documentation updates needed)

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing (N/A - CSS-only changes)
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Keyboard navigation to action buttons in small quiet Cards

  1. Go to Card stories - small quiet variant with actions
  2. Use Tab key to navigate through the card elements
  3. Expect action buttons to become visible (opacity: 1) when focused and be fully interactive
  4. Verify the action menu can be opened using Enter or Space key when focused

• Visual state consistency between hover and focus

  1. Go to Card stories - small quiet variant with actions
  2. Test with mouse hover on the card, then test with keyboard Tab to action button
  3. Expect action buttons to appear with consistent styling in both interactions

• Screen reader announces action buttons correctly

  1. Go to Card stories - small quiet variant with actions
  2. Use VoiceOver (Mac) or NVDA/JAWS (Windows) to navigate through the card
  3. Expect action buttons to be announced in the tab order and be accessible without requiring mouse hover

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6184a18

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5879

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5879

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.