This is a demo of an editable data grid with numerous accessibility errors, paired with a talk on accessibility in more complex scenarios. The slides are on github.
step1
: Start here!step2
: Semantics applied, start here to add focus stylesstep3a
: Intermediate step to add focus refs (similar to React refs). Skip tostep3
to begin keyboard and focus handling with refs already defined.step3
: Focus styles applied, start here to work on keyboard functionalitystep4
: Keyboard and focus handling applied, start here to sprinkle on ARIA to enhance a11y.fixed
: Test the finished product