adobe / adobe/spectrum-web-components

[Bug][a11y]: Card with href link ordering creates redundancy and disabled important link functionality

Open
#3,385 1 comment 0 reactions 0 assignees View on GitHub
a11y bug Component:Card SEV 3 VoiceOver
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)

Card

### Expected behavior

Within a Card with an href, the link should come before the Card body, and the title for the Card should be hidden from assistive technology using `aria-hidden="true"`.

A user should be able to right click or activate a context menu to open the link in a new Tab.

It shouldn't require two clicks on the Card to open the link.

### Actual behavior

A Card with an href adds a link that follows the card body and repeats the title, which adds unnecessary verbosity.

The link css declares `pointer-events: none;`, which disables the users' ability to open the link in a new tab, and makes it so that sometimes the user has to click the Card twice in order for it to open the link.

### Screenshots

_No response_

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

_No response_

### How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

### Sample code that illustrates the problem

_No response_

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Locate the Card component and inspect how an href link is ordered, how the title is exposed to assistive technology, and where pointer-events is applied. Verify that the link precedes the Card body, the title is hidden with aria-hidden="true", context-menu opening works, and one activation opens the link.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.