Components: Add onFocusOutside replacement to Popover onClickOutside #14851

aduth · 2019-04-05T20:32:30Z

This pull request seeks to refactor popovers to avoid relying on "click outside" behaviors in popovers, deprecating the Popover component's onClickOutside prop in favor of a substitute onFocusOutside. This accounts for more reasons for focus transitions not previously reflected in onClickOutside, such as that described by the bug of #14754.

Status: While functionally complete, I'm considering this to be blocked by an apparent incompatibility with a tangentially-related bug described at #14849 . Notably, when toggling an option in the More Options menu, the menu will no longer become closed again from clicks elsewhere in the page.

Testing instructions:

Repeat Steps to Reproduce from #14754 , verifying that the menu is closed as expected.

Verify there are no changes in behavior from other Popover usage, particularly specialized cases such as:

Clicking a DropdownMenu toggle button should toggle itself closed when currently opened
Clicking a result in the link suggestions autocomplete does not dismiss the URL popover

gziolo · 2019-04-10T14:05:05Z

Clicking a result in the link suggestions autocomplete does not dismiss the URL popover

There seems to be a different behavior when using mouse and keyboard. Well, there might be something wrong with the URL popover and autocomplete:

when I use an arrow key, select one of the results and press space it doesn't get selected
when I use an arrow key, select one of the results and press enter it gets selected and focus goes back to RichText field

gziolo

I will finish this review tomorrow. It's looking great so far. I left some questions.

gziolo · 2019-04-10T14:07:29Z

packages/components/src/popover/detect-outside.js

 */
-import clickOutside from 'react-click-outside';


Unrelated question to this PR. Can we also refactor Modal component to stop using react-click-outside? :)

Unrelated question to this PR. Can we also refactor Modal component to stop using react-click-outside? :)

I would like to, yes.

( #6261 (comment) 😞 )

There is still hope then :)

https://unpkg.com/react-click-outside@3.0.1/index.js

Well, it looks like react-click-outside is a simplified version of our own HOC :)

I opened a follow-up to address it – #16878.

gziolo · 2019-04-10T14:11:04Z

packages/components/src/popover/index.js

+	 *
+	 * @param {FocusEvent} event Focus event from onFocusOutside.
+	 */
+	onFocusOutside( event ) {


How can I test this shim? By updating one of the places with usage?

You could locally revert one or both of 55ca76a or 3e8ffc4 to restore those components' use of onClickOutside.

aduth · 2019-05-22T21:24:38Z

This one was a pain to rebase, in good part because of #15053 (cc @youknowriad).

Worth noting that this will resolve some lingering errors after #11360 logged frequently in StrictMode concerning findDOMNode from react-click-outside (related: kentor/react-click-outside#45). Also related to prior conversation #14851 (comment).

youknowriad · 2019-05-23T08:40:04Z

packages/components/src/popover/detect-outside.js

 	}

 	render() {
 		return this.props.children;
 	}
 }

-export default clickOutside( PopoverDetectOutside );
+export default withFocusOutside( PopoverDetectOutside );


This could be a nice hook const useOnFocusOutside( ref, handler )

aduth · 2019-07-29T19:04:00Z

The end-to-end tests seem to be getting stuck when trying to switch from "Code" editor back to "Visual" in the container blocks test cases. I can't see any reason why it would be such a specific issue here.

My hunches are:

Something specific with the plugin under test and its template locking which is causing trouble?
The implementation of withFocusOutside using timeouts could be flawed and allow for race conditions

Separately, I stumbled upon this code, which was introduced more recently and seems like something we might want to update:

gutenberg/packages/block-library/src/image/edit.js

Line 208 in d45c8ea

onClickOutside={ onClickOutside() }

noisysocks · 2019-07-31T05:42:24Z

I figured out how to recreate the bug with some simple steps, but I'm no closer to figuring out what's causing it:

Create a new post
Open the More tools & options menu
Click any menu item, e.g. enable Spotlight mode
Click outside of the menu to dismiss it. The menu does not close

Any thoughts, @aduth?

noisysocks · 2019-08-01T04:46:46Z

Figured it out! It's because clicking on the menu item causes a focus loss. This was reported in #14849. I'll include a fix here.

Switching between `Button` and `IconButton` causes React to remount the `MenuItem` component. This causes a focus loss as well as E2E failures. There's no need to use a `Button` for `MenuItems` that are unselected, since we can simply pass `icon={ undefined }` to the `IconButton`.

noisysocks · 2019-08-01T05:21:30Z

I pushed up 738d987 which fixes the E2E test failures and fixes #14849.

Would you mind giving this a quick test, @gziolo?

Testing instructions:

Verify that #14849 is fixed:

Navigate to Posts > Add New
Click or otherwise activate the "More Options" menu in the top-right
Press Spacebar (assumes first menu item focused)
Note focus loss

Verify there are no changes in behavior from other Popover usage, particularly specialized cases such as:

Clicking a DropdownMenu toggle button should toggle itself closed when currently opened
Clicking a result in the link suggestions autocomplete does not dismiss the URL popover

gziolo · 2019-08-01T10:17:19Z

packages/components/src/menu-item/index.js

-		tagName,
-		{
+	return (
+		<IconButton


It's a bit stretched use of IconButton in the case when there is no icon 😅

However, I can't think of another simple way of handling it where this doesn't trigger re-render of the button. I noticed that this behavior is broken only because we swap IconButton with Button for no reason when only the icon gets removed/added.

Yep, exactly! Switching between the two components causes React to remount the component and lose focus. Looking at IconButton, it seemed to me that icon={} is an optional prop so I felt comfortable doing it this way.

One thing we keep discussing here and there is why not just add an icon prop to the Button block and deprecate the IconButton (or make it just a shortcut)

I'm sure @drw158 @cburton4 have some good ideas on how to approach it :)

I'm fine with anything which makes it less confusing. I guess having more flexible Button and IconButton as a backward-compatible alias makes a lot of sense.

We have an issue open to discuss combining IconButton and Button in #16541

We are leaning towards keeping them separate, but I'll look at this closer to understand the disadvantage.

I'm assuming from the code that this is an issue because Button does not have an icon option. Switching between icon and non-icon buttons for Menu Items is causing technical problems.

Could this be solved by adding an icon option to the Button component, but still keep IconButton a separate component? That way, the unchecked and checked versions of the Menu Item could use just a single component, Button.

To be fair, we already do the opposite here. Not pass the "icon" prop to the IconButton (so it behaves like a Button). If it doesn't make sense to merge the two components into one, I feel we shouldn't do anything specific about it.

gziolo · 2019-08-01T10:21:48Z

@afercia, would you mind running some sanity check for the Manage All Reusable Blocks link in the menu. I have issues confirming that it gets announced as link as expected. I outputted its HTML content and it is still an anchor with role menuitem as expected but I can't confirm it with VoiceOVer.

Aside: yes, I still keep it in mind that we should have no links in the dropdown menu :) I need to find a related issue where @mapk proposes we move it to the Manage Blocks modal and tackle it at last.

Regardless, I think we should move forward with this PR given that it makes More Menu finally usable for keyboard users. The last step to make the experience good is to stop closing this menu when opening modals 🎉

gziolo · 2019-08-01T10:57:34Z

This PR will also partially resolve #15501. There is a remaining issue with focus loss when switching between Code and Visual editor when the post is empty.

afercia · 2019-08-01T12:43:41Z

Thanks for working on this! @gziolo I tested a bit and seems to me everything works as expected. Just one small thing: should the small horizontal "jump" of menuitems with the check icon be fixed in this PR? See animated GIF:

Regarding the way screen readers announce Manage All Reusable Blocks: it has a menuitem role so it's announced as a "menu button" (or similar, depending on the browser / screen reader). ARIA roles override the native role.

However, it still creates some issues. For example: in VoiceOver, this menuitem is not listed in the "Form Controls" list while the other ones are:

open the More menu
press Command Option U to open the VoiceOver "rotor"
right / left arrows to go to the "Form Controls" panel
down / up arrows to browse the list of form controls
see that Manage All Reusable Blocks is missing

For clarity, menuitems can be links. However, an ARIA menu is supposed to be either a menu of actions or a navigation menu. When it's a navigation menu, it should be wrapped in a <nav> element, see the W3C example:

Menu or Menu bar design pattern:
https://www.w3.org/TR/wai-aria-practices-1.1/#menu

Navigation Menubar Example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html

Since the menubar presents a site navigation system, it is wrapped in a navigation region implemented with a nav element that has an aria-label that matches the label on the menubar.

The point is that an ARIA menu can't be a mix of the two things. In this case, all the menuitems perform an action in the current page except Manage All Reusable Blocks, which triggers navigation to another page. This is unexpected for users and there's no way to communicate it properly. See #13390

gziolo · 2019-08-01T13:04:52Z

Thanks for working on this! @gziolo I tested a bit and seems to me everything works as expected. Just one small thing: should the small horizontal "jump" of menuitems with the check icon be fixed in this PR?

Good catch, it needs to be fixed, it would be a regression.

noisysocks · 2019-08-02T01:46:07Z

Thanks for testing all!

The point is that an ARIA menu can't be a mix of the two things. In this case, all the menuitems perform an action in the current page except Manage All Reusable Blocks, which triggers navigation to another page. This is unexpected for users and there's no way to communicate it properly. See #13390

Thanks for going into this. Let's address the issues with Manage All Reusable Blocks as part of #13390. I agree we should remove the menu item altogether.

Just one small thing: should the small horizontal "jump" of menuitems with the check icon be fixed in this PR?

This bug exists in master, so I'll create a separate PR to fix it. I'm keen to get this PR merged as it is blocking some other work.

…14851) * Components: Add onFocusOutside alternative to Popover onClickOutside * Components: Refactor Dropdown to use onFocusOutside * Format Library: Refactor inline link to use onFocusOutside * MenuItem: Always use an IconButton component so as to avoid focus loss. Switching between `Button` and `IconButton` causes React to remount the `MenuItem` component. This causes a focus loss as well as E2E failures. There's no need to use a `Button` for `MenuItems` that are unselected, since we can simply pass `icon={ undefined }` to the `IconButton`.

