import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import {
  Button,
  Card,
  CardSection,
  NextButton,
  Text,
  Link,
  Box,
  UnstyledButton,
  TertiaryButton,
} from '../../../index';
import { Radio } from '.';
import { FieldSet } from '../field-set';

<Meta title="Components/Inputs/Radio/Accessibility Tips" />

# Using Radios Accessibly

There are a few things to keep in mind when using Radios to ensure that they are announced correctly by screen readers.

## Make Sure they Have Labels

The content of the `Radio` component will be used as its label:

**Bad**: No text to be used as the label. A screen reader will just read "Radio button".

<Canvas>
  <Radio onSelected={() => {}} value="YELLOW" name="example1" selected />
</Canvas>

**Good**: The text content of the children serves as the label. A screen reader will read "Yellow, Radio button".

<Canvas>
  <Radio onSelected={() => {}} value="YELLOW" name="example1.1" selected>
    Yellow
  </Radio>
</Canvas>

## Make Sure Radios are Announced as a Group

**Bad**: By default, screen readers don't understand when radio buttons are related to each other. In the example below, they will read "Yellow: Radio Button, 1 of 1", "Blue: Radio Button, 1 of 1".

<Canvas>
  <Box stacked="column">
    What's your favorite color?
    <Radio onSelected={() => {}} value="YELLOW" name="example2" selected>
      Yellow
    </Radio>
    <Radio onSelected={() => {}} value="BLUE" name="some-other-name">
      Blue
    </Radio>
  </Box>
</Canvas>

**Better**: Screen readers will read "Yellow: Radio Button, 1 of 2", "Blue: Radio Button, 1 of 2". However in this example, we still don't have an overall label for the button group. It's not clear to the screen reader that "What's your favorite color?" refers to the buttons.

<Canvas>
  <Box stacked="column">
    What's your favorite color?
    <Radio onSelected={() => {}} value="YELLOW" name="example2.1" selected>
      Yellow
    </Radio>
    <Radio onSelected={() => {}} value="BLUE" name="example2.1">
      Blue
    </Radio>
  </Box>
</Canvas>

**Best**: Use `name` to group the buttons, and `FieldSet` to label the overall group:

<Canvas>
  <FieldSet stacked="column" label="What's your favorite color?">
    <Radio onSelected={() => {}} value="YELLOW" name="example2.2" selected>
      Yellow
    </Radio>
    <Radio onSelected={() => {}} value="BLUE" name="example2.2">
      Blue
    </Radio>
  </FieldSet>
</Canvas>

### What if I Don't Like the Default Styling of the FieldSet's Label?

You can us the same `label`/`hideLabel` paradigm we use in other input controls, and then supply your own visual version of the label. Remember to mark your visual version as `aria-hidden` to avoid it getting read twice.

<Canvas>
  <Box>
    <Text aria-hidden bold italic>
      What's your favorite color?
    </Text>
    <FieldSet stacked="column" label="What's your favorite color?" hideLabel>
      <Radio onSelected={() => {}} value="YELLOW" name="example2.3" selected>
        Yellow
      </Radio>
      <Radio onSelected={() => {}} value="BLUE" name="example2.3">
        Blue
      </Radio>
    </FieldSet>
  </Box>
</Canvas>