<commit_before>import React, {Component, PropTypes} from 'react'
import cx from 'classnames'

const ICON_CLASS_NAMES = {
  latest: 'icon__chart-bars',
  chronological: 'icon__chart-line',
  map: 'icon__location',
  benchmark: 'icon__chart-set',
  table: 'icon__table'
}

export default class TabBar extends Component {
  static propTypes = {
    activeTab: PropTypes.object,
    tabs: PropTypes.array.isRequired,
    disabledTabs: PropTypes.arrayOf(PropTypes.string),
    makeLinkToTab: PropTypes.func.isRequired
  };

  render() {
    const {tabs, activeTab, makeLinkToTab, disabledTabs} = this.props

    const links = tabs.map(tab => {

      const disabled = disabledTabs.includes(tab.name)

      const linkClassName = cx({
        'tabs-menu__link': true,
        'tabs-menu__link--current': activeTab.name === tab.name,
        'tabs-menu__link--disabled': disabled
      })

      const iconClassName = cx({
        'tabs-menu__icon ': true,
        [ICON_CLASS_NAMES[tab.name]]: true
      })

      if (disabledTabs.includes(tab.name)) {
        return (
          <li key={tab.name} className="tabs-menu__list-item">
            <span className={linkClassName}>
            <i className={iconClassName}/>
            {tab.title}
            </span>
          </li>
        )
      }

      return (
        <li title={tab.title} key={tab.name} className="tabs-menu__list-item">
          <a href={makeLinkToTab(tab)} className={linkClassName} data-keep-scroll-position>
            <i className={iconClassName}/>
            {tab.title}
          </a>
        </li>
      )
    })

    return (
      <div className="toggle-list__section-header">
        <nav className="tabs-menu tabs-menu--compact-mobile">
          <ul className="t-no-list-styles tabs-menu__list">
            {links}
          </ul>
        </nav>
      </div>
    )
  }
}<commit_msg>Added aria roles and states to the tab bar. Just to be nice to screenreaderusers so they can see what it is and what is selected.<commit_after>import React, {Component, PropTypes} from 'react'
import cx from 'classnames'

const ICON_CLASS_NAMES = {
  latest: 'icon__chart-bars',
  chronological: 'icon__chart-line',
  map: 'icon__location',
  benchmark: 'icon__chart-set',
  table: 'icon__table'
}

export default class TabBar extends Component {
  static propTypes = {
    activeTab: PropTypes.object,
    tabs: PropTypes.array.isRequired,
    disabledTabs: PropTypes.arrayOf(PropTypes.string),
    makeLinkToTab: PropTypes.func.isRequired
  };

  render() {
    const {tabs, activeTab, makeLinkToTab, disabledTabs} = this.props

    const links = tabs.map(tab => {

      const disabled = disabledTabs.includes(tab.name)

      const linkClassName = cx({
        'tabs-menu__link': true,
        'tabs-menu__link--current': activeTab.name === tab.name,
        'tabs-menu__link--disabled': disabled
      })

      const tabState = cx({
        'true': activeTab.name === tab.name,
        'false': activeTab.name !== tab.name
      })

      const iconClassName = cx({
        'tabs-menu__icon ': true,
        [ICON_CLASS_NAMES[tab.name]]: true
      })

      if (disabledTabs.includes(tab.name)) {
        return (
          <li key={tab.name} className="tabs-menu__list-item" role="tab">
            <span className={linkClassName}>
            <i className={iconClassName}/>
            {tab.title}
            </span>
          </li>
        )
      }

      return (
        <li title={tab.title} key={tab.name} className="tabs-menu__list-item" role="tab" aria-selected={tabState}>
          <a href={makeLinkToTab(tab)} className={linkClassName} data-keep-scroll-position>
            <i className={iconClassName}/>
            {tab.title}
          </a>
        </li>
      )
    })

    return (
      <div className="toggle-list__section-header">
        <nav className="tabs-menu tabs-menu--compact-mobile">
          <ul className="t-no-list-styles tabs-menu__list" role="tablist">
            {links}
          </ul>
        </nav>
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.13341584158415842, 'fraction_numerical': 0.0, 'mean_word_length': 2.3815899581589957, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4415140', 'n_tokens_mistral': 1242, 'n_tokens_neox': 1222, 'n_words': 254}