The Tile component has been designed with accessibility in mind.

The component offers flexibility in terms of the HTML element used for the root node. By default, it will render a div element.

The prop expandable makes the Tile clickable. In that case, assistive props like aria-expanded are handled automatically.

The component will render, by default, a div element with role="button" and tabindex={0}.

This also happens when the onClick prop is defined.

For that reason, one should refrain from using other interactive elements inside the Tile, like buttons or links, including on the header prop.

When the href prop is defined, the Tile will render an a element inside of the div. For the same reason as above, one should refrain from using other interactive elements inside the Tile.

The htmlTitle prop can be used to add extra information to the Tile.

It will be added as the title attribute to the a element when the href prop is defined.

Defining htmlTitle without defining href will produce no effect on the component.