Improve Table accessibility

SAP-archive / fundamental-vue

Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

https://sap.github.io/fundamental-vue

Apache License 2.0

197 stars 32 forks source link

Improve Table accessibility #242

Open trilodge opened 5 years ago

trilodge commented 5 years ago

Enhancement

The table control is missing some essential html attributes to connect rows and cols with their table headers and descriptions to make it a real data table. I would suggest a property called "scope" on th elements for thead and tbody with values of "row" or "col" to connect these locally for screenreaders etc. Also it would be nessessary to be able to put th inside tbody as well like given in the example in the link below.

Markup and further explanation could be found here: https://inclusive-components.design/data-tables/

current version

ChristianKienle commented 5 years ago

@trilodge I am just working on this. Question:

Let's assume I am rendering a row. So, for each column I have to either render a td or th-element.

Is the following assumption true:

If scope === 'row' then I have to render a th-element.
If scope !== 'row' then I have to render a td-element.

What I am trying to determine is if I can infer the element type that has to be rendered simply by looking at the scope.

At the moment the FdTableCell already accepts a scope but always renders a td-element.

trilodge commented 5 years ago

For the <tbody> that would be fine. For elements inside <thead> a <th> would be needed everytime, but those normally should have scope="col".

So your proposed solution would work. Yep.

ChristianKienle commented 5 years ago

@trilodge Okay. Done. But now the styles are not having the same effect anymore...

https://dist-bst1h9lgy.now.sh/#/demo/.%2FTable%2F4-fixed-col.vue

I also sent you an email…

trilodge commented 5 years ago

As i just merged the PR to make this work this issue shouldn't be blocked anymore.

ChristianKienle commented 5 years ago

In Progress 💃

ChristianKienle commented 5 years ago

@trilodge ok?

(will send you a netlify-link shortly)

ChristianKienle commented 5 years ago

@trilodge see #434 You can find a link to the deployed docs there. For your convenience: https://deploy-preview-434--fundamental-vue.netlify.com/#/example/table