PDA

View Full Version : [OPEN-1072] Checkbox and radio button have no focus indication in Chrome



blakel
25 Jun 2010, 12:01 PM
Ext version tested:


Ext 3.2.1



Adapter used:


ext
jquery 1.3.2



css used:


ext-all.css
ext-xtheme-gray.css -- Happens without this file too





Browser versions tested against:


Chrome 5.0.375.86 beta



Operating System:


Windows 7 64-bit



Description:


When tabbing between form fields, when you land on a checkbox or a radio button there is no indication that the focus is on that item. In plain HTML forms with no CSS the checkboxes and radio buttons "glow" yellow. In other browsers (IE7, IE8, FF3) there is a dotted outline indicating the item that is focused.



Test Case:



<html>
<head>
<style type="text/css">
@import url("resources/css/ext-all.css");
/*@import url("resources/css/ext-xtheme-gray.css");*/
</style>

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
new Ext.Panel({
renderTo: Ext.getBody(),
layout: 'form',
items: [{
xtype: 'checkbox',
boxLabel: 'checkbox'
},{
xtype: 'radio',
boxLabel: 'radio'
}]
});
});
</script>
</head>
<body>

</body>
</html>
This plain HTML works as expected:


<html>
<body>
<form>
<input type="checkbox" />
<input type="radio" />
</form>
</body>
</html>


Steps to reproduce the problem:


View the above code in Google Chrome browser


The result that was expected:


Checkboxes and radio buttons should have a visual indication that they have tab focus.


The result that occurs instead:


Nothing


Debugging already done:


Looked at CSS rules applied to these elements when focused, didn't see anything relating to :focus
Added a rule to apply (outline: 1px dotted;) to all checkboxes and radio buttons. This shows the outline when not focused and the outline disappears when focused.
Added a :focus rule with same same rule as above, nothing happened when focused.