{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/276","labels_url":"https://api.github.com/repos/angular/material/issues/276/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/276/comments","events_url":"https://api.github.com/repos/angular/material/issues/276/events","html_url":"https://github.com/angular/material/issues/276","id":43013458,"number":276,"title":"mdSelect: Add select component","user":{"login":"ajoslin","id":1265995,"avatar_url":"https://avatars.githubusercontent.com/u/1265995?v=3","gravatar_id":"","url":"https://api.github.com/users/ajoslin","html_url":"https://github.com/ajoslin","followers_url":"https://api.github.com/users/ajoslin/followers","following_url":"https://api.github.com/users/ajoslin/following{/other_user}","gists_url":"https://api.github.com/users/ajoslin/gists{/gist_id}","starred_url":"https://api.github.com/users/ajoslin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajoslin/subscriptions","organizations_url":"https://api.github.com/users/ajoslin/orgs","repos_url":"https://api.github.com/users/ajoslin/repos","events_url":"https://api.github.com/users/ajoslin/events{/privacy}","received_events_url":"https://api.github.com/users/ajoslin/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/material/labels/component","name":"component","color":"e11d21"},{"url":"https://api.github.com/repos/angular/material/labels/feature","name":"feature","color":"207de5"}],"state":"open","locked":false,"assignee":{"login":"ajoslin","id":1265995,"avatar_url":"https://avatars.githubusercontent.com/u/1265995?v=3","gravatar_id":"","url":"https://api.github.com/users/ajoslin","html_url":"https://github.com/ajoslin","followers_url":"https://api.github.com/users/ajoslin/followers","following_url":"https://api.github.com/users/ajoslin/following{/other_user}","gists_url":"https://api.github.com/users/ajoslin/gists{/gist_id}","starred_url":"https://api.github.com/users/ajoslin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajoslin/subscriptions","organizations_url":"https://api.github.com/users/ajoslin/orgs","repos_url":"https://api.github.com/users/ajoslin/repos","events_url":"https://api.github.com/users/ajoslin/events{/privacy}","received_events_url":"https://api.github.com/users/ajoslin/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/9","labels_url":"https://api.github.com/repos/angular/material/milestones/9/labels","id":863791,"number":9,"title":"0.8.0","description":"## Goals\r\n\r\n### Specification Efforts\r\n\r\nThe following tasks need design notes to present the problem and identify solution(s):\r\n\r\n- research virtual repeat\r\n- design architectures:\r\n  - text field autoComplete and search features\r\n  - toggle and multi-selection logic for buttons, icon buttons, etc\r\n\r\n### Polymer Parity\r\n\r\nThe following components will provide parity between the implmentations of Polymer and Angular reference implementations of Material Design\r\n\r\n- select\r\n- popup\r\n- svg icons\r\n- menu\r\n- icon buttons\r\n- textfields\r\n  *  `<md-text-error>`,\r\n  *  `<md-text-multiline>`,\r\n  *  `<md-text-autocomplete>`\r\n  *  `<md-text-search>`\r\n- grid list\r\n- list controls\r\n- button (radios, checks, choices)\r\n  *  `<md-checkgroup>` - multiple selectoin child toggle buttons and icon buttons\r\n  *  `<md-radiogroup>` - single selection of a child button\r\n- focus states\r\n","creator":{"login":"ThomasBurleson","id":210413,"avatar_url":"https://avatars.githubusercontent.com/u/210413?v=3","gravatar_id":"","url":"https://api.github.com/users/ThomasBurleson","html_url":"https://github.com/ThomasBurleson","followers_url":"https://api.github.com/users/ThomasBurleson/followers","following_url":"https://api.github.com/users/ThomasBurleson/following{/other_user}","gists_url":"https://api.github.com/users/ThomasBurleson/gists{/gist_id}","starred_url":"https://api.github.com/users/ThomasBurleson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThomasBurleson/subscriptions","organizations_url":"https://api.github.com/users/ThomasBurleson/orgs","repos_url":"https://api.github.com/users/ThomasBurleson/repos","events_url":"https://api.github.com/users/ThomasBurleson/events{/privacy}","received_events_url":"https://api.github.com/users/ThomasBurleson/received_events","type":"User","site_admin":false},"open_issues":82,"closed_issues":17,"state":"open","created_at":"2014-11-12T18:24:47Z","updated_at":"2015-01-14T09:08:37Z","due_on":"2015-01-27T06:00:00Z","closed_at":null},"comments":43,"created_at":"2014-09-17T13:53:10Z","updated_at":"2015-01-15T15:59:30Z","closed_at":null,"body":"The mdSelect is a type of [Material Design Menu](https://www.google.com/design/spec/components/menus.html#menus-behavior) that behaves like and resembles a `<select>`. \r\n\r\n![Menu behavior](https://cloud.githubusercontent.com/assets/1045233/5574315/a7d21b66-8f70-11e4-8ec5-11f6793bd96e.png)\r\n\r\n<h2>Functional requirements</h2>\r\n * Menu should be positioned over their \"emitting\" elements, establishing context\r\n * The selected menu item should not be shown as a duplicate when expanded\r\n * Dismiss menu by selecting an item (unless selecting multiple), tapping outside the menu, or using the Escape key\r\n * Menu animates out from emitting item when expanding\r\n\r\n<h2>Accessibility requirements</h2>\r\n * **mdSelect element**\r\n* `[aria-live=\"polite\"]` makes sure selections are announced in a screen reader. Copy list item text to button only when selection is made with enter/space key, or click (not arrow keys). That way it won't read aloud twice.\r\n * **Button element**\r\n* `[aria-haspopup=\"true\"]` indicates button launches associated input\r\n* `[aria-controls=\"_listID_\"]` links button to options list\r\n* Needs unique ID for pairing with list\r\n * **Unordered list**\r\n* [`role=\"menu\"`](http://www.w3.org/TR/wai-aria/roles#menu) to communicate purpose of list\r\n* `aria-labelledby=\"_buttonID_\"` to pair with button element\r\n* `aria-expanded=\"true | false\"` to indicate when associated panel is expanded\r\n* Unique ID for pairing with button\r\n* `tabindex=\"-1\"`to script focus but remove from tab order\r\n * **Child list items**\r\n* [`role=\"menuitem\"`](http://www.w3.org/TR/wai-aria/roles#menuitem) on each child item\r\n* `tabIndex=\"-1\"` for scripting\r\n \r\n<h2>Resources</h2>\r\n * [WAI-ARIA Listbox](http://www.w3.org/TR/wai-aria/roles#listbox)\r\n * [Using \"listbox\" and \"option\" roles vs. \"menu\" and \"menuitem\"](http://www.marcozehe.de/2014/03/11/easy-aria-tip-7-use-listbox-and-option-roles-when-constructing-autocomplete-lists/)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/70107922","html_url":"https://github.com/angular/material/issues/276#issuecomment-70107922","issue_url":"https://api.github.com/repos/angular/material/issues/276","id":70107922,"user":{"login":"m4cx","id":363497,"avatar_url":"https://avatars.githubusercontent.com/u/363497?v=3","gravatar_id":"","url":"https://api.github.com/users/m4cx","html_url":"https://github.com/m4cx","followers_url":"https://api.github.com/users/m4cx/followers","following_url":"https://api.github.com/users/m4cx/following{/other_user}","gists_url":"https://api.github.com/users/m4cx/gists{/gist_id}","starred_url":"https://api.github.com/users/m4cx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/m4cx/subscriptions","organizations_url":"https://api.github.com/users/m4cx/orgs","repos_url":"https://api.github.com/users/m4cx/repos","events_url":"https://api.github.com/users/m4cx/events{/privacy}","received_events_url":"https://api.github.com/users/m4cx/received_events","type":"User","site_admin":false},"created_at":"2015-01-15T15:59:30Z","updated_at":"2015-01-15T15:59:30Z","body":"+1"}}