{"action":"created","issue":{"url":"https://api.github.com/repos/patternfly/patternfly-react/issues/1011","repository_url":"https://api.github.com/repos/patternfly/patternfly-react","labels_url":"https://api.github.com/repos/patternfly/patternfly-react/issues/1011/labels{/name}","comments_url":"https://api.github.com/repos/patternfly/patternfly-react/issues/1011/comments","events_url":"https://api.github.com/repos/patternfly/patternfly-react/issues/1011/events","html_url":"https://github.com/patternfly/patternfly-react/pull/1011","id":387497791,"node_id":"MDExOlB1bGxSZXF1ZXN0MjM1OTczODU0","number":1011,"title":"feat(PF4-Modal): Adds keyboard and screen reader focus trapping","user":{"login":"michaelkro","id":15141412,"node_id":"MDQ6VXNlcjE1MTQxNDEy","avatar_url":"https://avatars3.githubusercontent.com/u/15141412?v=4","gravatar_id":"","url":"https://api.github.com/users/michaelkro","html_url":"https://github.com/michaelkro","followers_url":"https://api.github.com/users/michaelkro/followers","following_url":"https://api.github.com/users/michaelkro/following{/other_user}","gists_url":"https://api.github.com/users/michaelkro/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelkro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelkro/subscriptions","organizations_url":"https://api.github.com/users/michaelkro/orgs","repos_url":"https://api.github.com/users/michaelkro/repos","events_url":"https://api.github.com/users/michaelkro/events{/privacy}","received_events_url":"https://api.github.com/users/michaelkro/received_events","type":"User","site_admin":false},"labels":[{"id":956908271,"node_id":"MDU6TGFiZWw5NTY5MDgyNzE=","url":"https://api.github.com/repos/patternfly/patternfly-react/labels/PF4","name":"PF4","color":"20457c","default":false},{"id":1051840200,"node_id":"MDU6TGFiZWwxMDUxODQwMjAw","url":"https://api.github.com/repos/patternfly/patternfly-react/labels/accessibility","name":"accessibility","color":"d060f2","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-12-04T21:57:30Z","updated_at":"2018-12-05T15:24:21Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/patternfly/patternfly-react/pulls/1011","html_url":"https://github.com/patternfly/patternfly-react/pull/1011","diff_url":"https://github.com/patternfly/patternfly-react/pull/1011.diff","patch_url":"https://github.com/patternfly/patternfly-react/pull/1011.patch"},"body":"BREAKING CHANGE: The reactRoot prop is required\r\n\r\nFixes #561\r\n\r\n**What**:  Adds keyboard and screen reader focus trapping\r\n\r\n**Notes/Resources**:\r\n\r\n1.  [react accessible modal (github.com/reactjs)](https://github.com/reactjs/react-modal)\r\n2.  [a11y dialog](https://github.com/edenspiekermann/a11y-dialog)\r\n3.  The consumer must pass the react root `HTMLElement` as a prop.\r\n4.  When the modal is opened, `aria-hidden=true` is applied to the react root element, hiding it from screen readers.\r\n5.  When the modal is closed, the `aria-hidden` attribute is removed from the react root element"},"comment":{"url":"https://api.github.com/repos/patternfly/patternfly-react/issues/comments/444523883","html_url":"https://github.com/patternfly/patternfly-react/pull/1011#issuecomment-444523883","issue_url":"https://api.github.com/repos/patternfly/patternfly-react/issues/1011","id":444523883,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDUyMzg4Mw==","user":{"login":"michaelkro","id":15141412,"node_id":"MDQ6VXNlcjE1MTQxNDEy","avatar_url":"https://avatars3.githubusercontent.com/u/15141412?v=4","gravatar_id":"","url":"https://api.github.com/users/michaelkro","html_url":"https://github.com/michaelkro","followers_url":"https://api.github.com/users/michaelkro/followers","following_url":"https://api.github.com/users/michaelkro/following{/other_user}","gists_url":"https://api.github.com/users/michaelkro/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelkro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelkro/subscriptions","organizations_url":"https://api.github.com/users/michaelkro/orgs","repos_url":"https://api.github.com/users/michaelkro/repos","events_url":"https://api.github.com/users/michaelkro/events{/privacy}","received_events_url":"https://api.github.com/users/michaelkro/received_events","type":"User","site_admin":false},"created_at":"2018-12-05T15:24:20Z","updated_at":"2018-12-05T15:24:20Z","author_association":"CONTRIBUTOR","body":"Having trouble writing tests that check that the `aria-hidden` attribute is applied/removed from the React root.\r\n\r\nUsing `mount`, it seems that `componentDidUpdate` fires at some unknown time.  Taking a snapshot of `document.body`, I see something like the following\r\n\r\n```js\r\n// Jest Snapshot v1, https://goo.gl/fbAQLP\r\n\r\nexports[`the React root is hidden from screen readers when the modal is open 1`] = `\r\n<body\r\n  class=\"pf-c-backdrop__open\"\r\n>\r\n  <div />\r\n  <div />\r\n  <div />\r\n  <div />\r\n  <div />\r\n  <div />\r\n</body>\r\n`;\r\n```\r\n> On a side note, I'm not sure why there are so many divs here\r\n\r\nNotice that the `pf-c-backdrop__open` class is being applied.  I can comment out [the line that applies that style](https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4/react-core/src/components/Modal/Modal.js#L56), and when I rerun the tests (with the mounted Modal being open), the snapshot does not error, i.e., the class is still somehow being applied.\r\n\r\nAttempts to do something like\r\n\r\n```js\r\n  const view = mount(<Modal {...props} isOpen />);\r\n  const spy = jest.spyOn(document.body.classList, 'add');\r\n\r\n  view.update();\r\n\r\n  expect(spy).toHaveBeenCalled();\r\n```\r\n\r\nalso result in failure.  I was hoping to do the something like\r\n\r\n```js\r\ntest('the React root is hidden from screen readers when the modal is open', () => {\r\n  document.body.appendChild(props.reactRoot);\r\n  const view = mount(<Modal {...props} isOpen />);\r\n  const spy = jest.spyOn(view.prop('reactRoot'), 'setAttribute');\r\n\r\n  view.update();\r\n\r\n  expect(spy).toHaveBeenCalledWith(stuff);\r\n});\r\n```\r\n\r\nAny ideas/suggestions here?"}}
{"actor":{"display_login":"michaelkro"}}