Skip to content

Do not use header or footer in Cards using div #1934

@spaceninja

Description

@spaceninja

By default the Card component renders as an article element. The Card's header and footer sections are rendered using header and footer elements.

However, if you change the Card's element to a div it causes the VO Rotor to display a list of unlabelled banner landmarks. That's because the banner role is removed from header elements when they're a descendent of an article element.

To fix this, we just need to add a bit of conditional logic — if the tag_name is article or section, then header_tag_name should be header and footer_tag_name should be footer. If tag_name is anything else (such as div) then header_tag_name and footer_tag_name should both be div.

Note the same change should be made to the Overview object template.

Metadata

Metadata

Assignees

Labels

🐛 bugSomething isn't working🦮 a11yAccessibility improvements

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions