[CardActionArea] Use `div role="button"` to facilitate interactive child elements

[DosymzhanKogabaev]

Steps to reproduce

Steps:

1. Open this link to live example: (MUI Card Docs)
2. Open developer tools
3. Make sure that tag <div> is placed inside a tag <button>, which does not comply to HTML5's specification

Problem:
http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element says that a <button> must contain only Phrasing content. Phrasing content is defined as including <span> but not <div>.

Current behavior

<CardActionArea> when rendered becomes a <button> tag. If you add anything inside of it, e.g. <CardContent> or <Box>, it will happen that after rendering, you'll end up with a <button> tag, that has <div> inside of it.

Expected behavior

All components from MUI should follow HTML5's validation rules, including <CardActionArea>.

Context

I was using MUI's <Card> component, which had a <CardActionArea> component inside of it, with child components, such as <CardHeader> and <CardContent>, then I published my website to the server and tried to check for any HTML validation errors on https://validator.w3.org, which showed me errors related to <Card> component from MUI.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.14.0
    @emotion/styled: ^11.13.0 => 11.14.0
    @mui/base:  5.0.0-beta.69
    @mui/core-downloads-tracker:  6.4.1
    @mui/icons-material: ^6.1.3 => 6.4.1
    @mui/lab: ^6.0.0-beta.22 => 6.0.0-beta.24
    @mui/material: ^6.1.3 => 6.4.1
    @mui/private-theming:  6.4.1
    @mui/styled-engine:  6.4.0
    @mui/system:  6.4.1
    @mui/types:  7.2.21
    @mui/utils:  6.4.1
    @types/react: ^18.3.11 => 18.3.18
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.7.3 => 5.7.3

Search keywords: W3C CardActionArea Card HTML5 SEO

[mj12albert]

@DosymzhanKogabaev You can do this as a workaround for now:

<CardActionArea component="div" role="button" />

We could probably make this the default (as a breaking change) to allow for arbitrary children more easily

[mj12albert]

We could probably make this the default (as a breaking change) to allow for arbitrary children more easily

A more robust solution for "clickable card" is to use pseudo-elements:

• https://inclusive-components.design/cards/#thepseudocontenttrick
• https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html#Demo