Skip to content

[Accessibility] Make the rating stars accessible #53018

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

Merged
louwie17 merged 30 commits into from
Jan 14, 2025
Merged

[Accessibility] Make the rating stars accessible #53018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
670f81e
Add i18n_rating_legend and i18n_rating_options props to wc_single_pro…
Manussakis Nov 21, 2024
7019283
Add alternative text to star pseudo element
Manussakis Nov 21, 2024
b63536f
Add keyboard navigation to rating starts
Manussakis Nov 21, 2024
e7f06e1
Preserve old rating stars markup
Manussakis Nov 22, 2024
e9e77f7
Create reset-rating-fieldset mixin
Manussakis Nov 22, 2024
dedc1ab
Update rating style on TT3 theme
Manussakis Nov 22, 2024
8702dad
Update rating style on TT2 theme
Manussakis Nov 22, 2024
3a906cc
Update rating style on TT1 theme
Manussakis Nov 22, 2024
e70bb44
Update rating style on TT theme
Manussakis Nov 22, 2024
95c9a3f
Update rating style on T19 theme
Manussakis Nov 22, 2024
101d3b9
Update rating style on T17 theme
Manussakis Nov 22, 2024
ab03a36
Adjust unit to rem
Manussakis Nov 22, 2024
a0e3462
Add changelog file
Manussakis Nov 22, 2024
0b8c37d
Merge branch 'trunk' into fix/51918
Manussakis Nov 22, 2024
2dfbba6
Fix start selection
Manussakis Nov 22, 2024
3f69e44
Merge branch 'trunk' into fix/51918
Manussakis Nov 22, 2024
27c3541
Merge branch 'trunk' into fix/51918
Manussakis Nov 26, 2024
7967f0e
Prevent keyup events from being triggered on the flexslider when the …
Manussakis Nov 26, 2024
982e5cc
Add white space to keep the code standard
Manussakis Nov 27, 2024
d121e58
Add white space to keep the code standard
Manussakis Nov 27, 2024
e72e0d0
Add white space to keep the code standard
Manussakis Nov 27, 2024
38c6f37
Fix slider when clicking on the thumbnail with focus on tab or stars
Manussakis Nov 27, 2024
eb70de5
Merge branch 'trunk' into fix/51918
Manussakis Dec 13, 2024
83b3157
Merge branch 'trunk' into fix/51918
Manussakis Dec 17, 2024
7e403c8
Remove styles for fieldset inside form rating
Manussakis Dec 17, 2024
204ce0d
Remove i18n_rating_legend translation
Manussakis Dec 17, 2024
17dbd98
Add id to the rating form label
Manussakis Dec 17, 2024
34f2b18
Remove fieldset and legend from rating group
Manussakis Dec 17, 2024
dc847ca
Merge branch 'trunk' into fix/51918
Manussakis Jan 10, 2025
47dec94
Update single-product-review template version
Manussakis Jan 10, 2025
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
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/fix-51918
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: major
Type: enhancement

Improve accessibility of the rating stars
1 change: 1 addition & 0 deletions plugins/woocommerce/client/legacy/css/woocommerce.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,6 +870,7 @@ p.demo_store,
line-height: 1;
font-family: "WooCommerce";
content: "\e021";
content: "\e021" / "";
Copy link
Collaborator Author

@Manussakis Manussakis Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/ "" is an alternative text for screen readers so they don't try to announce the "\e021" content.

Reference:

text-indent: 0;
}

