Improve Table accessibility

[trilodge]

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]

@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]

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]

@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]

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

[ChristianKienle]

In Progress 💃

[ChristianKienle]

@trilodge ok?

(will send you a netlify-link shortly)

[ChristianKienle]

@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