Skip to content

Add context labeling for toggle buttons #732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Add context labeling for toggle buttons #732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4b78701
Change orphaned label to a span
joedolson Feb 21, 2023
19c3253
Merge branch 'johnbillion:develop' into develop
joedolson Feb 22, 2023
530857d
Revert "Change orphaned label to a span"
joedolson Feb 22, 2023
99a716d
Merge branch 'develop' of https://github.com/joedolson/query-monitor …
joedolson Feb 22, 2023
764380a
Pass labeling data to toggle buttons
joedolson Feb 22, 2023
d6c1e13
Add translator comment
joedolson Feb 22, 2023
f5836c7
Number translator arguments
joedolson Feb 22, 2023
03596e3
Add a fallback for when toggler context isn't provided.
johnbillion Feb 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions output/Html.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,11 +387,24 @@ protected function build_sorter( $heading = '' ) {
/**
* Returns a toggle control. Safe for output.
*
* @param string $context Optional. Information to uniquely label the toggle button for screen readers.
* @return string Markup for the column sorter controls.
*/
protected static function build_toggler() {
$out = '<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="' . esc_attr__( 'Toggle more information', 'query-monitor' ) . '"><span aria-hidden="true">+</span></button>';
return $out;
protected static function build_toggler( $context = '' ) {
if ( $context !== '' ) {
$label = sprintf(
/* translators: Context about what this button toggles */
__( 'Toggle more information for %s', 'query-monitor' ),
wp_strip_all_tags( $context )
);
} else {
$label = __( 'Toggle more information', 'query-monitor' );
}

return sprintf(
'<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="%s"><span aria-hidden="true">+</span></button>',
esc_attr( $label )
);
}

/**
Expand Down
7 changes: 4 additions & 3 deletions output/html/block_editor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ protected static function render_block( $i, array $block, QM_Data_Block_Editor $
echo '</td>';
} else {
echo '<td class="qm-nowrap qm-ltr qm-has-toggle' . esc_attr( $class ) . '">';
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $block['callback']['name'] ); // WPCS: XSS ok;
echo '<ol>';
echo '<li>';
echo self::output_filename( $block['callback']['name'], $block['callback']['file'], $block['callback']['line'] ); // WPCS: XSS ok.
Expand Down Expand Up @@ -298,10 +298,11 @@ protected static function render_block( $i, array $block, QM_Data_Block_Editor $
$inner_html = $block['innerHTML'];

if ( $block['size'] > 300 ) {
$sub_string = substr( $inner_html, 0, 200 );
echo '<td class="qm-ltr qm-has-toggle qm-row-block-html">';
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $sub_string ); // WPCS: XSS ok;
echo '<div class="qm-inverse-toggled"><pre class="qm-pre-wrap"><code>';
echo esc_html( substr( $inner_html, 0, 200 ) ) . '&nbsp;&hellip;';
echo esc_html( $sub_string ) . '&nbsp;&hellip;';
echo '</code></pre></div>';
echo '<div class="qm-toggled"><pre class="qm-pre-wrap"><code>';
echo esc_html( $inner_html );
Expand Down
2 changes: 1 addition & 1 deletion output/html/caps.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ public function output() {
echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $caller ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down
2 changes: 1 addition & 1 deletion output/html/db_queries.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@ protected function output_query_row( array $row, array $cols ) {
echo '<td class="qm-row-caller qm-ltr qm-has-toggle qm-nowrap">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $caller_name ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down
4 changes: 2 additions & 2 deletions output/html/environment.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ public function output() {
echo '<td class="qm-has-toggle qm-ltr">';

echo esc_html( (string) $data->php['error_reporting'] );
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( __( 'Error Reporting', 'query-monitor' ) ); // WPCS: XSS ok;

echo '<div class="qm-toggled">';
echo "<ul class='qm-supplemental'><li>{$error_levels}</li></ul>"; // WPCS: XSS ok.
Expand All @@ -129,7 +129,7 @@ public function output() {
printf( // WPCS: XSS ok.
'<div class="qm-inner-toggle">%1$s %2$s</div>',
esc_html( number_format_i18n( count( $data->php['extensions'] ) ) ),
self::build_toggler()
self::build_toggler( __( 'Extensions', 'query-monitor' ) )
);

echo '<div class="qm-toggled">';
Expand Down
2 changes: 1 addition & 1 deletion output/html/hooks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ public static function output_hook_table( array $hooks ) {
echo '</td>';
} else {
echo '<td class="qm-nowrap qm-ltr qm-has-toggle' . esc_attr( $class ) . '">';
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $action['callback']['name'] ); // WPCS: XSS ok;
echo '<ol>';
echo '<li>';
echo self::output_filename( $action['callback']['name'], $action['callback']['file'], $action['callback']['line'] ); // WPCS: XSS ok.
Expand Down
6 changes: 4 additions & 2 deletions output/html/http.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,9 @@ public function output() {
echo esc_html( $response );

if ( $show_toggle ) {
echo self::build_toggler(); // WPCS: XSS ok;
// translators: 1) HTTP query method, 2) queried URL, 3) HTTP response.
$context = sprintf( __( '%1$s to %2$s with status %3$s', 'query-monitor' ), $row['args']['method'], $url, $response );
echo self::build_toggler( $context ); // WPCS: XSS ok;
echo '<ul class="qm-toggled">';
}

Expand Down Expand Up @@ -245,7 +247,7 @@ public function output() {
echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $caller ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down
2 changes: 1 addition & 1 deletion output/html/languages.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ public function output() {
echo '</td>';
} else {
echo '<td class="qm-nowrap qm-ltr qm-has-toggle">';
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $mofile['caller']['display'] ); // WPCS: XSS ok;
echo '<ol>';
echo '<li>';
// undefined:
Expand Down
2 changes: 1 addition & 1 deletion output/html/logger.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ public function output() {
echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $caller ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down
2 changes: 1 addition & 1 deletion output/html/multisite.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ public function output() {
echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $caller ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down
2 changes: 1 addition & 1 deletion output/html/php_errors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ public function output() {
echo '<td class="qm-row-caller qm-row-stack qm-nowrap qm-ltr qm-has-toggle">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $error['filename'] ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down
4 changes: 2 additions & 2 deletions output/html/timing.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ public function output() {
echo '</td>';
} else {
echo '<td class="qm-ltr qm-has-toggle">';
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $row['function'] ); // WPCS: XSS ok;
echo '<ol>';
echo '<li>';
echo $file; // WPCS: XSS ok.
Expand Down Expand Up @@ -167,7 +167,7 @@ public function output() {
echo '</td>';
} else {
echo '<td class="qm-ltr qm-has-toggle">';
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $row['function'] ); // WPCS: XSS ok;
echo '<ol>';
echo '<li>';
echo $file; // WPCS: XSS ok.
Expand Down
2 changes: 1 addition & 1 deletion output/html/transients.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ public function output() {
echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';

if ( ! empty( $stack ) ) {
echo self::build_toggler(); // WPCS: XSS ok;
echo self::build_toggler( $caller ); // WPCS: XSS ok;
}

echo '<ol>';
Expand Down