{"action":"closed","issue":{"url":"https://api.github.com/repos/frend/frend.co/issues/57","repository_url":"https://api.github.com/repos/frend/frend.co","labels_url":"https://api.github.com/repos/frend/frend.co/issues/57/labels{/name}","comments_url":"https://api.github.com/repos/frend/frend.co/issues/57/comments","events_url":"https://api.github.com/repos/frend/frend.co/issues/57/events","html_url":"https://github.com/frend/frend.co/issues/57","id":141267980,"number":57,"title":"Tabs - Change ul to nav element","user":{"login":"NigelOToole","id":8223444,"avatar_url":"https://avatars.githubusercontent.com/u/8223444?v=3","gravatar_id":"","url":"https://api.github.com/users/NigelOToole","html_url":"https://github.com/NigelOToole","followers_url":"https://api.github.com/users/NigelOToole/followers","following_url":"https://api.github.com/users/NigelOToole/following{/other_user}","gists_url":"https://api.github.com/users/NigelOToole/gists{/gist_id}","starred_url":"https://api.github.com/users/NigelOToole/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NigelOToole/subscriptions","organizations_url":"https://api.github.com/users/NigelOToole/orgs","repos_url":"https://api.github.com/users/NigelOToole/repos","events_url":"https://api.github.com/users/NigelOToole/events{/privacy}","received_events_url":"https://api.github.com/users/NigelOToole/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-03-16T13:04:10Z","updated_at":"2016-03-17T15:02:49Z","closed_at":"2016-03-17T15:02:49Z","body":"I think this is a great set of plugins, thanks. Looking at the tabs I thought changing the ul used for the tablist to a nav element would make sense. Navigation elements which dont have a hierarchy dont really require the structure a ul gives. Replacing it would simplify the markup, styling and javascript. From my research it would have no impact on accessibility either, let me know what you think.  \r\n\r\n**Example markup below.**\r\n\r\n**Before:**\r\n```\r\n<ul role=\"tablist\" class=\"fr-tabs__tablist js-fr-tabs__tablist\">\r\n\t<li role=\"presentation\" class=\"fr-tabs__tablist-item\">\r\n\t\t<a aria-selected=\"true\" tabindex=\"0\" aria-controls=\"tab1\" role=\"tab\" class=\"fr-tabs__tab\" href=\"#tab1\">Tab 1</a>\r\n\t</li>\r\n\t<li role=\"presentation\" class=\"fr-tabs__tablist-item\">\r\n\t\t<a tabindex=\"-1\" aria-controls=\"tab2\" role=\"tab\" class=\"fr-tabs__tab\" href=\"#tab2\">Tab 2</a>\r\n\t</li>\r\n\t<li role=\"presentation\" class=\"fr-tabs__tablist-item\">\r\n\t\t<a tabindex=\"-1\" aria-controls=\"tab3\" role=\"tab\" class=\"fr-tabs__tab\" href=\"#tab3\">Tab 3</a>\r\n\t</li>\r\n</ul>\r\n```\r\n\r\n**After:**\r\n```\r\n<nav role=\"tablist\" class=\"fr-tabs__tablist js-fr-tabs__tablist\">\r\n\t<a aria-selected=\"true\" tabindex=\"0\" aria-controls=\"tab1\" role=\"tab\" class=\"fr-tabs__tab\" href=\"#tab1\">Tab 1</a>\r\n\r\n\t<a tabindex=\"-1\" aria-controls=\"tab2\" role=\"tab\" class=\"fr-tabs__tab\" href=\"#tab2\">Tab 2</a>\r\n\r\n\t<a tabindex=\"-1\" aria-controls=\"tab3\" role=\"tab\" class=\"fr-tabs__tab\" href=\"#tab3\">Tab 3</a>\r\n</nav>\r\n```"}}