Gone are the days where we should be using div elements with custom click handlers to make a selectable tile component. That method complicates things by requiring more javascript than necessary to pass state information. Not to mention it is not inherently accessible.
Instead, here is an example of a tile that utilizes native HTML inputs and a little CSS. There are a few ways to approach this, but mine uses the default behavior of an input's label to control the selection.
This can obviously be styled however you like to look prettier, but the point I am getting accross is how to make something that is compliant with WCAG 2.1 AA criteria while also saving a little bit of hastle on the scripting.
These tiles are essentially just a visual mask over top of an input type="checkbox" for multi-select lists, or input type="radio" for single-select lists. Because the input is tied to its label using for/id attributes (which should always be the case for Assistive Technologies to be able to read the name of the object) the browser will toggle the state of the input whever the label is selected. This works for both mouse users and keyboard users with no additional scripting needed. So if we use some CSS to style the label to look like a tile (like we would have the div in the old days) the browser will naturally handle the state change when you interract with it.
This example is broken down into two Angular components, TileComponent and TileListComponent. In order to use the tiles in your application you will need to import them into your application module...
import { TileComponent } from './tile/tile.component';
import { TileListComponent } from './tile-list/tile-list.component';
and add these components to your declarations...
declarations: [ AppComponent, TileComponent, TileListComponent]
In the demo you'll notice one additional import RemovewhitespacesPipe. This is something I used to help construct the input id's based off of the component's properties. You could use a UUID to generate the id's instead.
From here, just place the tile element in your template and pass in the details to the component properties.
<tile-list type="checkbox" legend="Checkbox List" [labels]="['checkbox 1', 'checkbox 2', 'checkbox 3 with a longer label']"></tile-list>
| Name | Value | Description |
|---|---|---|
| type | "checkbox" or "radio" | |
| legend | Any string | |
| labels | Array of strings |