jsx_a11y/aria-role 正確性

功能

具有 ARIA 角色的元素必須使用有效、非抽象的 ARIA 角色。角色定義的參考資料可以在 WAI-ARIA 網站上找到。

為何這是不好的？

此成功準則的意圖是確保輔助技術 (AT) 可以收集有關內容中使用者介面控制項的資訊、啟用（或設定）以及隨時更新其狀態（例如螢幕閱讀器、螢幕放大鏡和語音辨識軟體，供身心障礙人士使用）。

當使用來自可存取技術的標準控制項時，此過程很簡單。如果使用者介面元素按照規格使用，則將滿足此規定的條件。

但是，如果建立了自訂控制項，或者程式化（在程式碼或腳本中）介面元素具有與平常不同的角色和/或功能，則需要採取額外的措施，以確保控制項向輔助技術提供重要資訊，並允許輔助技術控制它們。使用者介面控制項的一個特別重要的狀態是它是否具有焦點。控制項的焦點狀態可以透過程式設計方式確定，並且有關焦點變化的通知會傳送到使用者代理程式和輔助技術。使用者介面控制項狀態的其他範例包括核取方塊或單選按鈕是否已被選取，或可摺疊樹狀或清單節點是否已展開或摺疊。

規則選項

此規則採用一個可選的物件型別的物件引數

{
  "rules": {
    "jsx-a11y/aria-role": [
      2,
      {
        "allowedInvalidRoles": ["text"],
        "ignoreNonDOM": true
      }
    ]
  }
}

allowedInvalidRules 是一個可選的字串陣列，其中包含除了 ARIA 規格之外應該允許的自訂角色，例如當您需要使用非標準角色時。

對於 ignoreNonDOM 選項，這決定是否檢查開發人員建立的元件。

範例

此規則的不正確程式碼範例

<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role -->
<div role="range"></div>      <!-- Bad: "range" is an _abstract_ ARIA role -->
<div role=""></div>           <!-- Bad: An empty ARIA role is not allowed -->
<Foo role={role}></Foo>       <!-- Bad: ignoreNonDOM is set to false or not set -->

此規則的正確程式碼範例

<div role="button"></div>     <!-- Good: "button" is a valid ARIA role -->
<div role={role}></div>       <!-- Good: role is a variable & cannot be determined until runtime. -->
<div></div>                   <!-- Good: No ARIA role -->
<Foo role={role}></Foo>       <!-- Good: ignoreNonDOM is set to true -->

參考資料

• 規則來源