What is the proper way to implement ionic radio buttons for voiceover screen reader?

Question

I have the following radio button list that works without voiceover enabled:

<ion-list>
    <label class="item item-radio" 
           ng-repeat="type in someCtrl.types"  
           aria-label="{{type.label}}" 
           id="{{type.value}}">
        <input type="radio" 
               role="radio" 
               ng-model="someCtrl.data.type" 
               ng-value="type.value" 
               aria-labelledby="{{type.value}}">
        <div class="radio-content">
            <div class="item-content">{{type.label}}</div>
        <i class="radio-icon ion-checkmark"></i>
        </div>
    </label>
</ion-list>

When I enable voiceover and select an item from the list, the item receives a checkmark, but the model doesn't change and the default item selected still retains its checkmark. As a user continues to select items from the list, they each get a checkmark but the data model doesn't change and all checkmarks are retained. Has anyone had any luck implementing ionic radio lists that work with voiceover?

score 0 · Answer 1 · answered Aug 17 '16 at 07:55

Step1: In controller first initialise the list of items where you are going to select
For Ex:

$scope.audio_types = [
    {name: $translate.instant("Morning"), value : 'Morning'},
    {name: $translate.instant("Afternoon"), value : 'Afternoon'},
    {name: $translate.instant("Evening"), value : 'Evening'}
  ];

Step2 : You are using an ng-model so initialise the object with an empty properties

For Ex: $scope.profile = {};

Step3: You are using radio button to select an item property so declare the method to check wether the property is changing or not

$scope.roundCountChange = function(){
console.log($scope.profile.dropdown);
}

Step4 : Final Step in your HTML Page add these code

<label class="item"> "select"  <br/>
  <label ng-repeat="item in audio_types">
    <input type="radio" ng-model="profile.dropdown" ng-value="item.value" ng-change="roundCountChange()"/> item.name
  </label>
</label>

What is the proper way to implement ionic radio buttons for voiceover screen reader?

1 Answers1