WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Closing expandable menus in dialog with Escape key

for

Number of posts in this thread: 7 (In chronological order)

From: Fire In The Sky
Date: Thu, Mar 04 2021 12:03PM
Subject: Closing expandable menus in dialog with Escape key
No previous message | Next message →

Hello,

Looking for some thoughts on the situation where a dialog has
expandable menus (similar to 3 dots more options menu), now when this
menu is open then upon pressing Esc what would be the expected
behavior. Should only the menu get collapsed or the the entire dialog
should close?

Currently since the Esc key is tied to the dialog, so even when the
menu is expanded, pressing Esc results in closing the dialog.

What could be the best way to handle this situation?

Thanks!
Ajay

From: Swift, Daniel P.
Date: Thu, Mar 04 2021 12:08PM
Subject: Re: Closing expandable menus in dialog with Escape key
← Previous message | Next message →

I would think that pressing escape would close both (the modal as well as the containing expanded menu). I suggest this because it sounds like you are already doing this with other modal boxes that appear on your site (using escape to close the box). I think it's important to keep this consistency. If all of your modal boxes have the menu … I could see a case for either as long as you are consistent.

Daniel Swift, MBA
Senior Web Specialist
University Communications and Marketing
West Chester University
610.738.0589

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Fire In The Sky
Sent: Thursday, March 4, 2021 2:04 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Closing expandable menus in dialog with Escape key

Hello,

Looking for some thoughts on the situation where a dialog has
expandable menus (similar to 3 dots more options menu), now when this
menu is open then upon pressing Esc what would be the expected
behavior. Should only the menu get collapsed or the the entire dialog
should close?

Currently since the Esc key is tied to the dialog, so even when the
menu is expanded, pressing Esc results in closing the dialog.

What could be the best way to handle this situation?

Thanks!
Ajay

From: Detlev Fischer
Date: Thu, Mar 04 2021 1:15PM
Subject: Re: Closing expandable menus in dialog with Escape key
← Previous message | Next message →

I think the correct behaviour would be to close the expanded menu and leave the dialog open. The next ESC would then close the dialog.

Sent from phone

> Am 04.03.2021 um 20:09 schrieb Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >:
>
> I would think that pressing escape would close both (the modal as well as the containing expanded menu). I suggest this because it sounds like you are already doing this with other modal boxes that appear on your site (using escape to close the box). I think it's important to keep this consistency. If all of your modal boxes have the menu … I could see a case for either as long as you are consistent.
>
> Daniel Swift, MBA
> Senior Web Specialist
> University Communications and Marketing
> West Chester University
> 610.738.0589
>
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Fire In The Sky
> Sent: Thursday, March 4, 2021 2:04 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Closing expandable menus in dialog with Escape key
>
> Hello,
>
> Looking for some thoughts on the situation where a dialog has
> expandable menus (similar to 3 dots more options menu), now when this
> menu is open then upon pressing Esc what would be the expected
> behavior. Should only the menu get collapsed or the the entire dialog
> should close?
>
> Currently since the Esc key is tied to the dialog, so even when the
> menu is expanded, pressing Esc results in closing the dialog.
>
> What could be the best way to handle this situation?
>
> Thanks!
> Ajay
> > > > > > > >

From: Patrick H. Lauke
Date: Thu, Mar 04 2021 1:44PM
Subject: Re: Closing expandable menus in dialog with Escape key
← Previous message | Next message →

On 04/03/2021 20:15, Detlev Fischer wrote:
> I think the correct behaviour would be to close the expanded menu and leave the dialog open. The next ESC would then close the dialog.

Agreed. And how to technically do it? Depends how the setup is...but
basically keep track of what the topmost "context" is (in a dialog, in a
menu or popup, etc) and only trigger that. Or capture key events that
bubble up, and stopPropagation() when they're being handled).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: glen walker
Date: Thu, Mar 04 2021 1:54PM
Subject: Re: Closing expandable menus in dialog with Escape key
← Previous message | Next message →

I agree with the double ESC. The first closes the menu and the second
closes the dialog. Not from a WCAG perspective, which doesn't really
address this situation, but more from user experience. For me personally,
I hate it when I press ESC and *two* things happen. This happens in
LinkedIn (web interface) but I can't pinpoint the exact scenario. I had
started a message to someone, did something else in LinkedIn (which keeps
the non-modal message dialog up), then pressed escape to cancel whatever
else I was doing and then the message dialog asks if I want to discard my
message. I'm glad it has that confirmation message before discarding
because I would have lost a lot of typing. I was escaping from a different
task but the message dialog thought I wanted to escape from there too.
Probably a bug on LinkedIn with not draining the event, but it's a similar
situation to the dialog menu scenario.

From: Mark Magennis
Date: Fri, Mar 05 2021 2:37AM
Subject: Re: [EXTERNAL]Closing expandable menus in dialog with Escape key
← Previous message | Next message →

I agree too. I have seen something similar in user tests where closing a select control dialog using ESC closed its container dialog, which was very frustrating for the user who wanted to continue interacting with other controls within the dialog.

Mark

From: Fire In The Sky
Date: Fri, Mar 05 2021 1:04PM
Subject: Re: [EXTERNAL]Closing expandable menus in dialog with Escape key
← Previous message | No next message

Thank you so much for your valuable inputs, I think I got the answer.
It would be good to close the menu first and then the dialog what I
understand, people may press Esc with an intent of closing the menu
but if it closes the dialog which was not intended, this would let
them to start the flow again which would impact the efficiency.

Though I'd love to have this documented within W3C resources so that
such experience could be standardized.


Cheers!
Ajay

On 3/5/21, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> I agree too. I have seen something similar in user tests where closing a
> select control dialog using ESC closed its container dialog, which was very
> frustrating for the user who wanted to continue interacting with other
> controls within the dialog.
>
> Mark
>
>