Ability to override the table element when the RowComponent is not returning tr element

[krishna63]

What is the issue?

• We are customizing the layout of the day-picker as per our need and the components prop of the react-day-picker is providing that flexibility. It is wonderful, but when I configure Row property it is rendering it's content inside tbody element which is not semantically correct. As I am rendering a div as Row component. The div is leveraging flex for aligning the days of a week
• When a RowComponent is returning an element other than tr then react-day-picker should not render the root component like table and tbody
• Instead provide the ability to configure the root component as well

What is the reason behind this proposal ?

• It is because of a11y requirement, when navigating the dates of the week it announces row information as well which is not required in this scenario.

[gpbl]

Hi @krishna63,

the calendar is built using a table, hence the Row component must render a tr to be semantically correct.

You could change the role of the returned <tr role="whatever">, and set the table elements to use display: block, e.g.:

table.rdp > tbody > tr {
  display: block;
}

Not sure it would work tho. I am more interested about this:

It is because of a11y requirement, when navigating the dates of the week it announces row information as well which is not required in this scenario.

Maybe we should change how the rows are read? Please give more info so we can open an issue about that.

[krishna63]

Hi @gpbl
I am trying to achieve the below kind of structure as per our a11y guidelines. Please refer to this example and look at the markup of the month in the dom for more detail.

So the decision is div vs table layout. In table layout when navigating thru dates of the month , screen readers like jaws/nvda announce the row and column information as well which is uncessary. Hope it answers and do you agree with me to provide an ability to override the table component as well ? I believe override the table component while consuming does not break any functionality ?

[gpbl]

In table layout when navigating thru dates of the month , screen readers like jaws/nvda announce the row and column information as well which is uncessary.

@krishna63 I think this one above is the issue you are trying to solve.

Currently I have no access to a jaws/nvda screen reader to test. However, you say the HTML above (in the MUI calendar) is spoken correctly, while the one in DayPicker is announced "with the row and column information". Could you confirm this?

[krishna63]

@gpbl : Yes, that is the issue I am trying to solve, to get a similar DOM structure using RDP. I am able to override the Row component but its parent is tbody which is not semantically right. Hence i am requesting to expose one more property in components props for overriding it by the consumer. Then i will send a div element with a required role as well.

Point 1: Furthermore, tables are hard to navigate when screen readers are "ON". Because it gives a lot of additional information and also it is not tabular data right?
Point 2: When the user tabs from the next button to the selected date then it announces as follows

JAWS screen reader: "row 1 column 2 followed by button aria-label (which is nothing but the date information 7th September 2022, Wednesday) information". In table layout

JAWS screen reader: "button aria-label(which is nothing but the date information 7th September 2022, Wednesday) " - For div layout

[gpbl]

Because it gives a lot of additional information and also it is not tabular data right?

@krishna63 thanks for your valuable feedback!

The table does have role="grid" https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/components/Table/Table.tsx#L43 ...as opposed as role="table". My guess is that the screen reader ignores it and gives precedence to the table role?

The first approach to fix this should _not_to change table to divs, as this may be a breaking change. The ideal solution here would be a ARIA attribute to apply to table and its elements that makes the screen reader work as expected. Would other roles fix it? Are there attributes that we can add to make the screen reader read correctly the table?

If we can't find a way out, we can consider to switch to divs layout. We should understand first how DayPicker users would be affected by this change. There are still solutions to mitigate this solution, such as using display: table in the CSS.

I need to setup a Windows machine so I can test it better. I'd appreciate some investigation from your side tho... feel free to download the source and propose some changes: https://react-day-picker.js.org/development/source and make some investigations!

[gpbl]

@krishna63 I could install a Windows machine to test better JAWS and other screen readers. I think this (big) PR will fix most of the issues you reported.

#1550

[gpbl]

@krishna63 we made changes in v8.5 improving the accessibility tree and the experience with JAWS screen reader. Give a look. In a next mayor version we may want to cleanup the table and render only div`s.