Skip to content

Instantly share code, notes, and snippets.

View lindseywild's full-sized avatar

Lindsey Wild lindseywild

View GitHub Profile
@lindseywild
lindseywild / accessibility-checklist
Created May 31, 2022 15:58
Accessibility Checklist
# Accessibility Checklist
## Overview
This checklist can be referenced when building or updating a feature. Not every item will apply to every situation.
- [ ] Feature is usable with a keyboard only (using Tab to move forward, Shift + Tab to move backwards)
- [ ] You can interact with all controls, links, and menus
- [ ] You can see what item has focus at all times
- [ ] The visual focus order matches the intended interaction order
- [ ] You are not “trapped” within one element
@lindseywild
lindseywild / action-menu-spans.html
Last active May 10, 2022 10:25
Example ActionMenu markup with `<span>` tags
<action-menu data-anchor-align="end" data-anchor-side="outside-bottom">
<button role="button" aria-haspopup="true" aria-expanded="true" aria-controls="unique-id-list" id="unique-id-text" aria-label="GIF options" type="button" class="btn-octicon">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" class="octicon octicon-kebab-horizontal">
<path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>
</button>
<span class="Overlay-backdrop--anchor" data-menu-overlay>
<span class="Overlay Overlay-whenNarrow Overlay--height-auto Overlay--width-auto" hidden>
<span class="Overlay-body Overlay-body--paddingNone">
<span class="ActionList" id="unique-id-list" role="menu" aria-labelledby="unique-id-text" style="display: block">