Card

Semántica

• Renderiza `Root`, `Header`, `Content` y `Footer` como elementos `<div>` con `data-scope="card"` y los atributos `data-part` correspondientes.
• Renderiza `Title` como un elemento de encabezado `<h3>`, proporcionando estructura de esquema del documento.
• Renderiza `Description` como un elemento de párrafo `<p>`.
• Todas las partes llevan los atributos `data-scope="card"` y `data-part="*"` para identificación.

Responsabilidades del consumidor

• Usar Card para agrupar contenido y acciones lógicamente relacionados.
• Asegurarse de que el texto de `Title` sea descriptivo y significativo para los usuarios de lectores de pantalla.
• Si la card envuelve un enlace o botón, aplicar roles ARIA apropiados o HTML semántico al elemento interactivo dentro de `Content`.
• No anidar elementos interactivos directamente en `Root`; colocarlos dentro de `Content` o `Footer`.

No aplicable

keyboard

Card es un elemento contenedor no interactivo sin interacciones de teclado.

focus

Card es un elemento contenedor no interactivo y no recibe enfoque.

aria

Card se basa en elementos HTML semánticos (h3, p) para accesibilidad y no requiere atributos ARIA adicionales.