v3.1.0

• Convert project to TypeScript (#25)

v3.0.9...v3.1.0

v3.0.9

• Fix tab focus order (#23)
• Don't set tabindex on all panels (#24)

v3.0.8...v3.0.9

v3.0.8

• Add type to HTMLElementTagNameMap in typescript declaration file (#22)

v3.0.7...v3.0.8

v3.0.6

• types(ts): add window declaration 43ea911
• Bump eslint-utils from 1.3.1 to 1.4.2 b63a43d

v3.0.5...v3.0.6

v3.0.5

• Merge pull request #15 from github/publish-to-gpr-as-well acbf9f5
• publish to GPR as a postpublish step 894f014

v3.0.4...v3.0.5

3.0.5

<tab-container> element

A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.

Installation

$ npm install @github/tab-container-element

Usage

import '@github/tab-container-element'

<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab">Tab two</button>
    <button type="button" role="tab">Tab three</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>

Events

• tab-container-change (bubbles, cancelable): fired on <tab-container> before a new tab is selected and visibility is updated. event.detail.relatedTarget is the tab panel that will be selected if the event isn't cancelled.
• tab-container-changed (bubbles): fired on <tab-container> after a new tab is selected and visibility is updated. event.detail.relatedTarget is the newly visible tab panel.

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

v3.0.4

• Merge pull request #12 from github/add-typescript-definition-file 77e5298
• Merge branch 'master' into add-typescript-definition-file 4e25fb8
• add typescript definition file 4ac120a

v3.0.3...v3.0.4

3.0.4

<tab-container> element

A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.

Installation

$ npm install @github/tab-container-element

Usage

import '@github/tab-container-element'

<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab one</button>
    <button type="button" role="tab">Tab two</button>
    <button type="button" role="tab">Tab three</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>

Events

• tab-container-change (bubbles, cancelable): fired on <tab-container> before a new tab is selected and visibility is updated. event.detail.relatedTarget is the tab panel that will be selected if the event isn't cancelled.
• tab-container-changed (bubbles): fired on <tab-container> after a new tab is selected and visibility is updated. event.detail.relatedTarget is the newly visible tab panel.

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

v3.0.3

• Merge pull request #13 from github/dependabot/npm_and_yarn/lodash-4.17.15 614cd3b
• Bump lodash from 4.17.11 to 4.17.15 53f8c0a

v3.0.2...v3.0.3

v3.0.2

• Merge pull request #11 from github/update-deps eb52df5
• update eslint, eslint-plugin-github and flow-bin manually to latest versiosn e05123e
• run npm update 4ec186e

v3.0.1...v3.0.2