Skip to content

Improve accessibility of toggle buttons with contextual aria-labels#1063

Merged
johnbillion merged 8 commits intojohnbillion:developfrom
Ankita19Rathore:improve-toggle-accessibility
Feb 5, 2026
Merged

Improve accessibility of toggle buttons with contextual aria-labels#1063
johnbillion merged 8 commits intojohnbillion:developfrom
Ankita19Rathore:improve-toggle-accessibility

Conversation

@Ankita19Rathore
Copy link
Copy Markdown
Contributor

@Ankita19Rathore Ankita19Rathore commented Jan 10, 2026

What this PR does

This pull request improves the accessibility of the "Toggle more information"
buttons used in the HTML output by making their aria-labels contextual and
descriptive.


What was happening before

Previously, all toggle buttons were created using the following aria-label:

aria-label="Toggle more information"

Because this same label was used everywhere, screen readers announced
multiple buttons with identical text. This made it difficult for users
to understand what each toggle button would expand or control.


What was changed

The build_toggler() method was updated to accept an optional $context
parameter.

Before:

protected static function build_toggler() {
	$out = '<button class="qm-toggle" ... aria-label="Toggle more information">...</button>';
	return $out;
}

After:

protected static function build_toggler( $context = '' ) {
	$label = __( 'Toggle more information', 'query-monitor' );

	if ( $context ) {
		$label = sprintf(
			__( 'Toggle more information about %s', 'query-monitor' ),
			$context
		);
	}

	return '<button class="qm-toggle" ... aria-label="' . esc_attr( $label ) . '">...</button>';
}

Behavior after this change

If context is provided, the aria-label becomes descriptive
(e.g. Toggle more information about Jetpack hook callback).

If no context is provided, the original behavior is preserved.


Why this change is important

Screen reader users rely on aria-labels to understand interactive elements.
Using repeated generic labels reduces accessibility and usability.

By introducing contextual aria-labels, each toggle button can now be
clearly distinguished, aligning with accessibility best practices.


Scope and safety of change

  • The change is limited to the build_toggler() method only.
  • No visual or functional behavior has been altered.
  • Existing functionality remains backward-compatible.
  • No unrelated code was modified.

@Ankita19Rathore
Copy link
Copy Markdown
Contributor Author

I have fixed the issue mentioned above.
Please review the changes.

@johnbillion
Copy link
Copy Markdown
Owner

Thanks for the PR @Ankita19Rathore . I'll take a look soon.

@johnbillion johnbillion added this to the 3.20.3 milestone Jan 29, 2026
@johnbillion johnbillion enabled auto-merge January 29, 2026 20:14
@Ankita19Rathore
Copy link
Copy Markdown
Contributor Author

Thanks for the review!

@johnbillion johnbillion merged commit b91b9ad into johnbillion:develop Feb 5, 2026
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants