Bugzilla – Attachment 182254 Details for
Bug 39706
Accessibility: Missing text alternative for the star rating.
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39706: Add alternative text to the stars rating
Bug-39706-Add-alternative-text-to-the-stars-rating.patch (text/plain), 7.55 KB, created by
Nina Martinez
on 2025-05-12 10:09:48 UTC
(
hide
)
Description:
Bug 39706: Add alternative text to the stars rating
Filename:
MIME Type:
Creator:
Nina Martinez
Created:
2025-05-12 10:09:48 UTC
Size:
7.55 KB
patch
obsolete
>From a20c84f52ec230bc49d9b75b80821ef19f6d370a Mon Sep 17 00:00:00 2001 >From: nina martinez <nina.martinez@biblibre.com> >Date: Wed, 16 Apr 2025 11:46:27 +0200 >Subject: [PATCH] Bug 39706: Add alternative text to the stars rating > >This patch improves the accessibility of the star ratings. To test this patch, you need to use a screen reader. > >Some help for using the screen reader: to navigate between links, use the Tab key, to hear the text on the page, use the arrow keys. > >Test Plan: > >1. Enable the following system preference: OpacStarRatings (results, details, and patron). >2. Apply the patch. >3. Launch your screen reader (ex: Orca). >4. Go to the Opac interface. >5. Make a search. >6. Navigate through the record results and go to the star rating, you should hear only the rating average of each record and the number of votes. >7. On a record, do the same: go to the star rating, you should hear the rating average of the record and the number of votes. >8. Now, log into an account. >9. Make a search. >10. Navigate with the screen reader to the stars; you should hear the same information as in step 6. >11. Click on a record to view the details and navigate to the rating. Now, you can change the rating. Tab through the stars, it should tell you the number of each star. When you use the tab or arrow keys, you should still hear the average and the number of votes. >12. For this part, you need to have a record checkout (if you don't have a record checked out, go to the staff interface and do it. Choose your patron and enter the barcode of the record). >13. Go to your account. In the "Checked Out" section, navigate with the screen reader to the star rating, you should hear the number of stars and be able to change your rating or make a new one. You have to hear your rating, the average and the number of votes. >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 6 +++--- > .../bootstrap/en/includes/user-star-ratings.inc | 1 + > .../opac-tmpl/bootstrap/en/modules/opac-results.tt | 9 +++++---- > koha-tmpl/opac-tmpl/bootstrap/js/ratings.js | 13 +++++++++++++ > 4 files changed, 22 insertions(+), 7 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 5f182f644a..d0caa2b08d 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -2624,7 +2624,7 @@ $star-selected: #EDB867; > height: 28px; > white-space: nowrap; > >- a { >+ span,a { > font: normal normal normal 20px/1 "Font Awesome 6 Free"; > -webkit-font-smoothing: antialiased; > margin-right: 2px; >@@ -2655,7 +2655,7 @@ $star-selected: #EDB867; > } > > .br-readonly { >- a { >+ span, a { > cursor: default; > } > } >@@ -2670,7 +2670,7 @@ $star-selected: #EDB867; > @media print { > .br-theme-fontawesome-stars { > .br-widget { >- a { >+ span,a { > &::after { > color: #000000; > content: "\f006"; >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/user-star-ratings.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/user-star-ratings.inc >index b5aaac3e4a..7d3698f7ef 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/user-star-ratings.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/user-star-ratings.inc >@@ -16,6 +16,7 @@ > </div> > </div> > >+ <label class="sr-only" for="star_rating-[% item.itemnumber | html %]">star rating</label> > <select class="star_rating" id="star_rating-[% item.itemnumber | html %]" name="rating" autocomplete="off" data-biblionumber="[% item.biblionumber | html %]" data-context="rating-[% item.itemnumber | html %]"> > [% IF ( rating_avg_int == 0 ) %] > <option value="" selected="selected"></option> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >index f05b1fccd2..75d85ca6ce 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt >@@ -386,6 +386,7 @@ > [% INCLUDE "openlibrary-readapi.inc" bib = SEARCH_RESULT %] > > [% IF ( OpacStarRatings == 'all' ) %] >+ <span class="sr-only"> star rating </span> > <div class="results_summary ratings"> > [% SET rating_avg = SEARCH_RESULT.ratings.get_avg_rating() %] > [% rating_avg_int = BLOCK %][% rating_avg | format("%.0f") %][% END %] >@@ -393,16 +394,16 @@ > <div class="br-widget br-readonly"> > [% FOREACH i IN [ 1 2 3 4 5 ] %] > [% IF rating_avg_int == i %] >- <a href="#" class="br-selected br-current"></a> >+ <span href="#" class="br-selected br-current"></span> > [% ELSIF rating_avg_int > i %] >- <a href="#" class="br-selected"></a> >+ <span href="#" class="br-selected"></span> > [% ELSE %] >- <a href="#"></a> >+ <span href="#"></span> > [% END %] > [% END %] > </div> > </div> >- >+ <span class="sr-only"> Average : [% rating_avg | html %] out of 5 stars</span> > [% IF SEARCH_RESULT.ratings.count > 0 %] > <span id="rating_total_[% SEARCH_RESULT.biblionumber | html %]"> ([% SEARCH_RESULT.ratings.count | html %] votes)</span> > [% ELSE %] >diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/ratings.js b/koha-tmpl/opac-tmpl/bootstrap/js/ratings.js >index 7c70068dbf..13be3083c7 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/js/ratings.js >+++ b/koha-tmpl/opac-tmpl/bootstrap/js/ratings.js >@@ -58,4 +58,17 @@ $(document).ready(function () { > var context = "#" + $(this).data("context"); > $(context).barrating("set", ""); > }); >+ >+ $(".br-widget a").each(function () { >+ if (!is_logged_in) { >+ var span = $("<span></span>"); >+ $.each(this.attributes, function () { >+ span.attr(this.name, this.value); >+ }); >+ $(this).replaceWith(span); >+ } else { >+ var data_rating = $(this).attr("data-rating-value"); >+ $(this).append('<span class="sr-only">' + data_rating + "</span>"); >+ } >+ }); > }); >-- >2.43.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39706
: 182254