aduth added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components labels Apr 5, 2019

aduth requested review from ajitbohra, chrisvanpatten, ellatrix, gziolo, jorgefilipecosta, noisysocks, talldan and youknowriad as code owners April 5, 2019 20:32

gziolo assigned aduth Apr 8, 2019

aduth mentioned this pull request Apr 8, 2019

Add popoverProps property to DropDown component #14867

Merged

gziolo reviewed Apr 10, 2019

View reviewed changes

aduth mentioned this pull request Apr 11, 2019

Format Library: Assign Popover anchorRect to update selection position #14938

Merged

aduth force-pushed the remove/popover-on-click-outside branch from 3e8ffc4 to 6419f0d Compare May 22, 2019 21:21

aduth requested review from daniloercoli and SergioEstevao as code owners May 22, 2019 21:21

aduth mentioned this pull request May 22, 2019

Upgrade to React 16.6 stable APIs #11360

Closed

12 tasks

youknowriad reviewed May 23, 2019

View reviewed changes

youknowriad mentioned this pull request May 23, 2019

Remove the usage of react-click-outside from the Modal component #15790

Closed

aduth mentioned this pull request May 23, 2019

Testing: Use SCRIPT_DEBUG in end-to-end test environment #14845

Open

noisysocks mentioned this pull request Jul 15, 2019

NUX: Make tips appear inline #16582

Closed

noisysocks requested a review from etoledom as a code owner July 19, 2019 06:02

noisysocks force-pushed the remove/popover-on-click-outside branch from b1b2f79 to 6308529 Compare July 19, 2019 06:07

aduth added 3 commits July 19, 2019 16:24

Components: Add onFocusOutside alternative to Popover onClickOutside

d0a60d5

Components: Refactor Dropdown to use onFocusOutside

2c86e97