Expand Down
55 changes: 46 additions & 9 deletions plugins/woocommerce/client/legacy/js/frontend/single-product.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,24 +103,41 @@ jQuery( function( $ ) {
.hide()
.before(
'<p class="stars">\
<span>\
<a class="star-1" href="#">1</a>\
<a class="star-2" href="#">2</a>\
<a class="star-3" href="#">3</a>\
<a class="star-4" href="#">4</a>\
<a class="star-5" href="#">5</a>\
<span role="group" aria-labeledby="comment-form-rating-label">\
<a role="radio" tabindex="0" aria-checked="false" class="star-1" href="#">' +
wc_single_product_params.i18n_rating_options[0] +
'</a>\
<a role="radio" tabindex="-1" aria-checked="false" class="star-2" href="#">' +
wc_single_product_params.i18n_rating_options[1] +
'</a>\
<a role="radio" tabindex="-1" aria-checked="false" class="star-3" href="#">' +
wc_single_product_params.i18n_rating_options[2] +
'</a>\
<a role="radio" tabindex="-1" aria-checked="false" class="star-4" href="#">' +
wc_single_product_params.i18n_rating_options[3] +
'</a>\
<a role="radio" tabindex="-1" aria-checked="false" class="star-5" href="#">' +
wc_single_product_params.i18n_rating_options[4] +
'</a>\
</span>\
</p>'
);
} )
.on( 'click', '#respond p.stars a', function() {
var $star = $( this ),
starPos = $star.closest( 'p.stars' ).find( 'a' ).index( $star ) + 1,
$rating = $( this ).closest( '#respond' ).find( '#rating' ),
$container = $( this ).closest( '.stars' );

$rating.val( $star.text() );
$star.siblings( 'a' ).removeClass( 'active' );
$star.addClass( 'active' );
$rating.val( starPos );
Copy link
Collaborator Author

@Manussakis Manussakis Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Set the rating value by getting the star position in the DOM instead of relying on the text value.

$star.siblings( 'a' )
.removeClass( 'active' )
.attr( 'aria-checked', 'false' )
.attr( 'tabindex', '-1' );
$star
.addClass( 'active' )
.attr( 'aria-checked', 'true' )
.attr( 'tabindex', '0' );
Comment on lines +133 to +140
Copy link
Collaborator Author

@Manussakis Manussakis Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the rating group is focused, the focus ring appears only on the selected option, just like in a normal radio group.

$container.addClass( 'selected' );

return false;
Expand All @@ -134,6 +151,26 @@ jQuery( function( $ ) {

return false;
}
} )
.on( 'keydown', '#respond p.stars a', function( e ) {
Copy link
Collaborator Author

@Manussakis Manussakis Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add keyboard navigation with the arrow keys.

var direction = e.key;
var next = [ 'ArrowRight', 'ArrowDown' ];
var prev = [ 'ArrowLeft', 'ArrowUp' ];
var allDirections = next.concat( prev );

if ( ! allDirections.includes( direction ) ) {
return;
}

e.preventDefault();

if ( next.includes( direction ) ) {
$( this ).next().focus().click();

return;
}

$( this ).prev().focus().click();
} );

// Init Tabs and Star Ratings
Expand Down
7 changes: 7 additions & 0 deletions plugins/woocommerce/includes/class-wc-frontend-scripts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,13 @@ private static function get_script_data( $handle ) {
case 'wc-single-product':
$params = array(
'i18n_required_rating_text' => esc_attr__( 'Please select a rating', 'woocommerce' ),
'i18n_rating_options' => array(
esc_attr__( '1 of 5 stars', 'woocommerce' ),
esc_attr__( '2 of 5 stars', 'woocommerce' ),
esc_attr__( '3 of 5 stars', 'woocommerce' ),
esc_attr__( '4 of 5 stars', 'woocommerce' ),
esc_attr__( '5 of 5 stars', 'woocommerce' ),
),
Comment on lines +513 to +519
Copy link
Collaborator Author

@Manussakis Manussakis Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve how stars are announced by screen readers.

'i18n_product_gallery_trigger_text' => esc_attr__( 'View full-screen image gallery', 'woocommerce' ),
'review_rating_required' => wc_review_ratings_required() ? 'yes' : 'no',
'flexslider' => apply_filters(
Expand Down
4 changes: 2 additions & 2 deletions plugins/woocommerce/templates/single-product-reviews.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
*
* @see https://woocommerce.com/document/template-structure/
* @package WooCommerce\Templates
* @version 9.6.0
* @version 9.7.0
*/

defined( 'ABSPATH' ) || exit;
Expand Down Expand Up @@ -123,7 +123,7 @@
}

if ( wc_review_ratings_enabled() ) {
$comment_form['comment_field'] = '<div class="comment-form-rating"><label for="rating">' . esc_html__( 'Your rating', 'woocommerce' ) . ( wc_review_ratings_required() ? '&nbsp;<span class="required">*</span>' : '' ) . '</label><select name="rating" id="rating" required>
$comment_form['comment_field'] = '<div class="comment-form-rating"><label for="rating" id="comment-form-rating-label">' . esc_html__( 'Your rating', 'woocommerce' ) . ( wc_review_ratings_required() ? '&nbsp;<span class="required">*</span>' : '' ) . '</label><select name="rating" id="rating" required>
<option value="">' . esc_html__( 'Rate&hellip;', 'woocommerce' ) . '</option>
<option value="5">' . esc_html__( 'Perfect', 'woocommerce' ) . '</option>
<option value="4">' . esc_html__( 'Good', 'woocommerce' ) . '</option>
Expand Down
Loading