{"action":"created","issue":{"url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/issues/124","repository_url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y","labels_url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/issues/124/labels{/name}","comments_url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/issues/124/comments","events_url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/issues/124/events","html_url":"https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/124","id":194928858,"number":124,"title":"Explicitly distinguish interactive from non-interactive elements and roles","user":{"login":"jessebeach","id":345913,"avatar_url":"https://avatars.githubusercontent.com/u/345913?v=3","gravatar_id":"","url":"https://api.github.com/users/jessebeach","html_url":"https://github.com/jessebeach","followers_url":"https://api.github.com/users/jessebeach/followers","following_url":"https://api.github.com/users/jessebeach/following{/other_user}","gists_url":"https://api.github.com/users/jessebeach/gists{/gist_id}","starred_url":"https://api.github.com/users/jessebeach/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessebeach/subscriptions","organizations_url":"https://api.github.com/users/jessebeach/orgs","repos_url":"https://api.github.com/users/jessebeach/repos","events_url":"https://api.github.com/users/jessebeach/events{/privacy}","received_events_url":"https://api.github.com/users/jessebeach/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-12-12T09:41:59Z","updated_at":"2016-12-13T01:50:59Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/pulls/124","html_url":"https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/124","diff_url":"https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/124.diff","patch_url":"https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/124.patch"},"body":"A tabindex should only be required on elements with an interactive role:\r\n\r\n```\r\n[\r\n  'button',\r\n  'checkbox',\r\n  'link',\r\n  'menuitem',\r\n  'menuitemcheckbox',\r\n  'menuitemradio',\r\n  'option',\r\n  'radio',\r\n  'spinbutton',\r\n  'tab',\r\n  'textbox',\r\n]\r\n```\r\n\r\nThere are legitimate use cases for placing an `onClick` on an element that should **not** have a tabIndex: a dialog screen or a container that catches bubbled clicks.\r\n\r\nAs I was codemodding violations of `onclick-has-focus` I found that I was adding `tabIndex={-1}` to hundreds of JSX fragments in order to satisfy the rule. These elements has roles like `presentation` or `listitem`.\r\n\r\nPutting a tabindex on an element that shouldn't have it is just as bad as not having a tabindex on an element that should have it. I fear that the onclick-has-focus rule could incorrectly nudge developers to add tabindexes to elements more than they should. It will teach a bad habit. \r\n\r\nFor this reason, I'm proposing adding 3 util modules: `isNonInteractiveElement`, `isInteractiveRole`, `isNonInteractiveRole`.\r\n\r\nThese three util will allow us to write a rule such as `no-tabindex-on-non-interactives` to discouraged practices like: `<article tabindex=\"0\" />` or `<div role=\"article\" tabindex=\"0\" />`.\r\n\r\nI also modified `onclick-has-focus` to only recommend a tabindex on interactive elements or elements with an interactive role."},"comment":{"url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/issues/comments/266611663","html_url":"https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/124#issuecomment-266611663","issue_url":"https://api.github.com/repos/evcohen/eslint-plugin-jsx-a11y/issues/124","id":266611663,"user":{"login":"jessebeach","id":345913,"avatar_url":"https://avatars.githubusercontent.com/u/345913?v=3","gravatar_id":"","url":"https://api.github.com/users/jessebeach","html_url":"https://github.com/jessebeach","followers_url":"https://api.github.com/users/jessebeach/followers","following_url":"https://api.github.com/users/jessebeach/following{/other_user}","gists_url":"https://api.github.com/users/jessebeach/gists{/gist_id}","starred_url":"https://api.github.com/users/jessebeach/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessebeach/subscriptions","organizations_url":"https://api.github.com/users/jessebeach/orgs","repos_url":"https://api.github.com/users/jessebeach/repos","events_url":"https://api.github.com/users/jessebeach/events{/privacy}","received_events_url":"https://api.github.com/users/jessebeach/received_events","type":"User","site_admin":false},"created_at":"2016-12-13T01:50:59Z","updated_at":"2016-12-13T01:50:59Z","body":"@lencioni There's theory and then there's practice :) I'll get some numbers and make my case for the change. "}}
{"actor":{"display_login":"jessebeach"}}