Skip to content

Mobile submenu toggle aria-label can break for quoted menu item titles #4503

Description

@pirate-bot

Summary

Mobile submenu toggle buttons are expected to render a valid accessible label derived from the parent menu item title and avoid exposing stray text in the menu UI.

For menu item titles containing characters that need HTML-attribute escaping, the generated toggle label can become malformed because the title is inserted into the aria-label attribute without attribute-context escaping. This can affect the visible mobile sidebar menu output and the accessible name exposed to assistive technologies.

Customer context

A customer reported visible "> text artifacts in the Neve mobile navigation sidebar for dropdown menu items. The report points to the mobile submenu toggle markup in Neve and describes an accessibility impact from malformed aria-label output. Customer-identifying details were omitted.

Reproduction notes

Not runtime-reproduced in this session. Code inspection supports this likely reproduction path:

  1. In a Neve site, create a primary menu parent item with children so it renders a mobile submenu toggle.
  2. Use a parent menu title containing a double quote, for example Shop "Deals".
  3. Assign the menu to the primary navigation and view the site at a mobile/sidebar navigation viewport.
  4. Open the navigation menu and inspect the submenu toggle next to the parent item.
  5. Expected: the toggle has a valid accessible label like Toggle Shop "Deals" and no stray text appears.
  6. Actual risk from inspected code: the quote-bearing title is inserted into the aria-label attribute without attribute-context escaping, which can malformed the attribute and affect visible/accessibility output.

The customer-reported ordinary-title Shop"> artifact from the internally injected span was not independently reproduced; WordPress documentation indicates wp_filter_nohtml_kses() strips that span markup.

Diagnosis

Conclusion

Code inspection confirms a Neve product defect in the mobile/sidebar primary navigation path: a dynamic submenu toggle label is assembled into an aria-label attribute without attribute-context escaping. The specific claim that the internally injected <span class="menu-item-title-wrap dd-title"> is preserved by wp_filter_nohtml_kses() was not confirmed; WordPress documentation states that helper strips all HTML. The remaining defect is still relevant for titles containing quote characters or other attribute-sensitive content.

Where this likely occurs

  • inc/views/nav_walker.php:99-180, Neve\Views\Nav_Walker::add_caret(): primary navigation menu item titles with menu-item-has-children are wrapped, then sidebar items build a <button> caret with a dynamic aria-label at line 154. The label concatenates the translated Toggle text with wp_filter_nohtml_kses( $title ) and places the result directly inside a double-quoted attribute.
  • inc/views/nav_walker.php:142-154, Neve\Views\Nav_Walker::add_caret(): the internal span wrapper is added at lines 144-145 before the sidebar button branch. WordPress reference docs for wp_filter_nohtml_kses() indicate the wrapper tags are stripped, so the span wrapper alone is not confirmed as the source of the reported "> artifact.
  • inc/views/secondary_nav_walker.php:18-25, Neve\Views\Secondary_Nav_Walker: the secondary walker extends Nav_Walker, but its constructor does not register the nav_menu_item_title filter. The inspected reported path is the primary Neve walker used by the primary navigation component.
  • header-footer-grid/templates/components/component-nav.php:31-42: primary menu rendering uses \Neve\Views\Nav_Walker, so the affected flow is the HFG primary navigation output, including sidebar/mobile menu IDs containing sidebar.
  • Git history: git blame attributes inc/views/nav_walker.php:154 to commit 4a37a0eb2678cd371123761808b227760787899b (fix: menu dropdown aria attribute #4020, 2023-07-28), which introduced/touched the current aria-label construction. Recent relevant history also includes 5e155600e (fix: long menu items with toggle overlap Closes: #4226) and 1f259dd32 (fix: sidebar not working when no nav menu in header [closes Codeinwp/neve-pro-addon#2973]).

Engineering notes

  • wp_filter_nohtml_kses() is documented as returning filtered content without HTML, so the customer’s explanation that it preserves the injected <span> is not supported by the checked WordPress reference.
  • The generated attribute still combines dynamic title content and translated text inside aria-label="..." without attribute-context escaping. Backslash escaping from wp_filter_nohtml_kses() is not HTML attribute escaping, so quote characters in a menu title remain a plausible path to malformed markup.
  • The affected branch is limited by the inspected conditions: non-AMP requests, args->menu_id containing nv-primary-navigation, menu items with menu-item-has-children, and sidebar/mobile menu IDs containing sidebar.
  • Desktop/non-sidebar primary navigation uses a static Open Submenu label in the inspected branch, so the dynamic-title issue is specific to the sidebar button branch.

Test coverage status

  • Relevant Playwright coverage exists in e2e-tests/specs/customizer/hfg/hfg-menu-item-wrap.spec.ts:6-11, which opens the mobile navigation and queries the submenu button by accessible name Toggle About The Tests.
  • That test covers a normal title and indirectly supports that the span wrapper is not exposed in the accessible name for the fixture title.
  • No relevant coverage was found during inspection for menu item titles containing double quotes, apostrophes, escaped entities, or custom HTML-like title content in the mobile submenu toggle label.

What to verify or explore next

  • Reproduce with a parent menu item title containing a double quote, such as Shop "Deals", in the mobile sidebar primary navigation.
  • Inspect the generated sidebar toggle button HTML and browser-computed accessible name for quoted titles.
  • Run the existing Playwright HFG menu specs, including e2e-tests/specs/customizer/hfg/hfg-menu-item-wrap.spec.ts, after adding a fixture or scenario with attribute-sensitive title content.
  • Verify whether WordPress admin menu-title input normalizes or encodes quotes before they reach nav_menu_item_title in the current supported WordPress versions.

Confidence

Confidence: 82/100

Repository inspection confirms a dynamic mobile submenu toggle label is inserted into an HTML attribute without attribute-context escaping; the customer’s span-specific explanation is partly contradicted by WordPress sanitizer behavior, but the attribute handling remains a product defect.


Source: HelpScout #3303026679
Generated by bug-report-triage workflow (ID: bug-report-triage_6a142d51941bb2.68159156)

Metadata

Metadata

Assignees

No one assigned

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions