Accessibility issues - Image Manager and Document Manager popup windows

[Lan]

Hello Telerik Team,

Our customers identified a few accessibility concerns related to the RadEditor Image Manager and Document Manager popup windows:

1. Keyboard Focus on Popup Activation
   When a user tabs to the Image Manager plugin and presses Enter, the popup window opens. However, keyboard focus does not automatically move into the popup. Instead, the user must press the Tab key again to shift focus manually.
   ➤ To meet accessibility standards, focus should move directly into the modal or popup when it appears. This ensures that keyboard and screen reader users can interact with the dialog immediately without navigating through background content.
2. Missing Dialog Roles and Labels
   The dialog containers ( see below ) currently lack appropriate accessibility roles.
   ➤ Each dialog container should include role="dialog".
   ➤ If the dialog has a visible title, it should also include aria-labelledby referencing the ID of that title element. This allows assistive technologies to announce the dialog context clearly.

Is there any way to fix these two issues?

Thanks,

Lan

 

[Rumen]

Hi Lan,

Thank you for outlining the accessibility concerns with the RadEditor Image Manager and Document Manager popup windows. Here's how you can address both issues:

1. Keyboard Focus on Popup Activation

To ensure that keyboard focus moves directly into the popup when it opens, you can use the RadEditor's client-side OnClientCommandExecuted event. This allows you to set focus to the first interactive element (the toolbar of RadFileExplorer) within the dialog:

        <telerik:RadEditor runat="server" ID="RadEditor2" Height="600px" EnableAriaSupport="true" OnClientCommandExecuted="OnClientCommandExecuted">
            <Content></Content>
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
                <telerik:EditorModule Name="RadEditorDomInspector" Visible="true" />
                <telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" />
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="true" />
            </Modules>
            <ImageManager ViewPaths="~/Images" />
            <DocumentManager ViewPaths="~/Images" />
        </telerik:RadEditor>

        <script type="text/javascript">
            function OnClientCommandExecuted(sender, args) {
                var dialogWindow,
                    isIframe,
                    commandName = args.get_commandName();
                    
                switch (commandName) {
                    case "ImageManager":
                    case "DocumentManager":
                    
                    default:
                }

                dialogWindow = sender.get_dialogOpener()._dialogContainers[commandName];

                if (dialogWindow) {
                    isIframe = dialogWindow.get_contentFrame();
                    
                    if (isIframe) {
                        dialogWindow.add_pageLoad(function (e) {
                            var contentDocument = e.get_contentFrame().contentDocument;
                            var toolbar = contentDocument.getElementById('RadFileExplorer1_toolbar');
                            setTimeout(function () {
                                toolbar.focus();
                            }, 0);
                        });
                    }
                   
                }
            }
        </script>

This approach ensures that users relying on the keyboard are placed directly inside the dialog when it appears.

2. Adding Dialog Roles and Labels

You need to set the EnableAriaSupport="true" property in the RadEditor declaration and the RadWindow-based dialog will be rendered with a role="dialog" and aria-labelledby attributes:

Regards,
Rumen
Progress Telerik