[dialog] NVDA announces full contents of Dialog when opened

[rolfsmeds]

What is the problem?

NVDA, at least in combination with Edge, seems to still announce the full contents of a Dialog when the Dialog is opened.
This can be very annoying as Dialogs can often contain rather complex content rather than just a message.

VO+Safari does not exhibit this behavior.

JAWS is unknown, and should be tested in conjunction with this issue.

The desired announcement is just the title – just as when the user navigates to a new web page.

Possible solution pathways include:

• Setting an empty aria-describedby
• Changing the initially focused element from the Dialog overlay to the title or an invisible dummy element.

Not that the solution must not override the behavior specified for the Confirm Dialog: #4684.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[TatuLund]

The workaround is to have aria-hidden true for the element you want not to be announced when Dialog opens. This can be also container like form layout. And remove aria-hidden after small delay, so that element can be browsed afterwards, e.g. if it is layout containing fields.

@Route(value = "dialog", layout = MainLayout.class)
@PageTitle("Dialog")
public class DialogView extends VerticalLayout {

    private static final String LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

    public DialogView() {
        setSizeFull();
        setPadding(true);

        Dialog dialog = new Dialog();
        H3 h3 = new H3("Lorem ipsum");
        h3.getElement().setAttribute("tabindex", "0");
        h3.setId("lorem-ipsum");
        Paragraph paragraph = new Paragraph(LOREM_IPSUM);
        paragraph.getElement().setAttribute("aria-describedby", "lorem-ipsum");
        paragraph.getElement().setAttribute("aria-hidden", "true");
        Button close = new Button(VaadinIcon.CLOSE.create(),
                event -> dialog.close());
        close.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
        VerticalLayout layout = new VerticalLayout();
        layout.setPadding(true);
        layout.setSpacing(true);
        layout.add(h3, paragraph, close);
        dialog.add(layout);

        Button button = new Button("Dialog", e -> {
            dialog.open();
        });

        dialog.addOpenedChangeListener(e -> {
            if (e.isOpened()) {
                close.getElement().executeJs(
                        "this.$.button.setAttribute('aria-label','close dialog')");
                h3.getElement().executeJs("this.focus()");
                paragraph.getElement().executeJs(
                        "setTimeout(() => $0.removeAttribute('aria-hidden'), 100)",
                        paragraph.getElement());
            }        });
        add(button);
    }
}

[rolfsmeds]

Closing in favor of #3486