css 如何在循环中使用ARIA设置单选按钮被称为选中/未选中

nuypyhwy  于 2023-03-14  发布在  其他
关注(0)|答案(1)|浏览(145)

我正在做一个项目,我遇到了这个问题,我必须修复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}}">
ldioqlga

ldioqlga1#

若要修复已检查咏叹调的问题,可以基于ccAddress.UniqueIdentifier值更新已检查咏叹调的属性值。可以使用三元运算符检查当前ccAddress.UniqueIdentifier是否与vm.selectedAddress.UniqueIdentifier值匹配,并相应地将aria-checked属性设置为true或false。以下是包含此更改的代码的更新版本:

<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.UniqueIdentifier ? 'true' : 'false'}}"></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}}">

在更新后的代码中,{{vm.selectedAddress.UniqueIdentifier == ccAddress.UniqueIdentifier ? 'true' : 'false'}}用于根据ccAddress.UniqueIdentifier值将aria-checked属性值设置为true或false。

相关问题