Skip to content

Commit 94b029d

Browse files
ahuseynahuseyn
authored
Merge pull request #266 from wpengine/previews-a11y-fixes
fix: accessibility fixes
2 parents cf41b76 + c6ca1d1 commit 94b029d

File tree

8 files changed

+37
-21
lines changed

8 files changed

+37
-21
lines changed

‎plugins/hwp-previews/assets/css/hwp-previews.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
.settings_page_hwp-previews #poststuff .postbox .inside h2 {
2+
font-size: 1.3em;
3+
font-weight: 600;
4+
padding-left: 0;
5+
}
6+
17
.hwp-previews-tag-cloud {
28
display: flex;
39
flex-wrap: wrap;

‎plugins/hwp-previews/src/Admin/Settings/Fields/Field/Abstract_Settings_Field.php‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,12 +124,14 @@ public function settings_field_callback( array $args ): void {
124124
$settings_key = $args['settings_key'] ?? HWP_PREVIEWS_SETTINGS_KEY;
125125

126126
printf(
127-
'<div tabindex="0" aria-describedby="%2$s-tooltip" class="hwp-previews-tooltip">
127+
'<span class="hwp-previews-tooltip">
128128
<span class="dashicons dashicons-editor-help"></span>
129-
<span id="%2$s-tooltip" class="tooltip-text description">%1$s</span>
130-
</div>',
129+
<span id="%2$s-%3$s-%4$s-tooltip" class="tooltip-text description">%1$s</span>
130+
</span>',
131131
esc_attr( $this->get_description() ),
132-
esc_attr( $settings_key )
132+
esc_attr( $settings_key ),
133+
esc_attr( $post_type ),
134+
esc_attr( $this->id ),
133135
);
134136

135137
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

‎plugins/hwp-previews/src/Admin/Settings/Fields/Field/Checkbox_Field.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ public function render_field( $option_value, $setting_key, $post_type ): string
4141
: $this->default;
4242

4343
return sprintf(
44-
'<input type="checkbox" name="%1$s[%2$s][%3$s]" value="1" %4$s class="%5$s" />',
44+
'<input type="checkbox" name="%1$s[%2$s][%3$s]" aria-labelledby="%1$s-%2$s-%3$s-tooltip" value="1" %4$s class="%5$s" />',
4545
esc_attr( $setting_key ),
4646
esc_attr( $post_type ),
4747
esc_attr( $this->id ),

‎plugins/hwp-previews/src/Admin/Settings/Fields/Field/Text_Input_Field.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ public function render_field( array $option_value, string $setting_key, string $
5353

5454

5555
return sprintf(
56-
'<input type="%1$s" name="%2$s[%3$s][%4$s]" value="%5$s" placeholder="%6$s" class="%7$s" />',
56+
'<input type="%1$s" name="%2$s[%3$s][%4$s]" aria-labelledby="%2$s-%3$s-%4$s-tooltip" value="%5$s" placeholder="%6$s" class="%7$s" />',
5757
$this->get_input_type(),
5858
esc_attr( $setting_key ),
5959
esc_attr( $post_type ),

‎plugins/hwp-previews/src/Admin/Settings/Templates/settings-page-main.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414
<div class="wrap">
1515
<h1><?php esc_html_e( 'HWP Previews Settings', 'hwp-previews' ); ?></h1>
1616
<form method="post" action="options.php">
17-
<h2 class="nav-tab-wrapper">
17+
<nav class="nav-tab-wrapper">
1818
<?php
1919
foreach ( $hwp_previews_tabs as $hwp_previews_tab_key => $hwp_previews_tab_label ) {
2020
$hwp_previews_tab_url = admin_url( 'admin.php?page=hwp-previews&tab=' . $hwp_previews_tab_key );
2121
$hwp_previews_tab_class = add_cssclass( $hwp_previews_current_tab === $hwp_previews_tab_key ? 'nav-tab-active' : '', 'nav-tab' );
2222
echo '<a href="' . esc_url( $hwp_previews_tab_url ) . '" class="' . esc_attr( $hwp_previews_tab_class ) . '">' . esc_html( $hwp_previews_tab_label ) . '</a>';
2323
}
2424
?>
25-
</h2>
25+
</nav>
2626

2727
<div id="poststuff">
2828
<div id="post-body" class="metabox-holder columns-2">
@@ -45,7 +45,7 @@
4545
<div id="postbox-container-1" class="postbox-container">
4646
<div class="meta-box-sortables">
4747
<div class="postbox">
48-
<h2><?php esc_html_e( 'Available Preview URL Parameters', 'hwp-previews' ); ?></h2>
48+
<h3><?php esc_html_e( 'Available Preview URL Parameters', 'hwp-previews' ); ?></h3>
4949
<div class="inside">
5050
<div class="hwp-previews-tag-cloud">
5151
<?php foreach ( $hwp_previews_params as $hwp_previews_param_name => $hwp_previews_param_desc ) : ?>
@@ -59,7 +59,7 @@
5959
</div>
6060

6161
<div class="postbox">
62-
<h2><?php esc_html_e( 'Get Started With HWP Previews', 'hwp-previews' ); ?></h2>
62+
<h3><?php esc_html_e( 'Get Started With HWP Previews', 'hwp-previews' ); ?></h3>
6363
<div class="inside hwp-previews-docs">
6464

6565
<ul>

‎plugins/hwp-previews/tests/wpunit/Admin/Settings/Fields/Field/CheckboxFieldTest.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,9 @@ public function test_render_field_checked(): void {
6565
$post_type = 'post';
6666

6767
$expected_input_name = 'hwp_previews_settings[' . $post_type . '][in_iframe]';
68+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-in_iframe-tooltip';
6869
$expected_css_class = 'custom-css-class';
69-
$expected_output = '<input type="checkbox" name="' . $expected_input_name . '" value="1" checked=\'checked\' class="' . $expected_css_class . '" />';
70+
$expected_output = '<input type="checkbox" name="' . $expected_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="1" checked=\'checked\' class="' . $expected_css_class . '" />';
7071

7172
$rendered_output = $field->render_field($option_value, $setting_key, $post_type);
7273

@@ -80,8 +81,9 @@ public function test_render_field_unchecked(): void {
8081
$post_type = 'post';
8182

8283
$expected_input_name = 'hwp_previews_settings[' . $post_type . '][in_iframe]';
84+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-in_iframe-tooltip';
8385
$expected_css_class = 'custom-css-class';
84-
$expected_output = '<input type="checkbox" name="' . $expected_input_name . '" value="1" class="' . $expected_css_class . '" />';
86+
$expected_output = '<input type="checkbox" name="' . $expected_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="1" class="' . $expected_css_class . '" />';
8587

8688
$rendered_output = $field->render_field($option_value, $setting_key, $post_type);
8789

@@ -99,7 +101,7 @@ public function test_render_field_without_css_class(): void {
99101
$rendered_output = $field->render_field([], HWP_PREVIEWS_SETTINGS_KEY, 'page');
100102

101103
$this->assertEquals(
102-
'<input type="checkbox" name="hwp_previews_settings[page][in_iframe]" value="1" class="" />',
104+
'<input type="checkbox" name="hwp_previews_settings[page][in_iframe]" aria-labelledby="hwp_previews_settings-page-in_iframe-tooltip" value="1" class="" />',
103105
$rendered_output
104106
);
105107
}

‎plugins/hwp-previews/tests/wpunit/Admin/Settings/Fields/Field/TextInputFieldTest.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,11 @@ public function test_render_field_with_default_value() {
8989

9090
$rendered_output = $field->render_field( $option_value, $setting_key, $post_type );
9191
$excepted_input_name = 'hwp_previews_settings[' . $post_type . '][preview_url]';
92+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-preview_url-tooltip';
9293
$excepted_input_value = 'https://example.com/' . $post_type . '?preview=true&amp;post_id={ID}&amp;name={slug}';
9394
$excepted_css_class = 'custom-css-class';
9495

95-
$expected_output = '<input type="text" name="' . $excepted_input_name . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
96+
$expected_output = '<input type="text" name="' . $excepted_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
9697

9798
$this->assertEquals( $expected_output, $rendered_output );
9899
}
@@ -105,9 +106,10 @@ public function test_render_field_with_no_option_value() {
105106

106107
$rendered_output = $field->render_field( $option_value, $setting_key, $post_type );
107108
$excepted_input_name = 'hwp_previews_settings[' . $post_type . '][preview_url]';
109+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-preview_url-tooltip';
108110
$excepted_input_value = 'https://example.com/' . $post_type . '?preview=true&amp;post_id={ID}&amp;name={slug}';
109111
$excepted_css_class = 'custom-css-class';
110-
$expected_output = '<input type="text" name="' . $excepted_input_name . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
112+
$expected_output = '<input type="text" name="' . $excepted_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
111113

112114
$this->assertEquals( $expected_output, $rendered_output );
113115
}
@@ -123,9 +125,10 @@ public function test_render_field_with_different_option_value_to_default_value()
123125

124126
$rendered_output = $field->render_field( $option_value, $setting_key, $post_type );
125127
$excepted_input_name = 'hwp_previews_settings[' . $post_type . '][preview_url]';
128+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-preview_url-tooltip';
126129
$default_value = 'https://example.com/' . $post_type . '?preview=true&amp;post_id={ID}&amp;name={slug}';
127130
$excepted_css_class = 'custom-css-class';
128-
$expected_output = '<input type="text" name="' . $excepted_input_name . '" value="' . $excepted_input_value . '" placeholder="' . $default_value . '" class="' . $excepted_css_class . '" />';
131+
$expected_output = '<input type="text" name="' . $excepted_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="' . $excepted_input_value . '" placeholder="' . $default_value . '" class="' . $excepted_css_class . '" />';
129132

130133
$this->assertEquals( $expected_output, $rendered_output );
131134
}
@@ -141,7 +144,7 @@ public function test_render_field_without_css_class() {
141144
$rendered_output = $field->render_field( [], HWP_PREVIEWS_SETTINGS_KEY, 'page' );
142145

143146
$this->assertEquals(
144-
'<input type="text" name="hwp_previews_settings[page][preview_url]" value="" placeholder="" class="" />',
147+
'<input type="text" name="hwp_previews_settings[page][preview_url]" aria-labelledby="hwp_previews_settings-page-preview_url-tooltip" value="" placeholder="" class="" />',
145148
$rendered_output
146149
);
147150
}

‎plugins/hwp-previews/tests/wpunit/Admin/Settings/Fields/Field/TextURLFieldTest.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,10 @@ public function test_render_field_with_default_value() {
9191

9292
$rendered_output = $field->render_field( $option_value, $setting_key, $post_type );
9393
$excepted_input_name = 'hwp_previews_settings[' . $post_type . '][preview_url]';
94+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-preview_url-tooltip';
9495
$excepted_input_value = 'https://example.com/' . $post_type . '?preview=true&amp;post_id={ID}&amp;name={slug}';
9596
$excepted_css_class = 'custom-css-class';
96-
$expected_output = '<input type="url" name="' . $excepted_input_name . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
97+
$expected_output = '<input type="url" name="' . $excepted_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
9798

9899
$this->assertEquals( $expected_output, $rendered_output );
99100
}
@@ -106,9 +107,10 @@ public function test_render_field_with_no_option_value() {
106107

107108
$rendered_output = $field->render_field( $option_value, $setting_key, $post_type );
108109
$excepted_input_name = 'hwp_previews_settings[' . $post_type . '][preview_url]';
110+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-preview_url-tooltip';
109111
$excepted_input_value = 'https://example.com/' . $post_type . '?preview=true&amp;post_id={ID}&amp;name={slug}';
110112
$excepted_css_class = 'custom-css-class';
111-
$expected_output = '<input type="url" name="' . $excepted_input_name . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
113+
$expected_output = '<input type="url" name="' . $excepted_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="' . $excepted_input_value . '" placeholder="' . $excepted_input_value . '" class="' . $excepted_css_class . '" />';
112114

113115
$this->assertEquals( $expected_output, $rendered_output );
114116
}
@@ -124,9 +126,10 @@ public function test_render_field_with_different_option_value_to_default_value()
124126

125127
$rendered_output = $field->render_field( $option_value, $setting_key, $post_type );
126128
$excepted_input_name = 'hwp_previews_settings[' . $post_type . '][preview_url]';
129+
$expceted_input_label = 'hwp_previews_settings-' . $post_type . '-preview_url-tooltip';
127130
$default_value = 'https://example.com/' . $post_type . '?preview=true&amp;post_id={ID}&amp;name={slug}';
128131
$excepted_css_class = 'custom-css-class';
129-
$expected_output = '<input type="url" name="' . $excepted_input_name . '" value="' . $excepted_input_value . '" placeholder="' . $default_value . '" class="' . $excepted_css_class . '" />';
132+
$expected_output = '<input type="url" name="' . $excepted_input_name . '" aria-labelledby="' . $expceted_input_label . '" value="' . $excepted_input_value . '" placeholder="' . $default_value . '" class="' . $excepted_css_class . '" />';
130133

131134
$this->assertEquals( $expected_output, $rendered_output );
132135
}
@@ -142,7 +145,7 @@ public function test_render_field_without_css_class() {
142145
$rendered_output = $field->render_field( [], HWP_PREVIEWS_SETTINGS_KEY, 'page' );
143146

144147
$this->assertEquals(
145-
'<input type="url" name="hwp_previews_settings[page][preview_url]" value="" placeholder="" class="" />',
148+
'<input type="url" name="hwp_previews_settings[page][preview_url]" aria-labelledby="hwp_previews_settings-page-preview_url-tooltip" value="" placeholder="" class="" />',
146149
$rendered_output
147150
);
148151
}

0 commit comments

Comments
 (0)