Make radio button accessible

[mikoscz]

I've added

For paper-radio-button:

• aria-checked
• aria-label
• role

For paper-radio-group:

• role
• aria-labelledby

Added

• paper-radio-group-label

I don't like the solution with aria-labelledby inside the paper-radio-group I was thinking about creating the new component paper-radio-group-label which will be yielded like labelId and it would have passed action that will set the aria-labelledby on the parent radio group component. But I think that would be a bigger change from component API perspective - what do you think about that?

[miguelcobain]

@mikoscz indeed, yielding a {{group.label}} component would be much better than yielding the label id.

It is just an addition to the existing API and it won't break any existing code people are using, so I think that would be the best thing to do!

Can you update this PR with that?

[mikoscz]

@miguelcobain updated 😄

[miguelcobain]

Instead of the "upward" setAriaLabelledBy action to inform the label id, you could easily generate a unique id "downward":

label=(component labelComponent id=labelId)

Where labelId could be defined as

labelId: computed('elementId', function() {
  return `${this.elementId}-label`;
})

[mikoscz]

That was my initial idea - but then I need to add the logic that checks if the label element is present in the DOM. To not set the aria-labelledby with the id that does not exist. I think it is more clear that when the label is placed in the DOM it tells the group "Hi I just landed now I am describing you". The code is also simpler IMO in the case with action. What do you think about that? If you don't like this approach just give me a sign and I'll add the logic with the passing label from the group to the label component.

[miguelcobain]

I see the problem now.
The label is optional, so we can't set aria-labelledby attribute without knowing if a label is going to be rendered or not.

This seems good to me, thanks!