Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rating component is not accessible

See original GitHub issue

According to the WAVE tool (extension available at: https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/), the Rating component is not accessible, i.e. it is not clear what each star represents.

Here is a sketch of patch to make it better:

diff --git a/src/ui/components/Rating/index.js b/src/ui/components/Rating/index.js
index 24e584192..e6364a81c 100644
--- a/src/ui/components/Rating/index.js
+++ b/src/ui/components/Rating/index.js
@@ -131,6 +131,9 @@ export class RatingBase extends React.Component<InternalProps, StateType> {
       if (hoveringOverStar !== null) {
         isSelected = thisRating <= hoveringOverStar;
       }
+
+      const title = this.renderTitle(rating, readOnly, thisRating);
+
       const props = {
         className: makeClassName('Rating-star', `Rating-rating-${thisRating}`, {
           'Rating-selected-star': isSelected,
@@ -140,7 +143,7 @@ export class RatingBase extends React.Component<InternalProps, StateType> {
         key: `rating-${thisRating}`,
         onClick: undefined,
         onMouseEnter: () => this.onHoverStar(thisRating),
-        title: this.renderTitle(rating, readOnly, thisRating),
+        title,
       };
 
       if (readOnly) {
@@ -151,9 +154,21 @@ export class RatingBase extends React.Component<InternalProps, StateType> {
         props.onClick = this.onSelectRating;
       }
 
+      const id = `Rating-rating-${thisRating}-title`;
+
       return (
         // eslint-disable-next-line react/jsx-key
-        <button type="button" value={thisRating} {...props} />
+        <React.Fragment>
+          <button
+            aria-describedby={id}
+            type="button"
+            value={thisRating}
+            {...props}
+          />
+          <span id={id} className="visually-hidden">
+            {title}
+          </span>
+        </React.Fragment>
       );
     });
   }

I believe this would be a very nice improvement.