| OLD | NEW |
| 1 Polymer({ | 1 Polymer({ |
| 2 is: 'paper-radio-button', | 2 is: 'paper-radio-button', |
| 3 | 3 |
| 4 behaviors: [ | 4 behaviors: [ |
| 5 Polymer.PaperInkyFocusBehavior | 5 Polymer.PaperInkyFocusBehavior, |
| 6 Polymer.IronCheckedElementBehavior |
| 6 ], | 7 ], |
| 7 | 8 |
| 8 hostAttributes: { | 9 hostAttributes: { |
| 9 role: 'radio', | 10 role: 'radio', |
| 10 'aria-checked': false, | 11 'aria-checked': false, |
| 11 tabindex: 0 | 12 tabindex: 0 |
| 12 }, | 13 }, |
| 13 | 14 |
| 14 properties: { | 15 properties: { |
| 15 /** | 16 /** |
| 16 * Fired when the checked state changes due to user interaction. | 17 * Fired when the checked state changes due to user interaction. |
| 17 * | 18 * |
| 18 * @event change | 19 * @event change |
| 19 */ | 20 */ |
| 20 | 21 |
| 21 /** | 22 /** |
| 22 * Fired when the checked state changes. | 23 * Fired when the checked state changes. |
| 23 * | 24 * |
| 24 * @event iron-change | 25 * @event iron-change |
| 25 */ | 26 */ |
| 26 | 27 |
| 27 /** | 28 ariaActiveAttribute: { |
| 28 * Gets or sets the state, `true` is checked and `false` is unchecked. | 29 value: 'aria-checked' |
| 29 */ | 30 } |
| 30 checked: { | 31 }, |
| 31 type: Boolean, | |
| 32 value: false, | |
| 33 reflectToAttribute: true, | |
| 34 notify: true, | |
| 35 observer: '_checkedChanged' | |
| 36 }, | |
| 37 | 32 |
| 38 /** | 33 attached: function() { |
| 39 * If true, the button toggles the active state with each tap or press | 34 this._isReady = true; |
| 40 * of the spacebar. | 35 |
| 41 */ | 36 // Don't stomp over a user-set aria-label. |
| 42 toggles: { | 37 if (!this.getAttribute('aria-label')) { |
| 43 type: Boolean, | 38 this.updateAriaLabel(); |
| 44 value: true, | |
| 45 reflectToAttribute: true | |
| 46 } | 39 } |
| 47 }, | 40 }, |
| 48 | 41 |
| 49 attached: function() { | 42 /** |
| 50 var trimmedText = Polymer.dom(this).textContent.trim(); | 43 * Update the checkbox aria-label. This is a temporary workaround not |
| 51 if (trimmedText === '') { | 44 * being able to observe changes in <content> |
| 52 this.$.radioLabel.hidden = true; | 45 * (see: https://github.com/Polymer/polymer/issues/1773) |
| 53 } | 46 * |
| 54 // Don't stomp over a user-set aria-label. | 47 * Call this if you manually change the contents of the checkbox |
| 55 if (trimmedText !== '' && !this.getAttribute('aria-label')) { | 48 * and want the aria-label to match the new contents. |
| 56 this.setAttribute('aria-label', trimmedText); | 49 */ |
| 57 } | 50 updateAriaLabel: function() { |
| 58 this._isReady = true; | 51 this.setAttribute('aria-label', Polymer.dom(this).textContent.trim()); |
| 59 }, | 52 }, |
| 60 | 53 |
| 61 _buttonStateChanged: function() { | 54 _buttonStateChanged: function() { |
| 62 if (this.disabled) { | 55 if (this.disabled) { |
| 63 return; | 56 return; |
| 64 } | 57 } |
| 65 if (this._isReady) { | 58 if (this._isReady) { |
| 66 this.checked = this.active; | 59 this.checked = this.active; |
| 67 } | 60 } |
| 68 }, | |
| 69 | |
| 70 _checkedChanged: function() { | |
| 71 this.setAttribute('aria-checked', this.checked ? 'true' : 'false'); | |
| 72 this.active = this.checked; | |
| 73 this.fire('iron-change'); | |
| 74 } | 61 } |
| 75 }); | 62 }); |
| OLD | NEW |