WCAG indicator for context menu

[NIkki Hunn]

Hi,

If we have a TreeGrid that has a Context Menu, what indication is given to screen readers (or sighted users, really) that the cell can be interacted with and opens a menu? How can you open the context menu using only the keyboard? I do not see aria-haspopup being set? Shift+F10 does not seem to open the context menu when the cell has focus.

It also does not set aria-controls on the parent element.

Thanks!

[Pon Selva Jeganathan]

Hi NIkki Hunn,

Query: How can you open the context menu using only the keyboard? Shift+F10 does not seem to open the context menu when the cell has focus.

We achieved this requirement by using the created event of the TreeGrid, the keyPressed event of the grid, and the openMenu method.

In the created event, we obtain the instance of the TreeGrid and use a keyPressed function of the grid. Within this function, we check for the Shift+F10 combination and open the context menu using the openMenu method of the contextMenuModule.

Refer to the below code snippet,

 

<div className="control-pane">

      <div className="control-section">

        <TreeGridComponent

          dataSource={sampleData}

          created={created}

          treeColumnIndex={1}

          childMapping="subtasks"

          height="350"

          allowPaging={true}

          editSettings={editSettings}

          pageSettings={pageSettings}

          contextMenuItems={contextMenuItems}

          allowSorting={true}

          allowExcelExport={true}

          allowPdfExport={true}

        >

 

……

 

 const created = function (args) {

    var tree =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

 

    tree.grid.keyPressed = function (args) {

     

      if (args.keyCode === 121 && args.shiftKey === true) {

        return false;

      }

      if (args.key === 'F10' && args.shiftKey) {

        // Your code to execute when Shift + F10 is pressed goes here

        console.log('Shift + F10 was pressed!');

        tree.grid.contextMenuModule.contextMenu.openMenu(

          null,

          null,

          155,

          155,

          args

        );

      }

    };

 

 

Refer to the below sample,

https://stackblitz.com/edit/react-3ocykl-96ixit?file=index.js

Refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#created

https://ej2.syncfusion.com/documentation/api/grid#keypressed

Query: If we have a TreeGrid that has a Context Menu, what indication is given to screen readers (or sighted users, really) that the cell can be interacted with and opens a menu? I do not see aria-haspopup being set? 

In the TreeGrid component, the context menu is typically opened using a right-click action. When a screen reader encounters this, it will announce it as a "menu bar."

The TreeGrid component doesn't explicitly set the aria-haspopup attribute to indicate that a context menu is available for a particular cell. When a screen reader encounters the menu bar, it provide an indication to the user that this is an interactive element that opens a menu when clicked.

Refer to the below screenshot,

Refer to the below help documentation,

https://ej2.syncfusion.com/react/documentation/treegrid/accessibility

https://ej2.syncfusion.com/react/documentation/treegrid/context-menu

If we misunderstand your requirement, kindly share the below details which is helpful to proceed further.

1. Detailed explanation of your requirement
2. A video demo or screenshot that demonstrates your requirement.

Kindly get back to us for further assistance.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[NIkki Hunn]

Hi,

If this component meets WCAG, I expected it to support opening the context menu by default and not require extra custom code. Please confirm that in order to support opening the context menu with the keyboard, we must have extra code? Honestly this snippet looks fragile and magic and I'm not a fan.

Should this be opening with the OS/Browser Menu key / keyboard shortcut? If so, this might be a me problem.

Thanks!

[NIkki Hunn]

I am closing this as a me problem - my keyboard Menu key works to open the context menu.

Thank you, and we may consider documenting that for silly folks like myself? If it IS documented, maybe make it clearer, because I didn't see it?  =)

[Pon Selva Jeganathan]

Hi NIkki Hunn,

Query: I expected it to support opening the context menu by default and not require extra custom code. Please confirm that in order to support opening the context menu with the keyboard, we must have extra code?

By default, in the TreeGrid, you can open the context menu after focusing on the cell by using the context menu key on your keyboard. This key is usually found on the bottom row, towards the right-hand side, and looks like this . It serves as a shortcut for opening the context menu.

If you specifically want to open the context menu using the Shift+F10 combination, we suggest, you to use the previously shared solution.

Query: my keyboard Menu key works to open the context menu. Thank you, and we may consider documenting that for silly folks like myself? If it IS documented, maybe make it clearer,

We are glad to hear that the keyboard Menu key works for opening the context menu in the TreeGrid. We'll certainly take your feedback into consideration.

Kindly get back to us for further assistance.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.