{"action":"created","issue":{"url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5730","repository_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react","labels_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5730/labels{/name}","comments_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5730/comments","events_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5730/events","html_url":"https://github.com/OfficeDev/office-ui-fabric-react/issues/5730","id":346101981,"node_id":"MDU6SXNzdWUzNDYxMDE5ODE=","number":5730,"title":"IconButton has always aria-hidden property set to true.","user":{"login":"mdmdakbar","id":19491487,"node_id":"MDQ6VXNlcjE5NDkxNDg3","avatar_url":"https://avatars3.githubusercontent.com/u/19491487?v=4","gravatar_id":"","url":"https://api.github.com/users/mdmdakbar","html_url":"https://github.com/mdmdakbar","followers_url":"https://api.github.com/users/mdmdakbar/followers","following_url":"https://api.github.com/users/mdmdakbar/following{/other_user}","gists_url":"https://api.github.com/users/mdmdakbar/gists{/gist_id}","starred_url":"https://api.github.com/users/mdmdakbar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdmdakbar/subscriptions","organizations_url":"https://api.github.com/users/mdmdakbar/orgs","repos_url":"https://api.github.com/users/mdmdakbar/repos","events_url":"https://api.github.com/users/mdmdakbar/events{/privacy}","received_events_url":"https://api.github.com/users/mdmdakbar/received_events","type":"User","site_admin":false},"labels":[{"id":412707026,"node_id":"MDU6TGFiZWw0MTI3MDcwMjY=","url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/labels/Area:%20Accessibility","name":"Area: Accessibility","color":"1d76db","default":false},{"id":822998798,"node_id":"MDU6TGFiZWw4MjI5OTg3OTg=","url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/labels/Component:%20Button","name":"Component: Button","color":"0e8a16","default":false},{"id":469430533,"node_id":"MDU6TGFiZWw0Njk0MzA1MzM=","url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/labels/Needs:%20Triage%F0%9F%94%8D","name":"Needs: Triage🔍","color":"8c51c3","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-07-31T09:15:34Z","updated_at":"2018-07-31T21:32:12Z","closed_at":null,"author_association":"NONE","body":"\r\nProducts/sites affected: (if applicable) VSTS\r\n \r\nIssue:\r\nI am consuming IconButton component to render an icon. But that icon has aria-hidden property set to true(always), which is leading to some accessibility issues with narrator when scan mode is on.\r\nActually, when scan mode is on that button is not getting focus(blue colored focus when narrator is on) and get skipped.\r\n\r\nExpected behavior:\r\nWhile scan mode on, blue colored focus should go on iconButtons\r\n\r\nOn investigation, \r\nI saw that there is an check based on ariaLabel prop in [icon.base.tsx](https://github.com/OfficeDev/office-ui-fabric-react/blob/cfa7a19ec1d6f98c13f822a828e0751f64507dbd/packages/office-ui-fabric-react/src/components/Icon/Icon.base.tsx) file. \r\n\r\n`    const containerProps = ariaLabel\r\n      ? {\r\n          'aria-label': ariaLabel\r\n        }\r\n      : {\r\n          role: 'presentation',\r\n          'aria-hidden': true\r\n        };`\r\n\r\nAnd in [BaseButton.tsx](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx), where we call Icon component we only pass iconProps and className and we are not passing ariaLabel props due to which it always renders with aria-hidden=true.\r\n\r\n`private _onRenderIcon = (\r\n    buttonProps?: IButtonProps,\r\n    defaultRender?: IRenderFunction<IButtonProps>\r\n  ): JSX.Element | null => {\r\n    const { iconProps } = this.props;\r\n    if (iconProps) {\r\n      return <Icon {...iconProps} className={this._classNames.icon} />;\r\n    }\r\n    return null;\r\n  };\r\n`\r\n\r\nCodepen repro: https://codepen.io/mdmdakbar/pen/YYPPWG\r\n\r\nHere, I have rendered an IconButton and passed ariaLabel prop but still aria-hidden property is true"},"comment":{"url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/comments/409374843","html_url":"https://github.com/OfficeDev/office-ui-fabric-react/issues/5730#issuecomment-409374843","issue_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5730","id":409374843,"node_id":"MDEyOklzc3VlQ29tbWVudDQwOTM3NDg0Mw==","user":{"login":"dzearing","id":1110944,"node_id":"MDQ6VXNlcjExMTA5NDQ=","avatar_url":"https://avatars3.githubusercontent.com/u/1110944?v=4","gravatar_id":"","url":"https://api.github.com/users/dzearing","html_url":"https://github.com/dzearing","followers_url":"https://api.github.com/users/dzearing/followers","following_url":"https://api.github.com/users/dzearing/following{/other_user}","gists_url":"https://api.github.com/users/dzearing/gists{/gist_id}","starred_url":"https://api.github.com/users/dzearing/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dzearing/subscriptions","organizations_url":"https://api.github.com/users/dzearing/orgs","repos_url":"https://api.github.com/users/dzearing/repos","events_url":"https://api.github.com/users/dzearing/events{/privacy}","received_events_url":"https://api.github.com/users/dzearing/received_events","type":"User","site_admin":false},"created_at":"2018-07-31T21:32:12Z","updated_at":"2018-07-31T21:32:12Z","author_association":"COLLABORATOR","body":"I'm not sure we are doing anything wrong here. \r\n\r\nThe button element itself is the focusable element. It has `aria-label` on it. The `aria-hidden` attribute you're referring to lives on the `i` element hosting the unicode value rendering the font icon. Reading this aloud would not make sense, but the button itself would.\r\n\r\nI believe @MaxLustig discovered that this is fixed in newer versions of Narrator."}}
{"actor":{"display_login":"dzearing"}}