Question T14862
Visible to All Users

Accessibility Issue: Dropdown must have an associated visible label.

created a year ago

Hello! We have run an accessibility scan through Level Access and it returned an issue with the dropdown and it's lack of a label. The given errors were "The input element does not have an associated visible label" & "HTML5 placeholder is the only visible label". When I dug into the HTML, I noticed, the inputs that functioned correctly had an id='abc_ariaTItle' on the h5 question and on the input itself, there was an aria-labelledby='abc_ariaTitle' so they were correctly connected. However, on the drowdown, the h5 question has an id='efg_ariaTitle' but the input does not have an ariaLabelledby=. Instead, the container div with role='combobox' has the ariaLabelledby='efg_ariaTitle'. This seems to be causing a critical level issue on the scan because the label is not accurately connected to the input. This seems to be a bug so I wanted to reach out about it. Thanks for your help!

Show previous comments (4)

    Hello Kelley,
    Thank you for your patience. With the recent update (v1.9.112), we made changes to the Dropdown HTML structure to eliminate the issue. Please upgrade to v1.9.112 and check to see how a Dropdown performs with the Level Access scanner. Please share your results with us.

    Thanks

      Thank you for letting me know about that. I will get it upgraded and re-run the scanner. I had one question about the upgrade-
      We currently have “survey-core”, “survey-react” and “survey-react-ui” in our package.json. Do all of those need to be upgraded to the 1.9.112 version or just the “survey-core”? I noticed on npmjs.com all 3 packages link to the surveyjs repo so wasn’t sure which that change was held in. Thanks!

      Kelley

      On Oct 11, 2023, at

        Hello Kelley,
        Thank you for the update. The survey-react package is no longer required. We separated the core functionality from the rendering code. You can learn more about this change in this post. Now, to integrate a SurveyJS Form Library for a React JS app, it is necessary to install the survey-react-ui package. The survey-core package will be installed as a dependency.

        So, answering your question - please remove survey-react from your package.json and upgrade the survey-react-ui and survey-core packages.

        Please feel free to update this thread if you have new information.

        Thanks