{"action":"created","issue":{"url":"https://api.github.com/repos/Talend/ui/issues/1641","repository_url":"https://api.github.com/repos/Talend/ui","labels_url":"https://api.github.com/repos/Talend/ui/issues/1641/labels{/name}","comments_url":"https://api.github.com/repos/Talend/ui/issues/1641/comments","events_url":"https://api.github.com/repos/Talend/ui/issues/1641/events","html_url":"https://github.com/Talend/ui/pull/1641","id":353365720,"node_id":"MDExOlB1bGxSZXF1ZXN0MjEwNDM2NzYz","number":1641,"title":"feat(component/TabBar): improve a11y","user":{"login":"jsomsanith","id":10761073,"node_id":"MDQ6VXNlcjEwNzYxMDcz","avatar_url":"https://avatars2.githubusercontent.com/u/10761073?v=4","gravatar_id":"","url":"https://api.github.com/users/jsomsanith","html_url":"https://github.com/jsomsanith","followers_url":"https://api.github.com/users/jsomsanith/followers","following_url":"https://api.github.com/users/jsomsanith/following{/other_user}","gists_url":"https://api.github.com/users/jsomsanith/gists{/gist_id}","starred_url":"https://api.github.com/users/jsomsanith/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jsomsanith/subscriptions","organizations_url":"https://api.github.com/users/jsomsanith/orgs","repos_url":"https://api.github.com/users/jsomsanith/repos","events_url":"https://api.github.com/users/jsomsanith/events{/privacy}","received_events_url":"https://api.github.com/users/jsomsanith/received_events","type":"User","site_admin":false},"labels":[{"id":525738110,"node_id":"MDU6TGFiZWw1MjU3MzgxMTA=","url":"https://api.github.com/repos/Talend/ui/labels/frontend","name":"frontend","color":"ededed","default":false},{"id":521021722,"node_id":"MDU6TGFiZWw1MjEwMjE3MjI=","url":"https://api.github.com/repos/Talend/ui/labels/need%20review","name":"need review","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":12,"created_at":"2018-08-23T12:50:03Z","updated_at":"2018-09-12T10:07:43Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/Talend/ui/pulls/1641","html_url":"https://github.com/Talend/ui/pull/1641","diff_url":"https://github.com/Talend/ui/pull/1641.diff","patch_url":"https://github.com/Talend/ui/pull/1641.patch"},"body":"**What is the problem this PR is trying to solve?**\r\n* it doesn't allow any keyboard gesture\r\n* no link between the tab and the content\r\n\r\nFor aria recommandation/spec on tabs, see https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html\r\n\r\n**What is the chosen solution to this problem?**\r\n* use react-bootstrap Tabs. It manage left/right and auto select\r\n* use the `Tab.Container` version to force button (no anchor) and pass extra props like `data-feature`\r\n* add home/end gesture\r\n* insert children in the right panel, to benefit the link between tab and pane (aria-describedby)\r\n* fix style to fit guideline\r\n\r\n**Please check if the PR fulfills these requirements**\r\n\r\n* [x] The PR commit message follows our [guidelines](https://github.com/talend/tools/blob/master/tools-root-github/CONTRIBUTING.md)\r\n* [x] Tests for the changes have been added (for bug fixes / features) And [non reg](./screenshots.md) done before need review\r\n* [ ] Docs have been added / updated (for bug fixes / features)\r\n* [ ] Related design / discussions / pages (not in jira), if any, are all linked or available in the PR\r\n\r\n<!-- You can add more checkboxes here -->\r\n\r\n**[x] This PR introduces a breaking change**\r\n\r\n**Change 1:**  \r\n  \r\nThe component was only a bar, with buttons, but not anymore. It takes a props.children to properly place it in the selected tab panel.   \r\nBefore \r\n```\r\n<TabBar items={items} selectedKey={selectedKey} ... />\r\n{items.map(({ item, index }) => {\r\n\tif (selectedKey !== item.key) {\r\n\t\treturn null;\r\n\t}\r\n\treturn (\r\n\t\t<div key={index} aria-describedby={item.id}>\r\n\t\t\tMy Tab {item.label} content\r\n\t\t</div>\r\n\t);\r\n})}\r\n```\r\n\r\nAfter\r\n```\r\nconst selectedItem = items.find(item => selectedKey === item.key);\r\n\r\n<TabBar items={items} selectedKey={selectedKey} ... >\r\n\tMy Tab {selectedItem.label} content\r\n</TabBar\r\n```\r\n\r\n**Change 2:**  \r\n  \r\nTabBar doesn't pass items id anymore. They are generated based on the id passed to TabBar.  \r\nBefore\r\n```\r\nconst items = [\r\n\t{ id: 'my-custom-tab-1', key: '1', label: 'Tab 1' },\r\n\t{ id: 'my-custom-tab-2', key: '2', label: 'Tab 2' },\r\n\t{ id: 'my-custom-tab-3', key: '3', label: 'Tab 3' },\t\r\n];\r\n\r\n<TabBar items={items} ... />\r\n```\r\n\r\nAfter\r\n```\r\nconst items = [\r\n\t{ key: '1', label: 'Tab 1' },\r\n\t{ key: '2', label: 'Tab 2' },\r\n\t{ key: '3', label: 'Tab 3' },\t\r\n];\r\n\r\n<TabBar id=\"my-custom\" items={items} ... />\r\n```\r\n\r\n**Note:**  \r\n  \r\nIf you still want to manage the panels outside, you can still generate the tab ids to match your panels `aria-describedby`.\r\n\r\n```\r\nfunction generateChildId(key, kind) {\r\n\tif (kind === 'tab') {\r\n\t\treturn `my-custom-id-${key}`;\r\n\t}\r\n\treturn null;\r\n}\r\n\r\n<TabBar items={items} generateChildId={generateChildId} ... />\r\n```\r\n\r\n<!-- if the PR introduces a breaking change, add the description here. So when you merge this PR, add this description into the [breaking change wiki](https://github.com/Talend/ui/wiki/BREAKING-CHANGE) in the next version -->\r\n\r\n<!-- **Original Template** -->\r\n\r\n<!-- https://github.com/Talend/tools/blob/master/tools-root-github/.github/PULL_REQUEST_TEMPLATE.md -->\r\n"},"comment":{"url":"https://api.github.com/repos/Talend/ui/issues/comments/420590313","html_url":"https://github.com/Talend/ui/pull/1641#issuecomment-420590313","issue_url":"https://api.github.com/repos/Talend/ui/issues/1641","id":420590313,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMDU5MDMxMw==","user":{"login":"build-travis-ci","id":28656273,"node_id":"MDQ6VXNlcjI4NjU2Mjcz","avatar_url":"https://avatars0.githubusercontent.com/u/28656273?v=4","gravatar_id":"","url":"https://api.github.com/users/build-travis-ci","html_url":"https://github.com/build-travis-ci","followers_url":"https://api.github.com/users/build-travis-ci/followers","following_url":"https://api.github.com/users/build-travis-ci/following{/other_user}","gists_url":"https://api.github.com/users/build-travis-ci/gists{/gist_id}","starred_url":"https://api.github.com/users/build-travis-ci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/build-travis-ci/subscriptions","organizations_url":"https://api.github.com/users/build-travis-ci/orgs","repos_url":"https://api.github.com/users/build-travis-ci/repos","events_url":"https://api.github.com/users/build-travis-ci/events{/privacy}","received_events_url":"https://api.github.com/users/build-travis-ci/received_events","type":"User","site_admin":false},"created_at":"2018-09-12T10:07:43Z","updated_at":"2018-09-12T10:07:43Z","author_association":"COLLABORATOR","body":":octocat: [Demo is available here](http://1641.talend.surge.sh) "}}
{"actor":{"display_login":"build-travis-ci"}}