Aria live message always displayed

[okomarov]

Describe the bug After the commit for the Aria Live message https://github.com/Hacker0x01/react-datepicker/commit/3070e4afe78679bc2b57ad8cd1b8d83cd0dec0d4 I now get Selected date: Thursday, February 2nd, 2023 above my datepicker.

To Reproduce Pick a date from a standard datepicker

Expected behavior The aria live message should not show up on top of the datepicker

Screenshots

Desktop (please complete the following information):

• OS: Mac OS latest
• Browser chrome
• Version latest

[okomarov]

As Svish points out in https://github.com/Hacker0x01/react-datepicker/issues/3924#issuecomment-1430907381, the issue happens when customising the CSS of the date-picker. Specifically, the aria message will be visible if you're overriding the whole styling for the .react-datepicker and miss to include or reuse the rule: https://github.com/Hacker0x01/react-datepicker/blob/89d321f1bc9f78aa2d5d2b744d85132e0f3aa40b/src/stylesheets/datepicker.scss#L697

So the fix is to add that rule in your custom CSS or to explicitly use in the custom datepicker.

---

Outdated:

The workaround is to add the css rule:

.react-datepicker__aria-live {
  display: none;
}

[vertic4l]

@martijnrusschen Please fix this. Latest version is not usable this way. And a css workaround shouldn't be the solution for it.

[Leningram]

Is there any plans to fix it? Why have it appeared? It also ruins tests for this component

[Svish]

Suddenly noticed this aria message here too now. Our CSS for the date-picker is fully custom, so we don't use any of the styles coming with the package. I'm guessing this is the case for others who see this text appearing too?

I think the actual fix for us with custom CSS would then be to copy the appropriate styles for this new aria element:

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

Removing it with display: none is not good, as that will also remove the element for screen-readers, which I'm guessing was the whole point of adding this aria-live element to begin with?

[ondrejsova]

same problem. somehow the latest version of css is not in the built package.

[VeekeeFr]

I'ld also like to point out that the displayed text is forced as english, which may not be the current language used in the website.

Not beeing able to set the language is unusable for an ARIA text (well, this means that we have to use our own aria + translation system, and that this feature is quite useless to begin with).

[wallace-sf]

+1

[trainoasis]

Is this related to this? The issue seem to have been introduced in 4.10.0 as per above. We reverted back to 4.9.0 where the problem is not yet introduced for the time being.

[VeekeeFr]

Yes it is. Switching to an optional ariaLiveRegion would be the wisest choice (imho).

[MikulasLebowski]

We have different experience, we had this exact issue in 4.8.0 already, we tried updating to 4.11.0 which did not help...

[Svish]

Switching to an optional ariaLiveRegion would be the wisest choice

Making an important accessibility feature optional, is not a good thing. The solution to this issue should be fairly simple, just update your custom CSS to hide the aria region as I described her: https://github.com/Hacker0x01/react-datepicker/issues/3924#issuecomment-1430907381. If you're not using custom CSS, then it's probably related to a different issue than this...

[h-evers]

It should at least be possible to configure the text not to be printed out - that's what configurations are for. An only CSS solution is not suitable for every situation. Using "areaLiveRegion" would be an ugly hack.

[trozzelle]

Per the comment above, changing .react-datepicker__aria-live to position: absolute; fixes the layout issue and retains the accessibility attribute.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.