polymerelements / paper-radio-group Goto Github PK

I am having issue with PaperRadioButtons when using inside PaperRadioGroup. They are acting more like a checkbox than RadioButton. Also when I use PaperRadioButton without PaperRadioGroup, they still acts like a checkbox. What's the idea behind making RadioButton acting like a checkbox with states selected and unselected?

Hi,
I am having issues in polymer 1.0 with the paper radio group, specifically when using the selected attribute, but only when the paper-radio-buttons contained within are in a dom-repeat template.

Also note that If any dom-repeat template breaks, all break paper-radio-group dom-repeat templates break.
i.e if second group below is commented out, the first one works, if it is included, both the first and second templated groups break. Selected attribute always works on non-templated radio buttons in the group.

<p>works</p>
<paper-radio-group>
  <template is="dom-repeat" items="{{sizes}}">
    <paper-radio-button name="{{item.name}}" >{{item.name}}</paper-radio-button>
  </template>
</paper-radio-group>

<p>Doesn't work</p>
<paper-radio-group selected="Large">
  <template is="dom-repeat" items="{{sizes}}">
    <paper-radio-button name="{{item.name}}" >{{item.name}}</paper-radio-button>
  </template>
</paper-radio-group>

<p>works</p>
<paper-radio-group>
  <paper-radio-button name="Small" >Small</paper-radio-button>
  <paper-radio-button name="Medium" >Medium</paper-radio-button>
  <paper-radio-button name="Large" >Large</paper-radio-button>
</paper-radio-group>

<p>works</p>
<paper-radio-group selected="Large">
  <paper-radio-button name="Small" >Small</paper-radio-button>
  <paper-radio-button name="Medium" >Medium</paper-radio-button>
  <paper-radio-button name="Large" >Large</paper-radio-button>
</paper-radio-group>

and defining the equivalent sizes array in ready:

ready: function() {
this.sizes = [{name:'Small'},{name:'Medium'},{name:'Large'}];
}

On a side note also, i am trying to set vertical layout to the buttons (), which i can do using the @apply(--layout-vertical); style, however alignment is forced in flex-direction: column. Only way i can get it to align correctly with the radio buttons with their labels is to force flex-direction: row using !important. Is there a good way of toggling vertical alignment?

paper-radio-button[vertical="true"] { @apply(--layout-vertical); flex-direction: row !important; }
Many thanks,
Grant.

I'm able to select all radio buttons on iOS. This only appears to happen on iOS Safari, as other desktop browsers don't appear to have this issue.

The padding of the radio buttons is currently fixed (https://github.com/PolymerElements/paper-radio-group/blob/master/paper-radio-group.html#L60).

I think it a var or mixin should be used, so that the space between the buttons can be changed.

Description

When pressing Esc key, the error is thrown:

Uncaught TypeError: Cannot read property 'blur' of undefined
    at HTMLElement._onEscKey (iron-menu-behavior.html:344)
    at HTMLElement._triggerKeyHandler (iron-a11y-keys-behavior.html:489)
    at HTMLElement._onKeyBindingEvent (iron-a11y-keys-behavior.html:473)

In Firefox is looks like this:

TypeError: this.focusedItem is undefined

Expected outcome

No error should be thrown

Actual outcome

Error is thrown each time Esc is being pressed.
Pressing one of arrow keys seems to prevent further Esc hits to cause this error.

Steps to reproduce

1. Go to https://beta.webcomponents.org/element/PolymerElements/paper-radio-group/demo/demo/index.html
2. Focus one of the paper-radio-group
3. Press Esc

Browsers Affected

• Chrome
• Firefox
• Safari 9

When the on-tap function is fired, it captures and logs the previous value. So if {{item.authd}} = 'authnr' it's radio button is highlighted however when another button is tapped the e.currentTarget.selected displays the older value, not the tapped

<template is="dom-repeat" items="{{data}}">
<paper-radio-group selected="{{item.authd}}" on-tap="authChanged" id="{{item.id}}">
<paper-radio-button name="authnr">N/R</paper-radio-button>
<paper-radio-button name="pending">Pending</paper-radio-button>
<paper-radio-button name="authd">Auth</paper-radio-button>
</paper-radio-group>
</template>
...

authChanged: function(e, name) {
console.log(e.currentTarget.selected)
}

Description

iron-form doesn't serialize paper-radio-group correctly, since the default value to attrForSelected is name and to paper-radio-group says that you need to change this attribute for all its children.

Why?

The function serialize uses name attribute as its key. But paper-radio-group's children must have the same key for all its children. If not, which would be the point to use them in group?

How it'd be

Changing attrForSelected: { type: String, value: 'name' } to attrForSelected: { type: String, value: 'value' }, then serialize won't return {"letter-a": "on"}, it'll {"letter": "letter-a"}

Example

<paper-radio-group selected="letter-a">
    <paper-radio-button name="letter" value="letter-a">a</paper-radio-button>
    <paper-radio-button name="letter" value="letter-b">b</paper-radio-button>
    <paper-radio-button name="letter" value="letter-c">c</paper-radio-button>
</paper-radio-group>

Unfortunately, it's necessary repeating name attribute in the elements of same group.

Would be great to be able to include this as form element.

1. Include a label for the group.
2. Implement Polymer.IronFormElementBehavior.
3. Error message if required and none selected.

The name attribute on each radio-button isn't documented as required. AFAICT it's not documented on the paper-radio-button page either.

Looks like a bunch of the tests are failing on travis https://travis-ci.org/PolymerElements/paper-radio-group/jobs/88467377

Description

I try to use paper-radio-group element in an angular 2 application but when I place the paper-radio-group in an angular 2 component the element does not work as expected.

The selected paper-radio-buttons disappears after selection inside the paper-radio-group element.

Expected outcome

Paper-radio group should not disappear after selection. And the default selected element should get selected.

Actual outcome

After I select a paper-radio-button inside the paper-radio-group all paper-radio-buttons disappear inside the paper-radio-group.

Steps to reproduce

1. clone angular 2 quickstart project https://github.com/angular/quickstart/blob/master/README.md
2. install paper-radio-group and paper-radio-button

bower install --save PolymerElements/paper-radio-button

bower install --save PolymerElements/paper-radio-button-group

1. Add paper elements in index html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
      <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
    <link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
    window.addEventListener('WebComponentsReady', function() {
      System.import('app').catch(function(err){ console.error(err); });
       });
    </script>

  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

1. add paper-radio-group inside the my-app component

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<paper-radio-group selected="Small">
    <paper-radio-button name="small">Small</paper-radio-button>
    <paper-radio-button name="medium">Medium</paper-radio-button>
    <paper-radio-button name="large">Large</paper-radio-button>
    </paper-radio-group>

    `
})
export class AppComponent { }

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

When I have a paper-radio-button inside of a paper-radio-group, which is inside of a template I am experiencing two errors.

1. the buttons can be 'checked' and 'unchecked'

2. when the selected radio button is preset by the selected value, the last value in the template the button remains in a visible selected state that it looks like it was clicked. the page then scrolls all the way to the bottom of the last selected group.

<paper-radio-group selected="{{item.authd}}" on-tap="authChanged" id="{{item.id}}">
<paper-radio-button name="authnr">N/R</paper-radio-button>
<paper-radio-button name="pending">Pending</paper-radio-button>
<paper-radio-button name="authd">Auth</paper-radio-button>
</paper-radio-group>

When focusing the element via javascript and no selected property:

Uncaught TypeError: Cannot read property 'disabled' of undefined
Polymer.selectNext @ paper-radio-group.html:180
Polymer.IronA11yKeysBehavior._triggerKeyHandler @ iron-a11y-keys-behavior.html:439
Polymer.IronA11yKeysBehavior._onKeyBindingEvent @ iron-a11y-keys-behavior.html:423

Must check first if selected is defined:

--- webcomponents/polymer-starter-kit-1.2.3/app/bower_components/paper-radio-group/paper-radio-group.html   (revision )
+++ webcomponents/polymer-starter-kit-1.2.3/app/bower_components/paper-radio-group/paper-radio-group.html   (revision )
@@ -158,7 +158,7 @@
      */
     selectPrevious: function() {
       var length = this.items.length;
-      var newIndex = Number(this._valueToIndex(this.selected));
+      var newIndex = this.selected ? Number(this._valueToIndex(this.selected)): 0;

       do {
         newIndex = (newIndex - 1 + length) % length;
@@ -173,7 +173,7 @@
      */
     selectNext: function() {
       var length = this.items.length;
-      var newIndex = Number(this._valueToIndex(this.selected));
+      var newIndex = this.selected ? Number(this._valueToIndex(this.selected)): length - 1;

       do {
         newIndex = (newIndex + 1 + length) % length;

(edited by @bicknellr: wrapped diff block in backticks)

I need to add two paper-radio-groups in the same html page, each group must contain two paper-radio-buttons with different names (the attribute name is different for all paper-radio-buttons). The first paper-radio-button of each group must be selected.

But is not working. The paper-radio-buttons of the second group will be unselected as long as any paper-radio-button of the first group is selected, and if you select any paper-radio-button of the second group then the all paper-radio-buttons of the first group will be unselected.

this bug is reproduced for Polymer 1.0

<p>Doesn't work</p>
<paper-radio-group selected="Large">
<paper-radio-button name="Small" >Small</paper-radio-button>
<paper-radio-button name="Large" >Large</paper-radio-button>
</paper-radio-group>

<paper-radio-group selected="Green">
<paper-radio-button name="Green" >Green</paper-radio-button>
<paper-radio-button name="Yellow" >Yellow</paper-radio-button>
</paper-radio-group>

Description

paper-radio-group is multiselectable even though multi is not set to true

Expected outcome

Only able to select one radio button when not defining the multi variable

Actual outcome

able to select multiple radio buttons..

Live Demo

Steps to reproduce

                <paper-radio-group id="searchResponseRadioGroup">
                  <template id="domRepeatSearchResponse" is="dom-repeat" items="{{ajaxSearchResponse}}">
                    <paper-radio-button checked={{item.checked}} id="searchResultObject">
                        <div>
                          <span> [[item.name]]</span>
                        </div>
                        <div secondary>
                          <span> [[item.parent.name]] [[item.parent.parent.name]]</span>
                        </div>
                    </paper-radio-button>
                  </template>
                </paper-radio-group>

Happens with and without the checked={{item.checked}} part and with or without allow-empty-selection

Browsers Affected

Tested on latest Chrome:

• [ x ] Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

The Ripple is active in others radio button when click in disable radio button

video example error

I see in the code the posible responsable of this conflict.

I think that the problem is the focus and the itemFocus value.

In the paper-radio-group.html we have the next method.

paper-radio-group.html

_activateFocusedItem: function() { this._itemActivate(this._valueForItem(this.focusedItem), this.focusedItem); },

This method selected the item with new focus. The problem arrive when the component is disable and we selected other radio button undisable, the var this.focusedIem have de old value and don' t change her value to null.

A posible solution is the next.

paper-radio-group.html

_activateFocusedItem: function() { this._itemActivate(this._valueForItem(this.focusedItem), this.focusedItem); this.focusedItem = null; }

The second case is when we tap in radio-button disabled whitout having selected before a radio-button.

The problem detected are in the ion-menu-behaivor on method _onFocuse

iron-menu-behavior.html

_onFocus: function(event) { ... this._defaultFocusAsync = this.async(function() { // focus the selected item when the menu receives focus, or the first item // if no item is selected var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem; this._setFocusedItem(null); if (selectedItem) { this._setFocusedItem(selectedItem); } else if (this.items[0]) { // We find the first none-disabled item (if one exists) this._focusNext(); } }); } ...

The first problem arrive when we declared selectedItem

iron-menu-behavior.html

var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;

If we have multiple radio-buttons and one or more are undisable, always selectedItem get some of there undisabl values.

The similar case is in the next if.

iron-menu-behavior.html

... if (selectedItem) { this._setFocusedItem(selectedItem); } else if (this.items[0]) { // We find the first none-disabled item (if one exists) this._focusNext(); } ...

if selectedIem is null, we will get the first element non-disabled, this must be the reason of our error.

This behaivor is used in other paper elements, I don't know the viabilty of change this file.

Could be this posible cause of the error?

Actual Result:
The radio button group is a simulated UI widget that contains some invalid attributes. The information about the controls may not be communicated properly to screen reader users

Expected Results:
Remove the following attributes from the elements with role="radio":
• checked (this is meant for native HTML radio buttons and can interfere with the state being communicated properly to screen reader users)
• aria-selected (this attribute is not valid on an element with role="radio", the aria-checked attribute is used to communicate the state of the radio button)

Naming inconsistency with iron-pages.

<iron-pages attr-for-selected="name" selected="{{screen}}">
vs
<paper-radio-group attrForSelected="name" selected="{{screen}}">

Description

The second paragraph reads "The inside the group must have the name attribute set." which does not make much sense at face value.

The issue is that the second word in the source ("<paper-radio-button>") is not surrounded in backticks and gets swallowed by the browser.

Expected outcome

This sentence should read "The <paper-radio-button> inside the group must have the name attribute set."

Actual outcome

Confused developers. ¯_(ツ)_/¯

Live Demo

N/A

Steps to reproduce

Read the README or docs

Browsers Affected

N/A

Keyboard navigation:
There appears to be a keyboard navigation issue, where it's not possible to use tab to cycle through the page. I can only use tab to get to the keep wi-fi during sleep buttons (and then use the arrow keys to move between the radio buttons in that group). I can not use tab to get to the wi-fi frequency band buttons, nor use the arrow keys to cycle between the radio buttons below.

Windows issue:
Firefox & Chrome / NVDA: I am only able to use the arrow keys (NVDA navigation) to access the radio buttons in the top group. I am not able to access the headings or the second radio group using keyboard / NVDA.

The group doesn't have a name field. This field can act as key while the button as the value.
Currently coz of its absence form serialize() spits out button name with on/off tag.
Its much consistent in terms of design than the extra field to specify the selection.

I am coding a form, which includes a paper-radio-group with some paper-radio-buttons.

I am trying to make a selection in the radio group mandatory, but I don't see a required property in the documentation of paper-radio-group nor paper-radio-button

Is this a missing feature or is this supposed to be implemented another way?

Description

Paper radio button names that evaluate to false can be deselected without allow-empty-selection
This becomes significant when the name is bound to index in a template dom-repeat.

Expected outcome

It should be impossible to deselect the a radio button, even if it is the only one selected.

Actual outcome

It is possible to deselect radio buttons with name set to "0".

I think it's because the check below (in paper-radio-group.html) fails when this.selected = 0 or "0", which makes the code feel its fine to toggle the radio button.

   select: function(value) {
      \\ ...
      if (this.selected) {
       \\ ...
      }
      \\ ...

Live Demo

https://jsbin.com/pocisukaqe/edit?html,css,output
(also contains a hacky solution)

Steps to reproduce

1. Put a paper-radio-group with a few paper-radio-buttons on a page.
2. Set the name of the first paper radio buttons to "0", and the names of the others to any values.
3. Open the page in a web browser.
4. Press the first radio button. Press it again to see it is toggleable, without allow-empty-selection.
5. Press a different radio button. Press it again to see it is not toggleable.

The API for form elements in standard HTML and in Polymer iron-form elements is more complicated than it needs to be. I propose that every element with a name attribute would have a corresponding value attribute, and we call it a day.

For example, the API for paper-radio-group element...

<paper-radio-group selected="small">
  <paper-radio-button name="small">Small</paper-radio-button>
  <paper-radio-button name="medium">Medium</paper-radio-button>
  <paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>

... could become simpler by modeling after a standard HTML select list like...

<select name="shirt-size">
  <option value="small" selected>Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>
</select>

... but could be better than the select list API by doing away with selected boolean and instead stay consistent with the "every element with a name attribute has a corresponding value attribute" proposal...

<paper-radio-group name="shirt-size" value="small">
  <paper-radio-button value="small">Small</paper-radio-button>
  <paper-radio-button value="medium">Medium</paper-radio-button>
  <paper-radio-button value="large">Large</paper-radio-button>
</paper-radio-group>

paper-radio-buttons in a paper-radio-group can be deselected with cursor keys

Steps to reproduce:

1. Use this code:

<paper-radio-group selected="{{selectedHeatingLayer}}">
    <paper-radio-button disabled="{{!showHeatingLayer}}" name="xx">XX</paper-radio-button><br>
    <paper-radio-button disabled="{{!showHeatingLayer}}" name="yy">YY</paper-radio-button><br>
</paper-radio-group>

1. You can't unselect the paper-radio-buttons by clicking them.
2. However, if the first paper-radio-button is focused and you hit the Down key (on the keyboard), the selection disappears and nothing is selected. If you press Down again, the second radio button will be selected.

Or is this intended behaviour and I did get something wrong?

inside a paper-radio-group I've put a dom-repeat template to display a couple of paper-radio-buttons. They behave as they were checkboxes, not deselecting the first selection after the second is made.

This works as expected (from docs):

<paper-radio-group >
  <paper-radio-button name="small">Small</paper-radio-button>
  <paper-radio-button name="medium">Medium</paper-radio-button>
  <paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>

This does not:

<paper-radio-group>
    <template is="dom-repeat" id="instanceList" items="{{instanceData}}">
        <paper-radio-button>{{item.INSTANCE_NAME}}</paper-radio-button>
    </template>
</paper-radio-group>

Description

Nested radio groups behave incorrectly.
Selecting a parent item affects selection of nested radio groups.

Expected outcome

When parent radio-group selects an item, only parent item should get selected and nothing else.
When nested radio-group selects an item, only item in nested radio-group is getting selected and nothing else.

Actual outcome

When parent selects an item, nested radio group also selects items, whether you want it or not.

Live Demo

https://jsbin.com/kiwoqunice/edit?html,css,js,output

Steps to reproduce

1. Open https://jsbin.com/kiwoqunice/edit?html,css,js,output
2. Select parent item #2 (Remove all links)
3. Nested radio-group items will get erroneously selected

Browsers Affected

• Chrome

D label get stuck in hidden mode

 <iron-localstorage name="club" value="{{ttt}}"></iron-localstorage>
<iron-localstorage name="option" value="{{option}}"></iron-localstorage>
                <paper-radio-group class="vertical layout" selected="{{option}}">
                    <paper-radio-button name="A">test1</paper-radio-button>
                    <paper-radio-button name="B">test2</paper-radio-button>
                    <paper-radio-button name="C">test3</paper-radio-button>
                    <paper-radio-button name="D">[[ttt]]</paper-radio-button>
                </paper-radio-group>

example http://gcl-12.appspot.com

click on the empty radio space first to select something to put it in localstorage then refresh the page.

Problem

I have a paper-radio-button nested within a custom element. I expected the button to be picked up by paper-radio-group, but it was not caught. I've been able to narrow it down to the call to queryDistributedElements() in _updateItems() of the IronSelectableBehavior (https://github.com/PolymerElements/iron-selector/blob/master/iron-selectable.html#L272). Changing queryDistributedElements() to querySelectorAll() would quickly solve the issue, but I know IronSelectableBehavior is used in more than one place and that might have undesirable effects.

I have made a custom element mimicking paper-radio-group, applying the aforementioned solution to its _updateItems() method, and it works.

Live Demo

https://jsfiddle.net/vbkpmat4/

As you can see, the third item is not considered part of the list.

Browsers Affected

All.

the docs :

https://elements.polymer-project.org/elements/paper-radio-group

don't seem to mention the paper-radio-group-changed event that's fired from here:

https://github.com/PolymerElements/paper-radio-group/blob/master/paper-radio-group.html#L119

I'd open an issue on the docs, but the new docs don't include links to the docs, and I can't find them.

When putting paper-radio-button elements together vertically in a paper-radio-group, one gets something like this:

<div>Top</div>
<paper-radio-group style="display: flex; flex-direction: column;">
  <paper-radio-button>A</paper-radio-button>
  <paper-radio-button>B</paper-radio-button>
  <paper-radio-button>C</paper-radio-button>
  <paper-radio-button>D</paper-radio-button>
</paper-radio-group>
<div>Bottom</div>

The separation between the outer elements and the inner radios is half, because contiguous padding is not collapsed as contiguous margins. I think it would be better to have margins and that way have a constant separation inside and outside the group. Just a suggestion, I'd be happy to know if there is a strong reason to use padding.

Issue #12 got tucked away in Google archive repo but was never resolved. It still exists in paper-radio-group 2.* and Polymer 1.*

Not an issue more a question/discussion point.
Very little of this element has to do with material design/paper elements. Is there a reason that it hasn't be put into the iron elements catalogue? That would allow people to use this with whatever radio buttons they want, currently they could but the semantics of the mark up would seem off by having a paper-element wrap around a non paper-element.

Looks like the docs are out of date for <paper-radio-group> example, e.g.:

<paper-radio-group selected="small">
  <paper-radio-button name="small" label="Small"></paper-radio-button>
  <paper-radio-button name="medium" label="Medium"></paper-radio-button>
  <paper-radio-button name="large" label="Large"></paper-radio-button>
</paper-radio-group>

Setting label doesn't seem to do anything, and demos set the label by putting text in the tag, i.e.:

<paper-radio-button>Label<paper-radio-button>

The dom-module declaration should use id for the element name (per https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#template-stamping).

Current:

Expected:

Because of this, Polymer 1.1.3 does not load paper-radio-group properly.

Pull request is coming soon.

Description

Radio buttons are not multiselectable despite of "multi" property. That happens because, since tag 1.0.2, paper-radio-group.html implements "select" method. In older versions, that method has been called from "iron-selector/iron-multi-selectable.html"

Expected outcome

In this simple example:
<paper-radio-group multi>
<paper-radio-button name="a">a</paper-radio-button>
<paper-radio-button name="b">b</paper-radio-button>
</paper-radio-group>

and selecting both radio buttons, both remain selected.

Actual outcome

Only last element is selected.

Browsers Affected

• Chrome
• Firefox
• Safari

Description

Radio groups are essentially enumerations. As form UI, they generally allow only one selection, and optionally allow empty selection. <paper-radio-group> accomplishes this well.

Forms are sets of fields, sometimes containing radio groups. <iron-form> is a great tool for grouping such fields, and <paper-radio-group> should play nicely with it.

Expected outcome

Placing a <paper-radio-group> inside an <iron-form> should mean that:

• Calling serialize() on the enclosing form includes any value from <paper-radio-group>, equivalent to <paper-radio-group>.selected
• Calling validate() on the enclosing form returns false, when there is no selection and allowEmptySelection is not set to true

Actual outcome

Nothing, the element is not noticed at all. If subelements (i.e. <paper-radio-button>) have a name attribute (which is, as #58 points out, ironically the default value of attrForSelected), they are included in the serialize() payload with a value of "on", but this does not express the enumerative nature of a <paper-radio-group>.

Steps to reproduce

1. Put a iron-form element in the page.
2. Put a paper-radio-group element inside that form, with a few valid paper-radio-button(s).
3. Make sure the paper-radio-group has a name.
4. Open the page in a web browser.
5. Make a selection in the paper-radio-group.
6. Fire up your trusty inspector and run serialize() on your iron-form. Note that no value is produced.

Browsers Affected

Well, all of them, because there is no code to do it.

paper-radio-group does not directly use paper-radio-button, but it still requires it both in its bower.json as well as at paper-radio-group.html.

This is problematic for Chromium, since we use paper-radio-group, but don't need to depend on paper-radio-button anymore. Can we remove?

I'm trying to handle events with the radio group.

In my case the radio group is optional so i would like to handle the deselect event.

My first attempt was

companiesMenu.addEventListener('paper-radio-group-changed', function (evt) {
    var selected = companiesMenu.selected;
    if (!selected) {
        return self.searchChanged({
            company: 'all'
        })
    }
    self.searchChanged({
        company: selected
    })
});

The problem with this is that the event doesn't fire when a radio button is deselected.

I got around the problem by listening for the iron-change event on all the paper-radio-button's and skipping when something is turned off only to turn another element on.

e.g.

function addItemChangeHandler(item) {
    item.addEventListener('iron-change', function (evt) {
        var checked = item.checked;
        if (!checked) {
            if (companiesMenu.selected !== item.getAttribute('name')) {
                //deselect is triggered by changing selection
                return;
            }
            return self.searchChanged({
                company: 'all'
            })
        }
        self.searchChanged({
            company: item.getAttribute('name')
        })
    });
}
for (var itemIdx = 0; itemIdx < companiesMenu.items.length; itemIdx++) {
    var item = companiesMenu.items[itemIdx];
    addItemChangeHandler(item)
}

I think paper-radio-group would expose a cleaner API if it fired when things where deselected

Actual Result:
The radio button form fields are grouped using role="radiogroup" but no group label is defined. The grouping information will not be available to screen reader users. we can provide group label as per the component but label is visible ,there is no mixin available to hide and aria-labelledby will not set for grouplabel.

Expected Results:
Use ARIA role="radiogroup" with the aria-labelledby attribute to define the group label for the form fields, but screen-reader should read the focused radio-button label value instead of the grouped label value.