Format Library: Refactor inline link to use onFocusOutside

6231b63

noisysocks mentioned this pull request Aug 1, 2019

Edit Post: More Options menu toggle buttons cause focus loss when toggled #14849

Closed

gziolo approved these changes Aug 1, 2019

View reviewed changes

gziolo mentioned this pull request Aug 1, 2019

Toolbar More menu: focus loss and different behavior between WP 5.2 and master versions #15501

Closed

noisysocks merged commit 5b01c97 into master Aug 2, 2019

noisysocks deleted the remove/popover-on-click-outside branch August 2, 2019 01:46

noisysocks mentioned this pull request Aug 2, 2019

DropdownMenu: Fix shifting menu items #16871

Merged

This was referenced Aug 2, 2019

Accessibility: Fix the issue when focus is moved to the post title from More Menu #16874

Merged

Components: Stop using react-click-outside as a dependency #16878

Merged

gziolo added this to the Gutenberg 6.3 milestone Aug 6, 2019

mmtr mentioned this pull request Aug 15, 2019

Post scheduler: Cannot move to prev/next month #17042

Closed

jorgefilipecosta mentioned this pull request Sep 25, 2019

Changing a RichText value automatically focus the RichText #17505

Closed

ellatrix mentioned this pull request Jan 31, 2020

Popover: fix typo in removing event listener #19978

Merged

6 tasks

stokesman mentioned this pull request Sep 8, 2023

Modal: fix closing when contained iframe is focused #51602

Merged

snyk-io bot mentioned this pull request Aug 13, 2024

[Snyk] Upgrade @wordpress/element from 5.28.0 to 6.3.0 Playgirlkaybraz11/wp-xeet#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Components: Add onFocusOutside replacement to Popover onClickOutside #14851

Components: Add onFocusOutside replacement to Popover onClickOutside #14851

aduth commented Apr 5, 2019 •

edited by gziolo

Loading

gziolo commented Apr 10, 2019

gziolo left a comment

gziolo Apr 10, 2019

aduth Apr 11, 2019

gziolo Apr 12, 2019

gziolo Apr 12, 2019

gziolo Aug 2, 2019

gziolo Apr 10, 2019

aduth Apr 11, 2019

aduth commented May 22, 2019

youknowriad May 23, 2019

aduth commented Jul 29, 2019 •

edited

Loading

noisysocks commented Jul 31, 2019 •

edited

Loading

noisysocks commented Aug 1, 2019

noisysocks commented Aug 1, 2019

gziolo Aug 1, 2019

noisysocks Aug 2, 2019

youknowriad Aug 2, 2019

gziolo Aug 2, 2019

davewhitley Aug 2, 2019

davewhitley Aug 2, 2019 •

edited

Loading

youknowriad Aug 3, 2019

gziolo commented Aug 1, 2019 •

edited

Loading

gziolo commented Aug 1, 2019

afercia commented Aug 1, 2019

gziolo commented Aug 1, 2019

noisysocks commented Aug 2, 2019

Components: Add onFocusOutside replacement to Popover onClickOutside #14851

Components: Add onFocusOutside replacement to Popover onClickOutside #14851

Conversation

aduth commented Apr 5, 2019 • edited by gziolo Loading

gziolo commented Apr 10, 2019

gziolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented May 22, 2019

Choose a reason for hiding this comment

aduth commented Jul 29, 2019 • edited Loading

noisysocks commented Jul 31, 2019 • edited Loading

noisysocks commented Aug 1, 2019

noisysocks commented Aug 1, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davewhitley Aug 2, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Aug 1, 2019 • edited Loading

gziolo commented Aug 1, 2019

afercia commented Aug 1, 2019

gziolo commented Aug 1, 2019

noisysocks commented Aug 2, 2019

aduth commented Apr 5, 2019 •

edited by gziolo

Loading

aduth commented Jul 29, 2019 •

edited

Loading

noisysocks commented Jul 31, 2019 •

edited

Loading

davewhitley Aug 2, 2019 •

edited

Loading

gziolo commented Aug 1, 2019 •

edited

Loading