ggascoigne
Why all the divs?
Why not use the Table element? It is the correct semantic element. People will copy this code and it is full of accessibility issues:
Bad code is bad code. You're not doing anyone any favors by making examples with bad code.
I'd hoped to use this, but now I have to rewrite it from scratch essentially. A shame.
I didn't use a table element because I wanted to poke more at the column resizing which depends on the flexbox layout and I didn't feel like rewriting what I had handy when what I was trying to do was show how to use the types in a less trivial example. Also in a past life I tried using flex and table elements and ran into so many compatibility issues, it's possible that they are fixed now, but I've not re-tested that.
I'm not going to disagree with the lack of accessibility here, if I was going to fix it though I'd add roles to the appropriate divs - that's also semantically correct and doesn't come with the other baggage associated with table elements.
Maybe add a note explaining this on the README so that others understand the compromises made and the reasons for them? I work a lot with junior developers and it's a constant struggle to unteach them bad habits they picked up from un-curated content.
Roles are better than nothing, but not sure what baggage table elements have. The WCAG is clear that roles are a fallback and the preferred option is to use the semantically-correct elements.
I have the same issue, BTW, with Material UI -- an abomination.
Well the baggage was the inability to redefine the display property to flex on the table rows etc. but it was a while ago and it's possible that now I can choose to ignore ie11, that it's no longer an issue.
I'll poke around with it, but it might be a little while. Day job, and all that.
Totally understandable. But it would definitely be cool to have a fully accessible example. :-)
The latest version has the divs converted to table elements. Since I know that some accessibility validators object to seeing roles on semantic html elements, I've filtered them out from the properties passed to the table elements.
I'm sure that there are some accessibility issues left, but the table itself should be quite a bit better.
That sounds much better! If there are semantically-valid elements available, it seems best to use those.