[wp-trac] [WordPress Trac] #65083: Toolbar: Simplify profile item by removing "Howdy, <UserName>" text and using a circular avatar

[WordPress Trac]

#65083: Toolbar: Simplify profile item by removing "Howdy, <UserName>" text and
using a circular avatar
-------------------------------------+-------------------------------------
 Reporter:  lucasmdo                 |      Owner:  (none)
     Type:  enhancement              |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Toolbar                  |    Version:
 Severity:  normal                   |   Keywords:  needs-patch needs-
  Focuses:  ui, accessibility, css,  |  design
  administration                     |
-------------------------------------+-------------------------------------
 == Problem / Current Behavior ==

 The profile item in the Admin Bar currently displays "Howdy, {Display
 Name}" alongside a small (18×18 px) square avatar. This has three
 problems:

  1. '''Space waste.''' The entire "Howdy, {Display Name}" string — both
 the greeting and the username — consumes significant horizontal space in
 the Toolbar without providing actionable information. The user already
 knows who they are. On narrower viewports or when plugins add their own
 Toolbar items, this width contributes to overflow and wrapping issues (see
 #28983, #53933).
  2. '''Inconsistent icon shape.''' Every other icon in the Toolbar is
 round or icon-shaped. The square avatar is visually inconsistent with the
 rest of the Toolbar.
  3. '''Inconsistent icon size.''' The 18×18 px avatar is smaller than the
 20×20 px icons used throughout the Toolbar, making it an outlier.

 == Proposed Enhancement ==

 Three changes to the `my-account` Toolbar node:

  1. '''Remove the entire "Howdy, {Display Name}" text''' — both the
 greeting and the username — from the top-level Toolbar item. The profile
 menu should display only the avatar icon, with no accompanying text. The
 user's display name is already shown inside the dropdown (`user-info`
 node) and remains in the ARIA label, so no information is lost.
  2. '''Change the avatar shape from square to circle''', aligning it
 visually with the rounded icons used elsewhere in the Toolbar.
  3. '''Increase the avatar size from 18 px to 20 px''' to match the
 standard Toolbar icon dimensions.

 == Rationale ==

  * '''Horizontal space is the Toolbar's scarcest resource.''' Plugins
 (Yoast SEO, W3 Total Cache, WooCommerce, etc.) routinely add items to the
 Toolbar. The "Howdy, {Display Name}" text can be 150–250 px wide depending
 on the display name length. Reclaiming that space directly mitigates the
 wrapping/overlap bugs described in #28983 and #53933.
  * '''Modern convention.''' Most web applications (GitHub, GitLab, Slack,
 Google Workspace) represent the logged-in user as an avatar-only circular
 icon in the top bar. Users are well-trained to recognize this pattern.
  * '''Visual consistency.''' A 20 px circular avatar aligns with the 20×20
 px icons used throughout the Toolbar, eliminating the current size and
 shape mismatch.
  * '''Better handled at the Core level.''' While all three changes can be
 achieved individually through hooks and filters (`admin_bar_menu`,
 `get_avatar`, `wp_enqueue_style`), this is a baseline UX improvement that
 benefits all users. Requiring every site to independently replicate the
 same set of overrides to fix a visual inconsistency and reclaim wasted
 space suggests the default itself should change.

 == Backward Compatibility ==

 This change is purely visual:

  * The `my-account` node ID, parent, href, and dropdown structure remain
 unchanged.
  * The ARIA label (`menu_title`) continues to include the display name, so
 accessibility is preserved.
  * Plugins that modify the "Howdy, {Display Name}" text via
 `admin_bar_menu` or `gettext` will find an empty string for the text
 portion — no errors, no breakage.
  * Themes or plugins that rely on `.with-avatar` CSS selectors will still
 work; only the `img` dimensions and `border-radius` change.
  * The avatar continues to link to the user's profile page.

 == Accessibility ==

  * The `menu_title` meta (used as `aria-label`) must retain the user's
 display name so screen readers announce "Account menu for {Display Name}"
 or equivalent.
  * Removing the visible text does not reduce accessibility because the
 avatar serves as the visual affordance and the ARIA label provides the
 semantic label.
  * A circular 20 px avatar at the standard Toolbar icon size meets WCAG
 2.1 target size guidelines.
  * No keyboard navigation changes are involved.

 == Related Tickets ==

  * #19490 — Filter for "Howdy" text (closed `wontfix`, 2012 — different
 rationale)
  * #28983 — Admin bar length / wrapping (open)
  * #53933 — Admin bar overwrites theme menu on narrow screens (open)
  * #19421 — Admin bar avatar dimensions (fixed)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65083>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform