我正在做一个项目,我遇到了这个问题,我必须修复aria-checked
。当单选按钮使用键盘聚焦时,它应该宣布它未被选中,稍后当被选中时,它宣布它被选中。
我面临的问题是单选按钮是使用for
循环生成的,当我设置aria-checked
条件以匹配地址与所选地址时,它会宣布单选按钮被选中,即使它没有被选中。
<div class="form-row radio" role="radiogroup" ng-repeat="ccAddress in vm.ccAddresses" ng-click="vm.checkRadio(ccAddress,$index)">
<div class="reward-dialog-divider">
<div tabindex="0" class="row reward-radio-container" ng-keypress="vm.changeRadioIcon(ccAddress.UniqueIdentifier)">
<div class="col-lg-1 col-xs-1 reward-radio-button">
<div tabindex="0" class="reward-radio-button-icon" role="radio">
<div class='radio-button-icon radio-icon' name="radio-icon" id="radio-icon-{{ccAddress.UniqueIdentifier}}" ng-click="vm.changeRadioIcon(ccAddress.UniqueIdentifier)" ng-keypress="vm.checkRadio(ccAddress,$index,ccAddress.UniqueIdentifier )" aria-checked="{{vm.selectedAddress.UniqueIdentifier == ccAddress.}}"></div>
<span name="{{'span-reward-' + ccAddress.UniqueIdentifier}}" aria-label="Select address radio button" ng-keypress="vm.checkRadio(ccAddress,$index,ccAddress.UniqueIdentifier )"></span>
</div>
</div>
<div class="col-lg-8 col-xs-8 reward-account-number">
<div>
<label class="reward-account-label" ng-attr-for="{{'credit-' + ccAddress.UniqueIdentifier}}" ng-keypress="vm.changeRadioIcon(ccAddress.UniqueIdentifier)">
<small ng-class="{'ccaddress-account-active':vm.selectedAddress.UniqueIdentifier==ccAddress.UniqueIdentifier}" id="{{ccAddress.UniqueIdentifier}}" class="id" aria-label="{{ccAddress.AddressLine1 | insertSpace}}">
1条答案
按热度按时间ldioqlga1#
若要修复已检查咏叹调的问题,可以基于ccAddress.UniqueIdentifier值更新已检查咏叹调的属性值。可以使用三元运算符检查当前ccAddress.UniqueIdentifier是否与
vm.selectedAddress.UniqueIdentifier
值匹配,并相应地将aria-checked
属性设置为true或false。以下是包含此更改的代码的更新版本:在更新后的代码中,
{{vm.selectedAddress.UniqueIdentifier == ccAddress.UniqueIdentifier ? 'true' : 'false'}}
用于根据ccAddress.UniqueIdentifier
值将aria-checked属性值设置为true或false。