[no-noninteractive-element-interactions] should accept the dialog role

[sangikhan29]

Dialog has to handle events such as moving or resizing so dialog should be able to accept event handler.

If the dialog can be moved or resized, ensure that these actions must be performable by keyboard users as well as mouse users.
reference

Also refer to a similar previous issue about listening to esc to dismiss a dialog

[jessebeach]

Good points, let me investigate a bit.

[ckundo]

👋 @jessebeach any more thoughts on this? anything we can do to help?

[jessebeach]

I'm consulting the ARIA oracle ☺️

[jessebeach]

So, @mcking65 and I had a chat. Here are his thoughts:

An "ARIA window" is interactive.

However, there are some nuances related to dialog.

We normally expect interactive elements to be focusable. If not directly focusable, referenceable via activedescendant.

A significant contingent of people (including me) assert that from a screen reader perspective, making dialogs focusable is problematic. However, we conceded to allow browsers to focus dialogs as a fallback.

Browser devs need a place to put focus when an HTML dialog opens. There are several ways that authors can set focus and some options for when they don’t. The issue that held up HTML dialog was what browsers should do when authors don’t set focus and the dialog does not contain a focusable element. In this situation, it would be bad if focus were “lost” (e.g., set to the document. Thus, dialogs are “allowed” to be focus. But, this should only happen when necessary as a recovery mechanism.

This is the primary difference between a window and other interactive elements.

So, only roles descended from roletype > widget are considered interactive:

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/util/isInteractiveRole.js#L11

The change that we will make is, including roles descended from roletype > window, which will include dialog and alertdialog.

To be determined how we deal with the focus issue in this plugin, if at all.

How does that all sound?

[ckundo]

@jessebeach sounds great! thank you for the background and careful consideration. let me know if you want review or a PR!

[sangikhan29]

Thank you @jessebeach for looking into this! It sounds like a reasonable approach for me as well.

[jessebeach]

Thank you @jessebeach for looking into this! It sounds like a reasonable approach for me as well.

@sangikhan29, a million apologies! I should have addressed you as well as @ckundo in my responses. This is after all your issue; you brought it up.

[ckundo]

@jessebeach @ljharb would you like us to take a stab at a PR? cc @sangikhan29

[ljharb]

Yes please :-) that’s what the help wanted label means.

[jessebeach]

Start with the files in the utility, such as isInteractive.

[jessebeach]

Set the 'window' role to be interactive.