Problem with reading contents of calcite-list and calcite-popover in calcite-dialog

[cont-amibabkin]

Check existing issues

• I have checked for existing issues to avoid duplicates and reviewed the Accessibility page for guidance.

Summary

Instead of calcite-select we use a combination of calcite-button with calcite-popover and calcite-list inside for more flexible customization. We encountered the fact that when using our custom select inside a calcite-dialog, the screen reader reads out the entire contents of the custom select when it is opened.

Actual Behavior

When you open a popover with a list, the following text is read out:

Expected Behavior

We would like the screen reader to read the text when opening our custom select in a calcite-dialog, just like when opening our custom select that is not inside a calcite-dialog.

Notice how the screen reader reads out the text when we use a custom dialog.

Reproduction Sample

Main example
https://codepen.io/Andrey-B-the-animator/pen/pvJGBxR

Custom dialog with calcite-popover and calcite-list
https://codepen.io/Andrey-B-the-animator/pen/XJbQKVL

Reproduction Steps

1. Enable a screen reader.
2. Navigate to the Open Dialog button and activate it.
3. Navigate to the Layer information button in dialog, activate it and notice how the elements are declared.

Reproduction Version

3.0.3

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Business/Community Analyst