ADG-308 Table spanning multiple rows and columns

[backflip]

This PR finally implements Adrian's feedback in #308.

Demo

• Before: https://www.accessibility-developer-guide.com/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/
• After: https://deploy-preview-430--accessibility-developer-guide.netlify.app/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/

Notes

When testing, please make sure to review whether the Tricky screen reader navigation paragraph is still accurate.

[netlify]

✅ Deploy Preview for accessibility-developer-guide ready!

Name	Link
🔨 Latest commit	b70cccc
🔍 Latest deploy log	https://app.netlify.com/sites/accessibility-developer-guide/deploys/65e794aa8b8fe100091b131b
😎 Deploy Preview	https://deploy-preview-430--accessibility-developer-guide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[christophdubach]

@backflip: To me the source code additions look good and cover Adrian's feedback.

(But what I was wondering: Should the <th>s of the individual rows (those with the time specification) also have an id, and should this id also be listed in the headers attribute of the <td>s? Or does this only apply to header cells of columns?)

Important note:
I cannot judge the correctness of the text section “Tricky screen reader navigation” or the compatibility table – my approval therefore only applies to the code ... 😉

[NicSR]

Sali Zäme

Nun ich habe jetzt mehrere Tests gemacht mit den Beispielen die wir anbieten und dem Beispiel von Adrian.
In unseren Beispielen passiert gar nichts, und das Verhalten in Chrom/Firefox mit NVDA ist identisch. Es werden jeweils die Headers ausgelesen im thead-element drin unabhängig davon ob mit oder ohne ID.

Nun anders sieht es aus beim Beispiel von Adrian: https://adrianroselli.com/2022/01/accessible-cart-tables.html

da wird versucht, der Zelle "sub-total" die Header-Bezeichnung "Description" zu setzten.
dies allerdings funktioniert nur in Firefox und NVDA nicht aber in Chrome und NVDA.

wollen wir dies als Beispiel mit im ADG aufnehmen um die Problematik stand heute zu zeigen?