<!DOCTYPE html>
<html ng-app="myApp" ng-controller="MyCtrl">
<head>
<script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3" data-require="angular.js@1.4.3"></script>
<script data-require="angular-aria@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-aria.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form>
<h1>Radio input tabbing issues with no default</h1>
<ol>
<li>Place focus in the text box</li>
<li>Attempt to <kbd>tab</kbd> to the radios, it should skip over them</li>
<li>Next, select one of the radios</li>
<li>Now focusing works as expected</li>
</ol>
<p><input type="text" name="valueText" ng-model="valueText" autofocus></p>
<p><label><input type="radio" name="value" value="1" ng-model="value"> One</label></p>
<p><label><input type="radio" name="value" value="2" ng-model="value"> Two</label></p>
<p><label><input type="radio" name="value" value="3" ng-model="value"> Three</label></p>
<button type="button" ng-click="value = null">Clear Radio Value</button>
</form>
</body>
</html>
angular.module('myApp', [
'ngAria'
])
.controller('MyCtrl', function($scope) {
$scope.value = null;
})
/* Styles go here */
*, *:before, *:after {
box-sizing: border-box;
}
[type=text] {
width: 100%;
}