Glossary

accessibility
/ ækˌsɛs əˈbɪl ə ti /: noun: a physical, mental, cognitive, or other condition that interferes with, or limits a person's ability to engage in certain tasks or participate in typical daily activities and interactions.
disability
/ ˌdɪs əˈbɪl ɪ ti /: noun: the design of products, devices, services, or environments so as to be usable by people with disabilities.
Inclusive Design
/ ɪnˈklu sɪv / / dɪˈzaɪn /: compound noun: a design process in which a mainstream product, service or environment is designed to be usable by as many people as reasonably possible, without the need for specialized adaptions. Design for one, extend to many.
Universal Design
/ ˌyu nəˈvɜr səl / / dɪˈzaɪn /: compound noun: Universal Design is the design and composition of an environment so that it can be accessed, understood and used to the greatest extent possible by all people regardless of their age, size, ability or disability
Disability Inclusion
/ ˌdɪs əˈbɪl ɪ ti / / ɪnˈklu ʒən /: compound noun: creating equitable experiences for people with disabilities

Meet your new and inclusive five-star rating component

Alright so you’re not interested in the nitty–gritty of how the five–star rating component is built. We covered that in Behind the Scenes of your new and inclusive five-star rating component.

Here’s how to get started.

import { VisuallyHidden } from '@react-aria/visually-hidden';
import { RatingStars, RatingStar } from '@nike/web-a11y-react-aria';

const MyRatingStars = (props) => {
 return (
   <RatingStars name="rate-stuff" id="rate-stars" onSelect={(selectedValue, state) => {
     console.log(selectedValue, state);
   }}>
     <label><VisuallyHidden>Rate Stuff</VisuallyHidden></label>
     <RatingStar value="1" id="r_1">1. Unsatisfactory.</RatingStar>
     <RatingStar value="2">2. Poor.</RatingStar>
     <RatingStar value="3">3. Fair.</RatingStar>
     <RatingStar value="4">4. Good.</RatingStar>
     <RatingStar value="5">5. Excellent.</RatingStar>
   </RatingStars>
 );
};

As of the time of this writing, the component–level stylesheets feature is extremely experimental. Component stylesheets like rating-stars.css are being minified and hashed but have yet to be deployed to a CDN endpoint for end consumers. So, anyhow, you’ll either want to opt out of the autoStyle feature for now by setting autoStyle, and possible scope props of the RatingStars to false:

<RatingStars
 name="rate-stuff"
 id="rate-stars"
 autoStyle={false}
 scope={false}
>

By default RatingStars provides a mechanism for filling in stars correctly based on the current rating, which is keyed off a data-nr-web-a11y-selected-value attribute. When it’s time to author your CSS, have a glance at the Behind the Scenes of your new and inclusive five-star rating component post for a run down on a CSS pattern that could easily be translated to a runtime solution such as CSS–in–JS.

Flexible Usage

If the HTML–inspired pattern above isn’t the right syntax for the job, a prop based pattern is also supported via a data attribute:

const MyRatingStars = () => (
  <RatingStars name="rate-stuff" id="rate-stars" label={<VisuallyHidden>Rate Stuff!</VisuallyHidden>} data={[{
    value: '1',
    id: 'r_1',
    children: '1. Unsatisfactory',
  }, {
    value: '2',
    children: '2. Poor',
  }, {
    value: '3',
    id: 'r_3',
    children: '3. Fair',
  }, {
    value: '4',
    children: '4. Good',
  }, {
    value: '5',
    id: 'r_5',
    children: '5. Excellent',
  }]} />
);

You can expect this HTML–or–prop flexibility in all of our @nike/web-a11y-react-aria components. We feel it is critical particularly to first–class and in–experience A/B tests that need to modify design and behavior to measure business impact.

It’s not required to set an id attribute for your Radio, aka RatingStar, elements. Feel free to omit them, we’ll set a truly unique id automatically under the hood.

You can even set a custom Star graphic

const MyRatingStars = () => (
  <RatingStars name="rate-stuff" id="rate-stars" label={<VisuallyHidden>Rate Stuff!</VisuallyHidden>} data={[{
    value: '1',
    children: '1. Unsatisfactory',
    Star: MyCustomStar,
  }, /* ... */
  ]} />
);

If you’d like your custom star graphics to be exposed to the accessibility tree set hideStarGraphic to false:

<RatingStars name="rate-stuff" id="rate-stars" hideStarGraphic={false}>

Conclusion

Remember to checkout out the Behind the Scenes of your new and inclusive five-star rating component post for some more technical context. It shouldn’t be difficult to drop a five–star rating component into your experience without also bringing tech debt and inaccessibility into our experiences. Now, hopefully it is easier for your team to do just that. Whether you find these patterns useful, have questions, or run into issues weaving them into your experience, we’d love to connect with you over at our #accessibility-support Slack channel.