The card needs more enhancements but I need more help to determine the perfect solution for it.
the issue we face is:
- the markup needs to change and when to change the markup the style needs to change to be suitable for it.
example:
`
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
`
should be:
`
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
<button class="card-footer-item">Save</button>
<button class="card-footer-item">Edit</button>
<button class="card-footer-item">Delete</button>
`
when I do that the style change and when I use the `button` class name the style change also, so you need to try it and edit the style as you need to card show to people.
- I replaced the <small> with <time> but the time does not have the same `font-size` so you maybe need to set `font-size` to time
- use button to can reach by keyboard and make a user with screen reader understand that's is a button.
- add aria-haspopup to make screen reader user understand this button have a drop-down.
- add aria-controls to make screen reader user understand this button control on items called x.
- should add aria-expanded by JS when user toggle button.
- add aria-hidden to icons.
- add href=# to links to make it a link we can interact with a keyboard.
- add role menu to menu drop-down to make sure this div is a menu.
- should add aria-hidden by JS and toggle it by button expanded.
