Yesterday the Design System team received a tentative enquiry regarding making table cells editable. I’m not yet sure whether or not this is a good idea – experience and spidey sense tell me it’s not – but regardless I decided to start exploring so as to base my answer on facts and avoid being overly cautious.
In my mind’s eye, there are two ways to achieve this:
- on clicking the cell, the cell content is presented in an (editable) form input; or
- apply the
contenteditableattribute
In both cases you get into slightly gnarlier territory when you start considering the need for a submit button and how to position it.
I don’t have anything further to add at the moment other than to say that if I had to spike this out, I’d probably start by following Scott O’Hara’s article Using JavaScript & contenteditable.
I’d probably also tweet Scott and ask if he can say anything more on his closing statement which was:
I have more thoughts on the accessibility of contenteditable elements, but that will also have to be a topic for another day…
Update 27-09-22: I’ve also remembered that (if I were to pursue Option 1: input within cell) Adrian Roselli has an article on Accessibly including inputs in tables.