The column header's content in igGrid is lost after the text spacing is adjusted by the user

[kchanda24]

Description

During a recent evaluation by a third-party accessibility vendor we found that the text spacing in igGrid header is not adjustable with custom stylesheets. This is not aligned with WCAG 2.0 Level A guidelines. The corresponding WCAG success criteria is 1.4.12

Version and Browser used :

• ignite-ui version: any
• browser: any

Steps to reproduce

1. Go to this sample.
2. Keep the column editor layout
3. Reach the data table
4. Tab though the headers and data
5. Notice the content in the header's are truncated and lost.

Result

The column header's content is lost after the text spacing is adjusted by the user. This causes problems for individuals that need to adjust that property using a custom CSS stylesheet in order to have a better reading experience.

Expected result

The user should be able to override the text spacing according to their custom CSS stylesheet. Make sure the text style properties settings can be configured to the following without content or functionality loss: Line height (line spacing) to at least 1.5 times the font size; Spacing following paragraphs to at least 2 times the font size; Letter spacing (tracking) to at least 0.12 times the font size; Word spacing to at least 0.16 times the font size. Do not implement '!important' from the inline style line-height.

References:

https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

[RivaIvanova]

Hi @kchanda24 ,

I need to ask for some additional information regarding the steps to reproduce.

1. Could you please clarify what you mean by "keep the column editor layout"?
2. What do you refer to with "the column header's content is lost"?
3. Do you mean that the header text is not announced properly by a third-party accessibility vendor, e.g., NVDA?

I am asking these questions because I have tested this behavior and, on my side, the NVDA screen reader announces the header text as expected both with the default styling and the custom styling.

As could be seen in the above demo, when clicking on the "First Name" column, it is announced as "First Name". Then, when tabbing through the headers, all of them (First Name, Last Name, Register Date, and so on) are announced correctly.

Answering the above question will be quite helpful in better understanding the described behavior. Thank you for your cooperation.

[kchanda24]

Hi @RivaIvanova, if you refer to the demo you provided, you will see the headers such as First Name, Last Name has been truncated off. This is what I refer to as content being lost since the user is not able to see the full text properly. There should be some form of wrapping or some way for the user to view the full content properly.

[RivaIvanova]

Hi @kchanda24,

I have been looking into your clarifications and what I can say is that this behavior is reproducible both when the default and the custom styling are applied.

If the header’s width is not enough in order for the whole text to be displayed, a part of it will be truncated and will have trailing ellipses. This is the default and expected behavior.

If you need the whole text to be visible, you could set the column’s width in pixels or percentages in order to match the header’s content. Also, you could set it to "*" which will auto-size the column when the grid is initialized. Auto-sizing applies the width of the widest cell content (including header and footer cells) that is currently visible.

Another approach is to override the default white-space: nowrap CSS rule which is responsible for the headers to be displayed in the following way. This could be achieved by targeting the ui-iggrid-headertext CSS class.

.ui-iggrid-headertext {
  white-space: normal;
}

Here could be found a small sample demonstrating my suggestion. I hope it helps implement your requirements.

[kchanda24]

Hi @RivaIvanova! Changing the css rule might work. But this change should be addressed in the ignite-ui library since this is a WCAG compliance issue. I would encourage you to pursue this update in the library itself and reconsider your design choices to make it more compliant with WCAG accessibility rules.