[RFC] Dropdown accessibility issue in screen readers

[elenadotedu]

Bug Report

Steps

1. Open a page that contains a dropdown (with some text, call it Dropdown Text) in Chrome while having NVDA screen reader on.
2. Screen reader will read "Alert: Dropdown Text"

Expected Result

1. When page first loaded, no alert is read out.
2. But when dropdown value changes, the reader speaks the value selected.

Actual Result

When page first loads, NVDA reads "Alert: Dropdown Text". If multiple dropdowns are present, it reads text values for some of them.

Version

0.79.0

Testcase

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[levithomason]

Accessibility is a very large and involved task. I am in full support of making accessibility improvements.

I'd like to formulate a way of doing this framework-wide. Over on https://github.com/stardust-ui/react (a fork of Semantic UI React), we have full-time accessibility teams and a contractor providing testing and feedback. I think we should piggyback off of that work and implement those features here in Semantic UI React as they become available.

In the meantime, we will accept PRs with accessibility fixes provided that we have some way of validating that the fixes are acceptable both by W3C standards and the accessible user community.

[levithomason]

I've labeled this issue for more community feedback as well.

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[BritneyS]

Please keep this thread active! Accessibility is becoming more and more vital to web development 😄

[kscoulter]

Has there been any movement on this?

[foxbunny]

some way of validating

NVDA is free of charge.

Also, there's good reason to not include alerts and live regions in anything that isn't an explicit notification. These are generally not meant for interactive elements of the page, and result in wonky behavior when used for such elements.

• "The alert role should only be used for text content, not interactive elements such as links or buttons." (MDN)
• "Simple content changes which are not interactive should be marked as live regions." (MDN, emphasis mine)

[ptamarit]

In case it might help understand why this was added in the first place, here is the pull request where this was introduced:
#1836

Does anyone know if removing the attributes aria-atomic aria-live='polite' role='alert' from the dropdown div would make the dropdown accessible (or at least not make things worst)?