WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 8 weeks ago

Last modified 4 weeks ago

#40359 closed enhancement (fixed)

allow arbitrary HTML attributes on <a> produced by Walker_Page

Reported by: pbiron Owned by: SergeyBiryukov
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-patch needs-dev-note
Focuses: accessibility Cc:

Description

Walker_Nav_Menu currently allows arbitrary HTML attributes to be added to the <a> tags it generates via the nav_menu_link_attributes filter.

It would be useful to do the same in Walker_Page (i.e., add a page_menu_link_attributes filter).

My immediate need is to add "aria-current='page'" to the <a> tag for the current page in the output generated by wp_page_menu(). But other potential uses would be to add "target='_blank'", etc.

My current workaround is to subclass Walker_Page, duplicating Walker_Page::start_el() except for adding "aria-current='page'" when $page->ID === $current_page. But that is far from ideal...as I will have to track changes to Walker_Page::start_el() in future released and update my subclass appropriately.

There may be other places across core where a similar filter would also be useful (e.g., Walker_Category) and I'd be willing to look for those other places if my proposed addition to Walker_Page is accepted as a good idea.

Attachments (1)

page_menu_link_attributes.diff (1.6 KB) - added by pbiron 3 months ago.
patch implementing suggestion

Download all attachments as: .zip

Change History (18)

@pbiron
3 months ago

patch implementing suggestion

#1 @pbiron
3 months ago

  • Keywords has-patch added

#2 @pbiron
3 months ago

And here is a sample of a func I'd hook into the filter to satisfy my immediate need:

add_filter ('page_menu_link_attributes', 'add_aria_current', 10, 5) ;

function
add_aria_current ($attrs = array (), $page, $depth, $args, $current_page)
{
	if ($page->ID === $current_page) {
		$attrs['aria-current'] = 'page' ;
		}
//	if (my_is_external_link_func (get_permalink ($page->ID))) {
//		$attrs['target'] = '_blank' ;
//		}

	return ($attrs) ;
}

which, as you can see, would be much cleaner (and more future-proof) than my current workaround of subclassing Walker_Page.

#3 @SergeyBiryukov
8 weeks ago

  • Component changed from General to Menus

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


8 weeks ago

#5 @afercia
8 weeks ago

  • Milestone changed from Awaiting Review to Future Release

Discussed during today's accessibility meeting, the idea makes sense! Moving to future release for consideration.

#6 @SergeyBiryukov
8 weeks ago

My current workaround is to subclass Walker_Page, duplicating Walker_Page::start_el() except for adding "aria-current='page'" when $page->ID === $current_page. But that is far from ideal...as I will have to track changes to Walker_Page::start_el() in future released and update my subclass appropriately.

Using wp_page_menu filter to piggyback on the parent <li> element's current_page_item class could be a simpler workaround:

function wp40359_add_aria_current( $output ) {
	$output = preg_replace(
		'#current_page_item(.*?)"><a #',
		'current_page_item$1"><a aria-current="page" ',
		$output
	);

	return $output;
}
add_filter( 'wp_page_menu', 'wp40359_add_aria_current' );

#7 @pbiron
8 weeks ago

@SergeyBiryukov I avoid filters that require preg_replace() on generated markup to accomplish their goals like the plague...they are too fraught with error, e.g., when something else has hooked into it with a higher priority and inserted additional markup between the close of one tag and the opening of another.

Since I originally opened this ticket I have abandoned the Walker_Page sublcass workaround in favor of a jQuery workaround:

(function ($) {
	$('li.current_page_item a').attr ('aria-current', 'page') ;
})(jQuery)

when it was confirmed by the team that does our WAI reviews that screen readers see such jQuery DOM manipulations.

While my current jQuery workaround works (and is simpler), I would still greatly prefer the proposed page_menu_link_attributes filter.

#8 @SergeyBiryukov
8 weeks ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 40565:

Menus: Introduce page_menu_link_attributes filter in Walker_Page::start_el() for the HTML attributes applied to a page menu item's anchor element.

This complements the nav_menu_link_attributes filter used in Walker_Nav_Menu::start_el().

Props pbiron.
Fixes #40359.

#9 @SergeyBiryukov
8 weeks ago

  • Milestone changed from Future Release to 4.8

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


7 weeks ago

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


7 weeks ago

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


7 weeks ago

#13 @afercia
7 weeks ago

  • Keywords needs-dev-note added

Adding needs-dev-note for the new filter.

#14 @pbiron
7 weeks ago

Related: #40666

#15 follow-up: @adamsoucie
5 weeks ago

This would also apply to pagination

#16 in reply to: ↑ 15 @GrahamArmfield
5 weeks ago

Replying to adamsoucie:

This would also apply to pagination

I agree, and have created ticket #40833 to cover aria-current="page". I guess it could be extended to other attributes, although the current item in the pagination list is not a link.

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


4 weeks ago

Note: See TracTickets for help on using tickets.