是否可以使用角咏叹调进行咏叹调扩展？答案

【问题标题】：Is it possible to use angular aria for aria-expanded?是否可以使用角咏叹调进行咏叹调扩展？
【发布时间】：2023-03-22 04:41:01
【问题描述】：

我在 Internet 和 Angular Aria 文档上进行了搜索 - 它没有提到 aria-expanded 或 aria-selected？

有没有办法实现这个？

<a href ng-aria={'expanded': selected} & ng-aria={'selected': selected}></a>

这将使：

<a href aria-expanded="true" aria-selected="true"></a>

谢谢。

【问题讨论】：

标签： angularjs accessibility

【解决方案1】：

我使用 ng-bootstrap 来做这件事。例如：

HTML

<p>
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card">
    <div class="card-body">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>

打字稿

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-collapse-basic',
  templateUrl: './collapse-basic.html'
})
export class NgbdCollapseBasic {
  public isCollapsed = false;
}

来源：https://ng-bootstrap.github.io/#/components/collapse/examples

【讨论】：

【解决方案2】：

不需要指令来设置 aria-expanded。只需使用一个表达式：

<a href="#" ng-init="selected=false" aria-expanded="{{selected}}" aria-selected="{{selected}}" ng-click="selected=!selected">link</a>

<p ng-show="selected">content<p>

【讨论】：