WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 10 days ago

#48894 assigned enhancement

Improve the small user sub window at the right corner on the admin bar a.k.a. the Howdy fly-out

Reported by: ixkaito Owned by: afercia
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: needs-design-feedback has-patch has-screenshots
Focuses: ui, accessibility Cc:

Description

I always accidentally click the link in the small user sub window when I want to publish a post. Does anyone have any ideas to improve this motion? For example, disable the hover effect and display the small window after clicking the link at the right corner.

Attachments (6)

Kapture 2019-12-06 at 15.25.28.gif (7.8 MB) - added by ixkaito 6 months ago.
buddypress_usermenu_example.jpg (22.4 KB) - added by xkon 5 months ago.
Screen Shot 2020-02-19 at 6.32.03 PM.png (234.8 KB) - added by garrett-eclipse 3 months ago.
Fullscreen Mode - The Fullscreen Mode was designed to assist in removing this interface conflict
48894.diff (1.9 KB) - added by audrasjb 5 weeks ago.
Toolbar: Accessibility: Make the ”Howdy” menu open only when clicking
09e96cdc2b0656adf1fb3c482c8e1f26.gif (471.2 KB) - added by audrasjb 5 weeks ago.
Testing 48894.diff
48894.2.diff (2.6 KB) - added by afercia 10 days ago.

Change History (35)

#1 @SergeyBiryukov
6 months ago

  • Component changed from Administration to Toolbar

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

#3 @afercia
5 months ago

  • Keywords needs-design-feedback added

This ticket was discussed during today's accessibility bug-scrub: agreed that maybe it's time to reconsider the whole "My account" fly-out and get a new design. Adding the related keyword.

#4 @xkon
5 months ago

My reply, when discussed on the ticket scrubs, was that by default WordPress uses a dropdown menu at which everything points to just profile.php as well as logout.

There are plugins that already hook there ( see buddypress_usermenu_example.jpg ) so completely changing the functionality might not be optimal but we might want to reconsider the "default state" at least.

Maybe we could utilize a "default state" of having 2 simple links towards the profile and logout without the need of the dropdown and if any plugin adds more items on the menu then it could be "converted" to the way it currently works?

Not sure if that would be possible or a perfect solution but it would definitely avoid the menu from interfering with actions like the Publish mentioned or even the Screen Options / Help that are the usual suspects on the far right corner there.

Re-mentioning this here just to start a discussion on any possible improvements :)

@garrett-eclipse
3 months ago

Fullscreen Mode - The Fullscreen Mode was designed to assist in removing this interface conflict

#5 in reply to: ↑ description @garrett-eclipse
3 months ago

  • Keywords close added

Replying to ixkaito:

I always accidentally click the link in the small user sub window when I want to publish a post. Does anyone have any ideas to improve this motion? For example, disable the hover effect and display the small window after clicking the link at the right corner.

Hello @ixkaito from watching your demo I feel you'd benefit from using the 'Fullscreen mode' of the editor which is found under the triple dot icon ⋮ (More tools & options).
https://core.trac.wordpress.org/raw-attachment/ticket/48894/Screen%20Shot%202020-02-19%20at%206.32.03%20PM.png

This will suppress the admin bar from view when editing a post and remove the conflict of the Publish and User dropdown being in close vicinity.

@afercia / @xkon if the my-account flyout needs a redesign for accessibility improvements can we identify the current issues and pitfalls to help drive any design changes, was there any raised in the scrub to drive the need?

#6 @afercia
3 months ago

  • Keywords close removed

Will propose to add this ticket to the next accessibility team meeting agenda.

I wouldn't say this issue relates only to the block editor page. It is a long standing issue in all the admin pages, where the "Help" and "Screen Options" are close to the fly-out. Not sure this should be closed.

This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.


3 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#9 @afercia
3 months ago

  • Focuses javascript css administration removed
  • Milestone changed from Awaiting Review to 5.5
  • Owner set to afercia
  • Status changed from new to assigned

This ticket was discussed during today's accessibility bug-scrub and last week accessibility meeting: agreed to create a small team dedicated to this issue. Moving to 5.5 for initial research.

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


6 weeks ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


6 weeks ago

This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.


5 weeks ago

#13 @afercia
5 weeks ago

  • Summary changed from Improve the small user sub window at the right corner on the admin bar to Improve the small user sub window at the right corner on the admin bar a.k.a. the Howdy fly-out

