[Tabs] Accessibility

[solonaarmstrong-zz]

WHY are these changes introduced?

Resolves #583

WHAT is this pull request doing?

Changes style guide examples so panel activates.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, Tabs, Card} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  state = {
    selected: 0,
  };

  handleTabChange = (selectedTabIndex) => {
    this.setState({selected: selectedTabIndex});
  };

  render() {
    const {selected} = this.state;
    const tabs = [
      {
        id: 'all-customers',
        content: 'All',
        accessibilityLabel: 'All customers',
        panelID: 'all-customers-content',
      },
      {
        id: 'accepts-marketing',
        content: 'Accepts marketing',
        panelID: 'accepts-marketing-content',
      },
      {
        id: 'repeat-customers',
        content: 'Repeat customers',
        panelID: 'repeat-customers-content',
      },
      {
        id: 'prospects',
        content: 'Prospects',
        panelID: 'prospects-content',
      },
    ];

    return (
      <Page title="Playground">
        <Card>
          <Tabs tabs={tabs} selected={selected} onSelect={this.handleTabChange}>
            <Card.Section title={tabs[selected].content}>
              <p>Tab {selected} selected</p>
            </Card.Section>
          </Tabs>
        </Card>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[dpersing]

This looks great to me and reads out the tabpanel role as expected when a screen reader user navigates into the panel. The connection between the selected tab and the panel is clearer!

[ry5n]

👍