| OLD | NEW |
| 1 | 1 Polymer({ |
| 2 Polymer({ | |
| 3 is: 'paper-radio-button', | 2 is: 'paper-radio-button', |
| 4 | 3 |
| 5 behaviors: [ | 4 behaviors: [ |
| 6 Polymer.PaperInkyFocusBehavior, | 5 Polymer.PaperCheckedElementBehavior |
| 7 Polymer.IronCheckedElementBehavior | |
| 8 ], | 6 ], |
| 9 | 7 |
| 10 hostAttributes: { | 8 hostAttributes: { |
| 11 role: 'radio', | 9 role: 'radio', |
| 12 'aria-checked': false, | 10 'aria-checked': false, |
| 13 tabindex: 0 | 11 tabindex: 0 |
| 14 }, | 12 }, |
| 15 | 13 |
| 16 properties: { | 14 properties: { |
| 17 /** | 15 /** |
| 18 * Fired when the checked state changes due to user interaction. | 16 * Fired when the checked state changes due to user interaction. |
| 19 * | 17 * |
| 20 * @event change | 18 * @event change |
| 21 */ | 19 */ |
| 22 | 20 |
| 23 /** | 21 /** |
| 24 * Fired when the checked state changes. | 22 * Fired when the checked state changes. |
| 25 * | 23 * |
| 26 * @event iron-change | 24 * @event iron-change |
| 27 */ | 25 */ |
| 28 | 26 |
| 29 ariaActiveAttribute: { | 27 ariaActiveAttribute: { |
| 30 value: 'aria-checked' | 28 type: String, |
| 31 } | 29 value: 'aria-checked' |
| 32 }, | |
| 33 | |
| 34 attached: function() { | |
| 35 this._isReady = true; | |
| 36 | |
| 37 // Don't stomp over a user-set aria-label. | |
| 38 if (!this.getAttribute('aria-label')) { | |
| 39 this.updateAriaLabel(); | |
| 40 } | 30 } |
| 41 }, | 31 }, |
| 42 | 32 |
| 43 /** | 33 // create the element ripple inside the `radioContainer` |
| 44 * Update the checkbox aria-label. This is a temporary workaround not | 34 _createRipple: function() { |
| 45 * being able to observe changes in <content> | 35 this._rippleContainer = this.$.radioContainer; |
| 46 * (see: https://github.com/Polymer/polymer/issues/1773) | 36 return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this); |
| 47 * | |
| 48 * Call this if you manually change the contents of the checkbox | |
| 49 * and want the aria-label to match the new contents. | |
| 50 */ | |
| 51 updateAriaLabel: function() { | |
| 52 this.setAttribute('aria-label', Polymer.dom(this).textContent.trim()); | |
| 53 }, | |
| 54 | |
| 55 _buttonStateChanged: function() { | |
| 56 if (this.disabled) { | |
| 57 return; | |
| 58 } | |
| 59 if (this._isReady) { | |
| 60 this.checked = this.active; | |
| 61 } | |
| 62 } | 37 } |
| 63 }) | 38 }); |
| 64 | |
| OLD | NEW |