Skip to content

DocumentCard has nested interactive items, structure, and very long link/button names #17718

Description

@smhigley

Environment Information

  • Package version(s): latest / 8.9.0

Describe the issue:

DocumentCard wraps the entire card in a link or button, so for cards that have interactive or structured content it results in lists, secondary links, buttons, and potentially other structured HTML nested inside. Since links and buttons coerce their children to be presentational (i.e. text-only), this results in removing semantics and screwing up accessible names in unpredictable ways. The other side effect is the parent link or button usually has an extremely long and often unhelpful accessible name.

Two examples that show this are the Document card example, particularly the "X files uploaded" cards, and the selected documents list in the Document picker example.

A good solution would be to move the link/button role and tabindex to the document card title, and adding role="group" to the document card parent (which would then ideally be labelled by the title). The document card can still have its parent click event, it just should not be focusable or have an interactive role.

Metadata

Metadata

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions