{"action":"created","issue":{"url":"https://api.github.com/repos/elastic/eui/issues/1089","repository_url":"https://api.github.com/repos/elastic/eui","labels_url":"https://api.github.com/repos/elastic/eui/issues/1089/labels{/name}","comments_url":"https://api.github.com/repos/elastic/eui/issues/1089/comments","events_url":"https://api.github.com/repos/elastic/eui/issues/1089/events","html_url":"https://github.com/elastic/eui/issues/1089","id":348057857,"node_id":"MDU6SXNzdWUzNDgwNTc4NTc=","number":1089,"title":"Support no-animation mode for accessibility","user":{"login":"cjcenizal","id":1238659,"node_id":"MDQ6VXNlcjEyMzg2NTk=","avatar_url":"https://avatars2.githubusercontent.com/u/1238659?v=4","gravatar_id":"","url":"https://api.github.com/users/cjcenizal","html_url":"https://github.com/cjcenizal","followers_url":"https://api.github.com/users/cjcenizal/followers","following_url":"https://api.github.com/users/cjcenizal/following{/other_user}","gists_url":"https://api.github.com/users/cjcenizal/gists{/gist_id}","starred_url":"https://api.github.com/users/cjcenizal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cjcenizal/subscriptions","organizations_url":"https://api.github.com/users/cjcenizal/orgs","repos_url":"https://api.github.com/users/cjcenizal/repos","events_url":"https://api.github.com/users/cjcenizal/events{/privacy}","received_events_url":"https://api.github.com/users/cjcenizal/received_events","type":"User","site_admin":false},"labels":[{"id":912933848,"node_id":"MDU6TGFiZWw5MTI5MzM4NDg=","url":"https://api.github.com/repos/elastic/eui/labels/WCAG%20AAA","name":"WCAG AAA","color":"bc0375","default":false},{"id":813180454,"node_id":"MDU6TGFiZWw4MTMxODA0NTQ=","url":"https://api.github.com/repos/elastic/eui/labels/accessibility","name":"accessibility","color":"b7f41a","default":false},{"id":903826641,"node_id":"MDU6TGFiZWw5MDM4MjY2NDE=","url":"https://api.github.com/repos/elastic/eui/labels/assign:engineer","name":"assign:engineer","color":"f2af85","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-08-06T19:46:47Z","updated_at":"2018-08-07T07:00:39Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"### What is it?\r\n\r\nFrom the [WCAG guidelines](https://www.w3.org/TR/WCAG21/#animation-from-interactions):\r\n\r\n> **Success Criterion 2.3.3 Animation from Interactions**\r\n> (Level AAA)\r\n>\r\n> Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.\r\n\r\n@spalger and @bmcconaghy are two people on the team who experience distraction from our transition animations (e.g. modal, flyout, context menu, toast).\r\n\r\n### What is being done about it?\r\n\r\nWe have a Kibana PR (https://github.com/elastic/kibana/pull/21629) open that allows the user to enable a \"No animation\" mode in the user settings, which is implemented by adding the following rules:\r\n\r\n```css\r\n*:not(.essentialAnimation),\r\n*:not(.essentialAnimation):before,\r\n*:not(.essentialAnimation):after {\r\n  -webkit-animation-duration: 0s !important;\r\n  animation-duration: 0s !important;\r\n  -webkit-transition-duration: 0s !important;\r\n  transition-duration: 0s !important;\r\n}\r\n```\r\n\r\nThese shortens the length of every transition and animation to 0 seconds so that the animation still takes place, but it takes place immediately.\r\n\r\nIt also allows you to exempt animations from these rules by adding the `.essentialAnimation` class to an element.\r\n\r\n### Where does EUI come in?\r\n\r\nThis works wonderfully for disabling animations, though we did find one situation in the context menu where you can see a flash of overlapping content:\r\n \r\n![context menu panel transition](https://user-images.githubusercontent.com/1238659/43737221-72cfcdc4-9975-11e8-8d2c-b8b545b4c030.gif)\r\n\r\nI think we can solve this problem by adding a background color to the panels inside of the context menu. But that only solves this one issue. Ideally, we should be able catch this kind of problem during EUI development.\r\n\r\nWe can do this by publishing the above styles from EUI as a separate no-animation stylesheet. Then in the docs site, we just need a switch for toggling the stylesheet on and off. Then we would be able to do a quick audit of EUI's components for conflicts with this mode.\r\n\r\nCC @elastic/kibana-design"},"comment":{"url":"https://api.github.com/repos/elastic/eui/issues/comments/410954685","html_url":"https://github.com/elastic/eui/issues/1089#issuecomment-410954685","issue_url":"https://api.github.com/repos/elastic/eui/issues/1089","id":410954685,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMDk1NDY4NQ==","user":{"login":"snide","id":324519,"node_id":"MDQ6VXNlcjMyNDUxOQ==","avatar_url":"https://avatars3.githubusercontent.com/u/324519?v=4","gravatar_id":"","url":"https://api.github.com/users/snide","html_url":"https://github.com/snide","followers_url":"https://api.github.com/users/snide/followers","following_url":"https://api.github.com/users/snide/following{/other_user}","gists_url":"https://api.github.com/users/snide/gists{/gist_id}","starred_url":"https://api.github.com/users/snide/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/snide/subscriptions","organizations_url":"https://api.github.com/users/snide/orgs","repos_url":"https://api.github.com/users/snide/repos","events_url":"https://api.github.com/users/snide/events{/privacy}","received_events_url":"https://api.github.com/users/snide/received_events","type":"User","site_admin":false},"created_at":"2018-08-07T07:00:39Z","updated_at":"2018-08-07T07:00:39Z","author_association":"CONTRIBUTOR","body":"Also, you're welcome to join us in our design meeting on Tuesdays if you want to discuss this further."}}
{"actor":{"display_login":"snide"}}