View Full Version : Why radio button rendered as a simple button?

10 Jun 2014, 11:45 PM
I have created a radio button using extjs as mentioned in the below code.
At runtime, generated html code shows type of this radio button as 'button'. (Ideally it should be 'radio').
Because of this, screen readers like JAWS read it as a button and do not treat it as radio button which can be checked/unchecked.
items: [{
layout: 'column',
items: [{
xtype: 'label',
text: 'Test Radio:',
}, {
xtype: 'radio',
id: 'rb1',
name: 'rbGroup',
checked: true,
}, {
xtype: 'radio',
id: 'rb2',
name: 'rbGroup',
checked: false,
Please let me know if I am doing something wrong or
what should be done to correct its type to 'radio' in generated html.

11 Jun 2014, 2:10 AM

You are right, HTML generated is of type button. EXT JS works in this fashion itself.

EXT JS have used ARIA (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)attribute "role" for accessibility.

<input type="button" id="radio1-inputEl" role="radio" class="x-form-field x-form-radio x-form-cb" autocomplete="off" hidefocus="true" data-errorqtip="">

I don't have info about how "JAWS" work.

MD Naveed

11 Jun 2014, 2:28 AM
Hi Naveed,
Thanks for your prompt reply.

role="radio" is not coming by default in the generated html. If I specify aria-role='radio' in my .js file, then below code is generated in my html.
And even with this html, screen reader is not reading it as radio button.

Anyways, could you please tell me what should be used so that role="radio" comes by default for a radio button in generated html.

Thanks a lot!