{"action":"created","issue":{"url":"https://api.github.com/repos/phetsims/john-travoltage/issues/149","repository_url":"https://api.github.com/repos/phetsims/john-travoltage","labels_url":"https://api.github.com/repos/phetsims/john-travoltage/issues/149/labels{/name}","comments_url":"https://api.github.com/repos/phetsims/john-travoltage/issues/149/comments","events_url":"https://api.github.com/repos/phetsims/john-travoltage/issues/149/events","html_url":"https://github.com/phetsims/john-travoltage/issues/149","id":200228808,"number":149,"title":"More abstraction for accessible components","user":{"login":"jonathanolson","id":480878,"avatar_url":"https://avatars.githubusercontent.com/u/480878?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanolson","html_url":"https://github.com/jonathanolson","followers_url":"https://api.github.com/users/jonathanolson/followers","following_url":"https://api.github.com/users/jonathanolson/following{/other_user}","gists_url":"https://api.github.com/users/jonathanolson/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanolson/subscriptions","organizations_url":"https://api.github.com/users/jonathanolson/orgs","repos_url":"https://api.github.com/users/jonathanolson/repos","events_url":"https://api.github.com/users/jonathanolson/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanolson/received_events","type":"User","site_admin":false},"labels":[{"id":322181766,"url":"https://api.github.com/repos/phetsims/john-travoltage/labels/dev:a11y","name":"dev:a11y","color":"008080","default":false},{"id":48878818,"url":"https://api.github.com/repos/phetsims/john-travoltage/labels/dev:code-review","name":"dev:code-review","color":"104E8B","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-01-11T22:39:23Z","updated_at":"2017-02-01T21:02:20Z","closed_at":null,"body":"It may make sense long-term to think about mix-ins for specific component types.\r\n\r\nFor instance, say you have a Path that you want to be a slider in the DOM. You need:\r\n```js\r\ntagName: 'input',\r\ninputType: 'range',\r\nariaRole: 'slider',\r\n```\r\nset, possibly ```parentContainerTagName: 'div'``` or others, you'll want the workaround:\r\n```js\r\n// Safari seems to require that a range input has a width, otherwise it will not be keyboard accessible.\r\nthis.domElement.style.width = '1px';\r\n```\r\nyou'll want to handle the min/max/step attributes, etc., and maybe custom slider-related functions would be good (handles a Range and a Property{number}).\r\n\r\nNow say you want to do that for a Text element.\r\n\r\nIt makes sense to be able to mix in this \"AccessibleSlider\" behavior into any Node, e.g.:\r\n\r\n```\r\nAccessibleSlider.mixin( AppendageNode ); // after the inherit\r\n```\r\nand\r\n```\r\nthis.initializeAccessibleSlider( ... ); // somewhere in the constructor\r\n```\r\n\r\nwhere the mixin can handle hooking up all of the events (change/input/blur) into a Property{number} value and Property{boolean} dragged that clients can use.\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/phetsims/john-travoltage/issues/comments/276781234","html_url":"https://github.com/phetsims/john-travoltage/issues/149#issuecomment-276781234","issue_url":"https://api.github.com/repos/phetsims/john-travoltage/issues/149","id":276781234,"user":{"login":"jessegreenberg","id":6396244,"avatar_url":"https://avatars.githubusercontent.com/u/6396244?v=3","gravatar_id":"","url":"https://api.github.com/users/jessegreenberg","html_url":"https://github.com/jessegreenberg","followers_url":"https://api.github.com/users/jessegreenberg/followers","following_url":"https://api.github.com/users/jessegreenberg/following{/other_user}","gists_url":"https://api.github.com/users/jessegreenberg/gists{/gist_id}","starred_url":"https://api.github.com/users/jessegreenberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessegreenberg/subscriptions","organizations_url":"https://api.github.com/users/jessegreenberg/orgs","repos_url":"https://api.github.com/users/jessegreenberg/repos","events_url":"https://api.github.com/users/jessegreenberg/events{/privacy}","received_events_url":"https://api.github.com/users/jessegreenberg/received_events","type":"User","site_admin":false},"created_at":"2017-02-01T21:02:20Z","updated_at":"2017-02-01T21:02:20Z","body":"This seems like a really cool plan.\r\n\r\nIs there a precedent for conditionally mixing something in?  For instance, say sun/HSlider mixes in ```AccessibleSlider```, which sets the accessible content and adds axon/Properties for clients.\r\n\r\nBut if in some context we want a sun/HSlider to look like\r\n```html\r\n<div role=\"slider\" tabindex=\"0></div>\r\n```\r\nwith a custom set of listeners and Properties, we could have changes to the HSlider prototype or other things that we don't want."}}
{"actor":{"display_login":"jessegreenberg"}}