This ticket was discussed during today's accessibility weekly meeting. Agreed to start with with a simpler step and make the "Howdy" menu open only when clicking. No hover.

@audrasjb
5 weeks ago

Toolbar: Accessibility: Make the ”Howdy” menu open only when clicking

@audrasjb
5 weeks ago

Testing 48894.diff

#14 @audrasjb
5 weeks ago

  • Keywords has-patch has-screenshots added

Hi,

48894.diff handles our first step here. It replaces hover event with click, only for the Howdy menu.

Works fine on my side, but please test.

Cheers,
Jb

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


5 weeks ago

#16 @garrett-eclipse
5 weeks ago

Has HoverIntent been explored for this reveal?

I understand the switch from hover to click is driven by the accidental interference on hover. But would hoverintent address those concerns without removing the hover functionality completely as it is currently engrained in the users cognitive memory experience.

A similar issue was resolved with hoverintent on wp.org glossary autolinking in make posts as seen in meta#4508

*Sidenote: No extra script needed as jQuery HoverIntent is available by default in WordPress using the hoverIntent enqueue handle.

#17 @afercia
5 weeks ago

Hoverintent is already in place for all the admin bar items, including the "Howdy" menu. That doesn't solve the issue.

Maybe the Howdy menu item needs to visually indicate it works differently. Also, it would be best to check what happens on touch screens, where the touchstart event adds one more click event on the <li> elements.

Aside: since [46872] the admin bar uses a no-jQuery version of hoverintent.

#18 @afercia
5 weeks ago

  • Keywords needs-refresh added

Testing 48894.diff:

  • use Chrome dev tools to test on a mobile device emulation
  • make sure the device type in the Chrome dev tools top bar (at the right of "Zoom" level) is set to "mobile"
  • click the Howdy menu
  • the menu doesn't open

Actually, this part of the patch:

// Toggle hover class on My Account menu.
adminBarMyAccount.addEventListener( 'click', function( event ) {
	event.preventDefault();
	adminBarMyAccount.classList.toggle( 'hover' );
} );

toggles the CSS class a second time so the hover class is added and immediately removed: the menu doesn't open.

This code should run only on non-touch devices.

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 weeks ago

#20 follow-up: @afercia
4 weeks ago

Reporting form today's accessibility bug-scrub. Regarding the link that opens the menu:

We could provide both maybe. There are the hide-if-js and hide-if-no-js CSS classes that can be used for this purpose.

  • link with hide-if-js
  • a separate button with hide-if-no-js

#21 in reply to: ↑ 20 @sabernhardt
4 weeks ago

from afercia:

We could provide both maybe.

"Both" refers to the suggestion of using an expand/collapse button (with JavaScript enabled, otherwise using the link).

I had envisioned that button without the link, featuring:

  1. "Howdy, [name]" as unclickable text outside the button,
  2. The profile image inside the button (so that still shows at mobile sizes),
  3. Button text—such as "Account"—visible at desktop screen sizes,
  4. A down arrow on the side (and maybe up when expanded), and
  5. False/true aria-expanded attributes.

https://live.staticflickr.com/65535/49807870273_58684d6d80_m.jpg

However, it may be better to add a simpler expandable button (perhaps showing only the arrow) next to the current link.

One way or another, adding an arrow would provide a visual indication that things have changed. Then it would be less of a surprise that hovering does nothing.

#23 @afercia
4 weeks ago

Worth noting [47600] changed both "Your Profile" and "My Profile" links in admin menu and toolbar to just "Profile" for consistency. I'd suggest to stay consistent and use "Profile" instead of "Account".

#24 @afercia
4 weeks ago

#48471 was marked as a duplicate.

#25 @afercia
4 weeks ago

Related: #48494 which was in turn split out from #48471.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 weeks ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 weeks ago

@afercia
10 days ago

#28 @afercia
10 days ago

  • Keywords needs-refresh removed

48894.2.diff tries to solve the issue on mobile by removing the click event listener for touch devices. Some testing would be nice (see comment:18).

Apart from that, I'd think we should consider a few more things:

  • the toggle link should have a button semantics and work also with the Space Bar when JS is on
  • this should be implemented via JavaScript with a new function, something like setupMyAccountToggle
  • see also the CSS class aria-button-if-js and what it does
  • as a user, I would expect the menu to close when I click outside of it

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 days ago

Note: See TracTickets for help on using tickets.