From bd2678601f087e2d19690c161bdd3db15a49aa4c Mon Sep 17 00:00:00 2001 From: alflennik Date: Mon, 29 Aug 2022 16:03:34 -0400 Subject: [PATCH 1/8] Implement 2418 task 9 --- .../combobox/examples/grid-combo.html | 2 +- .../dialog-modal/examples/alertdialog.html | 4 +- .../dialog-modal/examples/dialog.html | 4 +- content/patterns/feed/examples/feed.html | 2 +- .../patterns/grid/examples/LayoutGrids.html | 2 +- .../grid/examples/advancedDataGrid.html | 2 +- content/patterns/grid/examples/dataGrids.html | 2 +- .../listbox/examples/listbox-collapsible.html | 4 +- .../listbox/examples/listbox-grouped.html | 4 +- .../examples/listbox-rearrangeable.html | 2 +- .../listbox/examples/listbox-scrollable.html | 6 +- coverage/index.html | 1358 ++++++++++------- coverage/prop-coverage.csv | 32 +- coverage/role-coverage.csv | 18 +- scripts/coverage-report.js | 36 +- 15 files changed, 848 insertions(+), 630 deletions(-) diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html index 0194401f9c..185b944cf2 100644 --- a/content/patterns/combobox/examples/grid-combo.html +++ b/content/patterns/combobox/examples/grid-combo.html @@ -389,7 +389,7 @@

Grid Popup

Javascript and CSS Source Code

diff --git a/content/patterns/dialog-modal/examples/alertdialog.html b/content/patterns/dialog-modal/examples/alertdialog.html index 874f8a826d..056cc44c63 100644 --- a/content/patterns/dialog-modal/examples/alertdialog.html +++ b/content/patterns/dialog-modal/examples/alertdialog.html @@ -10,7 +10,7 @@ - + @@ -235,7 +235,7 @@

Notes on aria-modal and aria-hidden

Javascript and CSS Source Code

diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html index 6b30c83957..cc5ed1aaef 100644 --- a/content/patterns/dialog-modal/examples/dialog.html +++ b/content/patterns/dialog-modal/examples/dialog.html @@ -15,7 +15,7 @@ - + @@ -355,7 +355,7 @@

Javascript and CSS Source Code

  • Javascript: - dialog.js, utils.js + dialog.js, utils.js
    • diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html index fba73c6622..c86c501668 100644 --- a/content/patterns/feed/examples/feed.html +++ b/content/patterns/feed/examples/feed.html @@ -197,7 +197,7 @@

    Javascript and CSS Source Code

    The following Javascript and CSS is used by the feedDisplay.html page:

    diff --git a/content/patterns/grid/examples/LayoutGrids.html b/content/patterns/grid/examples/LayoutGrids.html index 2dc7ccbe25..9c6769bdf7 100644 --- a/content/patterns/grid/examples/LayoutGrids.html +++ b/content/patterns/grid/examples/LayoutGrids.html @@ -708,7 +708,7 @@

    Javascript and CSS Source Code

    diff --git a/content/patterns/grid/examples/advancedDataGrid.html b/content/patterns/grid/examples/advancedDataGrid.html index 9cce59538d..8f1580f6b6 100644 --- a/content/patterns/grid/examples/advancedDataGrid.html +++ b/content/patterns/grid/examples/advancedDataGrid.html @@ -10,7 +10,7 @@ - + @@ -295,7 +295,7 @@

    Javascript and CSS Source Code

  • Javascript: - listbox.js, listbox-collapsible, utils.js + listbox.js, listbox-collapsible, utils.js
    • diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html index f188e9a5f6..2f1c010111 100644 --- a/content/patterns/listbox/examples/listbox-grouped.html +++ b/content/patterns/listbox/examples/listbox-grouped.html @@ -10,7 +10,7 @@ - + @@ -220,7 +220,7 @@

    Javascript and CSS Source Code

  • Javascript: - listbox.js, listbox-scrollable.js, utils.js + listbox.js, listbox-scrollable.js, utils.js
    • diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html index 4075ea6c1f..0777cfaa28 100644 --- a/content/patterns/listbox/examples/listbox-rearrangeable.html +++ b/content/patterns/listbox/examples/listbox-rearrangeable.html @@ -408,7 +408,7 @@

    Javascript and CSS Source Code

  • Javascript: - listbox.js, toolbar.js, listbox-rearrangeable.js, utils.js + listbox.js, toolbar.js, listbox-rearrangeable.js, utils.js
    • diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html index 3833596879..a357358129 100644 --- a/content/patterns/listbox/examples/listbox-scrollable.html +++ b/content/patterns/listbox/examples/listbox-scrollable.html @@ -10,7 +10,7 @@ - + @@ -37,7 +37,7 @@

    About This Example

    +
    @@ -215,7 +215,7 @@

    Javascript and CSS Source Code

  • Javascript: - listbox.js, listbox-scrollable.js, utils.js + listbox.js, listbox-scrollable.js, utils.js
    • diff --git a/coverage/index.html b/coverage/index.html index 297ae395d8..ec3e95e286 100644 --- a/coverage/index.html +++ b/coverage/index.html @@ -1,7 +1,6 @@ - - - + + ARIA Roles, Properties and States Referenced in Guidance and Examples | WAI-ARIA Authoring Practices @@ -22,18 +21,18 @@

    ARIA Roles, Properties and States Referenced in Guidance and Examples

    - This page includes information on number of guidance and example references in the WAI-ARIA Authoring Practices for each ARIA role, property and state. The guidance column is determined + This page includes information on number of guidance and example references in the WAI-ARIA Authoring Practices for each ARIA role, property and state. The guidance column is determined by either the role, property or state being in the text content of a heading (e.g. h2-h6) or through the use of - data-aria-roles or data-aria-props attributes on any heading within the practices. The data-aria-roles or data-aria-props attributes should contain a space separated list of values. The use of the data attribute overrides the identification of roles, properties or states from the text content of a heading. The suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading.

    -

    + data-aria-roles or data-aria-props attributes on any heading within the practices. The data-aria-roles or data-aria-props attributes should contain a space separated list of values. The use of the data attribute overrides the identification of roles, properties or states from the text content of a heading. The suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading. +

    @@ -46,7 +45,7 @@

    CSV Files of Role, Properties and States Coverage

    -

    Roles with No Guidance or Examples (30)

    +

    Roles with No Guidance or Examples (29)

    @@ -95,72 +93,72 @@

    Roles with at Least One Guidance or Exampl alertdialog - Alert Dialog + Alert Dialog article - Feed + Feed columnheader - Table + Table complementary Complementary - Complementary Landmark + Complementary Landmark feed Feed - Feed + Feed link Link - Link + Link main Main - Main Landmark + Main Landmark menuitemcheckbox - Editor Menubar + Editor Menubar rowgroup - Table + Table search Search - Search Landmark + Search Landmark separator - Editor Menubar + Editor Menubar @@ -173,14 +171,14 @@

    Roles with at Least One Guidance or Exampl treegrid Treegrid - Treegrid Email Inbox + Treegrid Email Inbox

    -

    Roles with More than One Guidance or Example (35)

    +

    Roles with More than One Guidance or Example (36)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -199,8 +197,8 @@

    Roles with More than One Guidance or Exa

    @@ -209,9 +207,9 @@

    Roles with More than One Guidance or Exa

    @@ -223,8 +221,8 @@

    Roles with More than One Guidance or Exa

    @@ -236,7 +234,7 @@

    Roles with More than One Guidance or Exa
  • Defining cell spans using aria-colspan and aria-rowspan
    • -

    @@ -244,8 +242,8 @@

    Roles with More than One Guidance or Exa

    @@ -257,12 +255,12 @@

    Roles with More than One Guidance or Exa

    @@ -271,9 +269,9 @@

    Roles with More than One Guidance or Exa

    @@ -285,9 +283,9 @@

    Roles with More than One Guidance or Exa

    @@ -298,7 +296,7 @@

    Roles with More than One Guidance or Exa
  • Naming Form Controls with the Label Element
    • -

    @@ -309,11 +307,11 @@

    Roles with More than One Guidance or Exa

    @@ -321,9 +319,9 @@

    Roles with More than One Guidance or Exa

    @@ -335,15 +333,16 @@

    Roles with More than One Guidance or Exa

    @@ -355,14 +354,14 @@

    Roles with More than One Guidance or Exa

    @@ -374,12 +373,12 @@

    Roles with More than One Guidance or Exa

    @@ -387,8 +386,8 @@

    Roles with More than One Guidance or Exa

    @@ -396,11 +395,11 @@

    Roles with More than One Guidance or Exa

    @@ -408,8 +407,8 @@

    Roles with More than One Guidance or Exa

    @@ -420,7 +419,7 @@

    Roles with More than One Guidance or Exa
  • Range properties with meter
    • -

    @@ -434,9 +433,9 @@

    Roles with More than One Guidance or Exa

    @@ -444,9 +443,13 @@

    Roles with More than One Guidance or Exa

    @@ -454,14 +457,14 @@

    Roles with More than One Guidance or Exa

    @@ -488,9 +491,10 @@

    Roles with More than One Guidance or Exa

    @@ -498,9 +502,10 @@

    Roles with More than One Guidance or Exa

    @@ -509,12 +514,12 @@

    Roles with More than One Guidance or Exa

    @@ -522,10 +527,10 @@

    Roles with More than One Guidance or Exa

    @@ -537,9 +542,11 @@

    Roles with More than One Guidance or Exa

    @@ -548,8 +555,19 @@

    Roles with More than One Guidance or Exa

    + + + + + @@ -558,9 +576,9 @@

    Roles with More than One Guidance or Exa

    @@ -571,16 +589,16 @@

    Roles with More than One Guidance or Exa
  • Grid and Table Properties
    • -

    @@ -588,9 +606,9 @@

    Roles with More than One Guidance or Exa

    @@ -602,7 +620,7 @@

    Roles with More than One Guidance or Exa
  • Toolbar
    • -

    @@ -613,9 +631,9 @@

    Roles with More than One Guidance or Exa

    @@ -623,9 +641,9 @@

    Roles with More than One Guidance or Exa

    @@ -651,7 +669,7 @@

    Properties and States with No Guidance or
    -

    Properties and States with at Least One Guidance or Example (9)

    +

    Properties and States with at Least One Guidance or Example (8)

    NOTE: The HC abbreviation means example has High Contrast support.

    Banner
    Table + Table
    Checkbox
    Contentinfo
    Form Landmark + Form Landmark
    gridcell
    menubar
    menuitem
    menuitemradio
    Meter + Meter
    none
    option
    radiogroup
    Region
    row
    Spinbutton +
    switchSwitch +
    Keyboard Navigation Between Components (The Tab Sequence)
    Table + Table
    tablist
    tabpanel
    Toolbar + Toolbar
    treeitem
    @@ -665,20 +683,20 @@

    Properties and States with at Least One Gu

    - - - @@ -690,19 +708,19 @@

    Properties and States with at Least One Gu

    - - - @@ -710,19 +728,12 @@

    Properties and States with at Least One Gu

    - - - - -
    aria-atomic Alert + Alert
    aria-busy Feed + Feed
    aria-colcount Using aria-colcount and aria-colindex Data Grid + Data Grid
    aria-multiselectable Listboxes with Rearrangeable Options + Listboxes with Rearrangeable Options
    aria-orientation Slider with aria-orientation and aria-valuetext + Vertical Temperature Slider
    aria-owns Navigation Treeview + Navigation Treeview
    Defining cell spans using aria-colspan and aria-rowspan
    aria-sortIndicating sort order with aria-sort -Data Grid -
    -

    Properties and States with More than One Guidance or Example (27)

    +

    Properties and States with More than One Guidance or Example (28)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -738,17 +749,17 @@

    Properties and States with More than One

    @@ -756,11 +767,11 @@

    Properties and States with More than One

    @@ -768,12 +779,15 @@

    Properties and States with More than One

    @@ -785,33 +799,33 @@

    Properties and States with More than One
  • Using aria-colindex When Column Indices Are Not Contiguous
    • -

    @@ -819,10 +833,11 @@

    Properties and States with More than One

    @@ -831,12 +846,12 @@

    Properties and States with More than One

    @@ -844,9 +859,9 @@

    Properties and States with More than One

    @@ -854,28 +869,28 @@

    Properties and States with More than One

    @@ -883,15 +898,15 @@

    Properties and States with More than One

    @@ -899,10 +914,19 @@

    Properties and States with More than One

    @@ -911,24 +935,24 @@

    Properties and States with More than One

    @@ -937,41 +961,46 @@

    Properties and States with More than One

    @@ -979,8 +1008,8 @@

    Properties and States with More than One

    @@ -988,11 +1017,11 @@

    Properties and States with More than One

    @@ -1000,10 +1029,10 @@

    Properties and States with More than One

    @@ -1011,9 +1040,9 @@

    Properties and States with More than One

    @@ -1021,9 +1050,9 @@

    Properties and States with More than One

    @@ -1031,8 +1060,8 @@

    Properties and States with More than One

    @@ -1041,8 +1070,8 @@

    Properties and States with More than One

    @@ -1051,8 +1080,8 @@

    Properties and States with More than One

    @@ -1060,20 +1089,22 @@

    Properties and States with More than One

    @@ -1081,9 +1112,19 @@

    Properties and States with More than One

    + + + + + @@ -1092,12 +1133,14 @@

    Properties and States with More than One

    @@ -1105,12 +1148,14 @@

    Properties and States with More than One

    @@ -1119,12 +1164,14 @@

    Properties and States with More than One

    @@ -1133,10 +1180,11 @@

    Properties and States with More than One

    @@ -1151,23 +1199,23 @@

    Coding Summary

    - + - + - + - + - + @@ -1175,19 +1223,19 @@

    Coding Summary

    - + - + - + - +
    Managing Focus in Composites Using aria-activedescendant
    aria-autocomplete
    aria-checked
    Data Grid + Data Grid
    aria-controls
    aria-current
    Describing by referencing content with aria-describedby
    aria-disabled
    aria-expanded
    aria-haspopup
    aria-hidden
    Naming with a String Attribute Via aria-label
    Naming with Referenced Content Via aria-labelledby
    aria-level
    aria-live
    aria-modal
    aria-posinset
    aria-pressed
    aria-roledescription
    Using aria-rowcount and aria-rowindex
    Using aria-rowcount and aria-rowindex
    aria-selected
    aria-setsize +
    aria-sortIndicating sort order with aria-sort +
    Using aria-valuemin, aria-valuemax and aria-valuenow
    aria-valuemin
    Using aria-valuemin, aria-valuemax and aria-valuenow
    Using aria-valuetext
    Total Examples5260
    High Contrast Documentation1731
    Uses SVG2233
    Uses forced-color-adjust on SVG113
    Uses event.KeyCode2818
    Uses event.which
    Use Class1230
    Use Prototype3322
    Mouse Events2315
    Pointer Events110
    @@ -1211,20 +1259,20 @@

    Coding Practices

    - Accordion - prototype + Accordion + class + - Yes - coding-arena + ex1 1 1 - 6 - 4 + 5 + 3 aria-hidden,aria-required - Alert + Alert @@ -1237,7 +1285,20 @@

    Coding Practices

    aria-live,aria-atomic - Button (IDL Version) + Breadcrumb + + + + + ex1 + 1 + 0 + 2 + 2 + navigation + + + Button (IDL Version) Yes @@ -1250,7 +1311,7 @@

    Coding Practices

    - Button + Button Yes @@ -1263,7 +1324,7 @@

    Coding Practices

    aria-hidden - Auto-Rotating Image Carousel with Buttons for Slide Control + Auto-Rotating Image Carousel with Buttons for Slide Control prototype @@ -1276,7 +1337,7 @@

    Coding Practices

    - Auto-Rotating Image Carousel with Tabs for Slide Control + Auto-Rotating Image Carousel with Tabs for Slide Control prototype @@ -1289,37 +1350,37 @@

    Coding Practices

    - Checkbox (Two State) - prototype - Yes + Checkbox (Mixed-State) + class + Yes ex1 + 1 + 1 2 2 - 2 - 1 - aria-labelledby + - Checkbox (Mixed-State) - prototype - Yes + Checkbox (Two State) + class + Yes ex1 - 1 - 1 + 2 + 2 2 2 - Editable Combobox With Both List and Inline Autocomplete + Editable Combobox With Both List and Inline Autocomplete class - + Yes ex1 3 3 @@ -1328,11 +1389,11 @@

    Coding Practices

    aria-hidden - Editable Combobox With List Autocomplete + Editable Combobox With List Autocomplete class - + Yes ex1 3 3 @@ -1341,11 +1402,11 @@

    Coding Practices

    aria-hidden - Editable Combobox without Autocomplete + Editable Combobox without Autocomplete class - + Yes ex1 3 3 @@ -1354,7 +1415,7 @@

    Coding Practices

    aria-hidden - Date Picker Combobox + Date Picker Combobox class @@ -1367,7 +1428,7 @@

    Coding Practices

    gridcell,aria-hidden - Select-Only Combobox + Select-Only Combobox prototype @@ -1380,7 +1441,7 @@

    Coding Practices

    option,aria-haspopup - Editable Combobox with Grid Popup + Editable Combobox with Grid Popup prototype Yes Yes @@ -1393,7 +1454,7 @@

    Coding Practices

    row,gridcell - Alert Dialog + Alert Dialog prototype Yes Yes @@ -1401,15 +1462,15 @@

    Coding Practices

    ex_alertdialog 2 2 + 5 4 - 3 - aria-controls + aria-hidden - Date Picker Dialog + Date Picker Dialog prototype - + Yes Yes example 3 @@ -1419,7 +1480,7 @@

    Coding Practices

    gridcell - Modal Dialog + Modal Dialog prototype Yes Yes @@ -1432,9 +1493,9 @@

    Coding Practices

    - Disclosure (Show/Hide) for Answers to Frequently Asked Questions - prototype - Yes + Disclosure (Show/Hide) for Answers to Frequently Asked Questions + class + Yes ex1 @@ -1445,9 +1506,9 @@

    Coding Practices

    - Disclosure (Show/Hide) for Image Description - prototype - Yes + Disclosure (Show/Hide) for Image Description + class + Yes ex1 @@ -1458,7 +1519,7 @@

    Coding Practices

    aria-labelledby - Disclosure Navigation Menu with Top-Level Links + Disclosure Navigation Menu with Top-Level Links class, prototype @@ -1471,7 +1532,7 @@

    Coding Practices

    banner,contentinfo,navigation,region,aria-label,aria-labelledby - Disclosure Navigation Menu + Disclosure Navigation Menu class, prototype @@ -1484,7 +1545,7 @@

    Coding Practices

    navigation,region,aria-label - Feed + Feed @@ -1497,7 +1558,7 @@

    Coding Practices

    feed,article,aria-labelledby,aria-busy,aria-describedby,aria-posinset,aria-setsize - Feed Display + Feed Display prototype Yes Yes @@ -1510,7 +1571,7 @@

    Coding Practices

    aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize - Advanced Data Grid + Advanced Data Grid prototype Yes Yes @@ -1523,7 +1584,7 @@

    Coding Practices

    aria-colindex,aria-controls,aria-haspopup,aria-rowindex,aria-sort - Data Grid + Data Grid prototype Yes Yes @@ -1536,7 +1597,7 @@

    Coding Practices

    button,menu,menuitem,aria-controls,aria-haspopup - Layout Grid + Layout Grid prototype Yes Yes @@ -1549,7 +1610,7 @@

    Coding Practices

    button,region,aria-colindex,aria-haspopup,aria-label,aria-live,aria-relevant,aria-sort - Link + Link Yes @@ -1562,7 +1623,7 @@

    Coding Practices

    - Collapsible Dropdown Listbox + (Deprecated) Collapsible Dropdown Listbox prototype Yes Yes @@ -1575,7 +1636,7 @@

    Coding Practices

    aria-disabled,aria-keyshortcuts,aria-multiselectable - Listbox with Grouped Options + Listbox with Grouped Options prototype Yes Yes @@ -1588,7 +1649,7 @@

    Coding Practices

    presentation,aria-disabled,aria-keyshortcuts,aria-multiselectable - Listboxes with Rearrangeable Options + Listboxes with Rearrangeable Options prototype Yes Yes @@ -1601,7 +1662,7 @@

    Coding Practices

    toolbar,aria-disabled,aria-keyshortcuts,aria-label,aria-live - Scrollable Listbox + Scrollable Listbox prototype Yes Yes @@ -1614,7 +1675,7 @@

    Coding Practices

    aria-disabled,aria-keyshortcuts,aria-multiselectable - Actions Menu Button Using aria-activedescendant + Actions Menu Button Using aria-activedescendant class @@ -1627,7 +1688,7 @@

    Coding Practices

    - Actions Menu Button Using element.focus() + Actions Menu Button Using element.focus() class @@ -1640,7 +1701,7 @@

    Coding Practices

    - Navigation Menu Button + Navigation Menu Button class @@ -1653,20 +1714,20 @@

    Coding Practices

    - Editor Menubar - prototype + Editor Menubar + class Yes ex1 8 7 + 7 6 - 5 none,aria-orientation - Navigation Menubar + Navigation Menubar class @@ -1679,7 +1740,7 @@

    Coding Practices

    separator,aria-orientation - Meter + Meter prototype @@ -1692,8 +1753,8 @@

    Coding Practices

    aria-hidden - Radio Group Using aria-activedescendant - prototype + Radio Group Using aria-activedescendant + class Yes @@ -1705,8 +1766,21 @@

    Coding Practices

    - Radio Group Using Roving tabindex - prototype + Rating Radio Group + class + + + Yes + ex1 + 3 + 3 + 3 + 3 + + + + Radio Group Using Roving tabindex + class Yes @@ -1718,24 +1792,37 @@

    Coding Practices

    - Horizontal Multi-Thumb Slider - prototype - Yes + Horizontal Multi-Thumb Slider + class + Yes ex1 - 1 - 1 + 2 + 2 5 5 - Slider with aria-orientation and aria-valuetext - prototype + Color Viewer Slider + class + + Yes + ex1 + 2 + 2 + 5 + 5 + + + + Rating Slider + class + Yes ex1 1 1 @@ -1744,7 +1831,7 @@

    Coding Practices

    - Color Viewer Slider + Media Seek Slider class @@ -1752,12 +1839,25 @@

    Coding Practices

    ex1 2 2 - 5 - 5 + 6 + 6 - Date Picker Spin Button + Vertical Temperature Slider + class + + + Yes + ex1 + 2 + 2 + 7 + 7 + + + + Date Picker Spin Button prototype Yes @@ -1770,46 +1870,98 @@

    Coding Practices

    - Table + Switch Using HTML Button + class + Yes + ex1 + 2 + 2 + 3 + 3 + + + + Switch Using HTML Checkbox Input + class + Yes ex1 - 5 - 5 + 1 + 1 + 1 + 1 + + + + Switch + class + + + Yes + ex1 + 1 + 1 2 2 - Tabs with Automatic Activation + Sortable Table + class + Yes + ex1 + 0 + 0 + 2 + 2 + + + + Table + + ex1 - 3 - 3 5 - 4 - aria-orientation + 5 + 2 + 2 + - Tabs with Manual Activation + Tabs with Automatic Activation + class + Yes + ex1 + 3 + 3 + 3 + 3 + + + + Tabs with Manual Activation + class + Yes ex1 3 3 - 5 - 4 - aria-orientation + 3 + 3 + - Toolbar + Toolbar @@ -1822,7 +1974,7 @@

    Coding Practices

    - Toolbar + Toolbar prototype Yes @@ -1835,20 +1987,20 @@

    Coding Practices

    - Treegrid Email Inbox - prototype - Yes + Treegrid Email Inbox + + ex1 3 3 - 7 5 - aria-activedescendant,aria-current + 5 + - File Directory Treeview Using Computed Properties + File Directory Treeview Using Computed Properties prototype Yes @@ -1856,12 +2008,12 @@

    Coding Practices

    ex1 3 3 + 4 3 - 2 aria-label - File Directory Treeview Using Declared Properties + File Directory Treeview Using Declared Properties prototype Yes @@ -1869,14 +2021,14 @@

    Coding Practices

    ex1 3 3 + 7 6 - 5 aria-label - Navigation Treeview - class - Yes + Navigation Treeview + + Yes ex1 @@ -1904,7 +2056,17 @@

    Graphics Techniques

    - Button (IDL Version) + Breadcrumb + + + + + Yes + + Yes + + + Button (IDL Version) Yes Yes @@ -1914,7 +2076,7 @@

    Graphics Techniques

    Yes - Button + Button Yes Yes @@ -1924,7 +2086,7 @@

    Graphics Techniques

    Yes - Auto-Rotating Image Carousel with Buttons for Slide Control + Auto-Rotating Image Carousel with Buttons for Slide Control Yes Yes @@ -1934,7 +2096,7 @@

    Graphics Techniques

    - Auto-Rotating Image Carousel with Tabs for Slide Control + Auto-Rotating Image Carousel with Tabs for Slide Control Yes Yes @@ -1944,27 +2106,27 @@

    Graphics Techniques

    - Checkbox (Two State) + Checkbox (Mixed-State) + Yes + Yes Yes - Yes - Yes - Checkbox (Mixed-State) + Checkbox (Two State) + Yes + Yes Yes - Yes - Yes - Editable Combobox With Both List and Inline Autocomplete + Editable Combobox With Both List and Inline Autocomplete Yes Yes @@ -1974,7 +2136,7 @@

    Graphics Techniques

    - Editable Combobox With List Autocomplete + Editable Combobox With List Autocomplete Yes Yes @@ -1984,7 +2146,7 @@

    Graphics Techniques

    - Editable Combobox without Autocomplete + Editable Combobox without Autocomplete Yes Yes @@ -1994,7 +2156,7 @@

    Graphics Techniques

    - Date Picker Combobox + Date Picker Combobox Yes Yes @@ -2004,7 +2166,7 @@

    Graphics Techniques

    Yes - Select-Only Combobox + Select-Only Combobox @@ -2014,7 +2176,17 @@

    Graphics Techniques

    Yes - Date Picker Dialog + Alert Dialog + Yes + Yes + + + + + + + + Date Picker Dialog @@ -2024,27 +2196,37 @@

    Graphics Techniques

    Yes - Disclosure (Show/Hide) for Answers to Frequently Asked Questions + Modal Dialog Yes - Yes + - Disclosure (Show/Hide) for Image Description + Disclosure (Show/Hide) for Answers to Frequently Asked Questions Yes + Yes + Yes + + + Disclosure (Show/Hide) for Image Description + + Yes + + Yes + Yes - Disclosure Navigation Menu with Top-Level Links + Disclosure Navigation Menu with Top-Level Links @@ -2054,7 +2236,7 @@

    Graphics Techniques

    Yes - Disclosure Navigation Menu + Disclosure Navigation Menu @@ -2064,7 +2246,7 @@

    Graphics Techniques

    Yes - Feed Display + Feed Display @@ -2074,7 +2256,7 @@

    Graphics Techniques

    Yes - Advanced Data Grid + Advanced Data Grid @@ -2084,7 +2266,7 @@

    Graphics Techniques

    Yes - Data Grid + Data Grid @@ -2094,7 +2276,7 @@

    Graphics Techniques

    Yes - Layout Grid + Layout Grid @@ -2104,7 +2286,7 @@

    Graphics Techniques

    Yes - Link + Link Yes @@ -2114,7 +2296,7 @@

    Graphics Techniques

    Yes - Collapsible Dropdown Listbox + (Deprecated) Collapsible Dropdown Listbox @@ -2124,7 +2306,7 @@

    Graphics Techniques

    Yes - Listbox with Grouped Options + Listbox with Grouped Options @@ -2134,7 +2316,7 @@

    Graphics Techniques

    Yes - Listboxes with Rearrangeable Options + Listboxes with Rearrangeable Options @@ -2144,7 +2326,7 @@

    Graphics Techniques

    Yes - Scrollable Listbox + Scrollable Listbox @@ -2154,7 +2336,7 @@

    Graphics Techniques

    Yes - Actions Menu Button Using aria-activedescendant + Actions Menu Button Using aria-activedescendant Yes Yes @@ -2164,7 +2346,7 @@

    Graphics Techniques

    - Actions Menu Button Using element.focus() + Actions Menu Button Using element.focus() Yes Yes @@ -2174,7 +2356,7 @@

    Graphics Techniques

    - Navigation Menu Button + Navigation Menu Button Yes Yes @@ -2184,17 +2366,17 @@

    Graphics Techniques

    - Editor Menubar + Editor Menubar Yes - Yes - Yes + + Yes - Navigation Menubar + Navigation Menubar Yes Yes Yes @@ -2204,7 +2386,7 @@

    Graphics Techniques

    - Meter + Meter Yes @@ -2214,27 +2396,37 @@

    Graphics Techniques

    - Radio Group Using aria-activedescendant + Radio Group Using aria-activedescendant + Yes + Yes Yes - Yes - Yes - Radio Group Using Roving tabindex + Rating Radio Group + Yes + Yes + + Yes + + + Radio Group Using Roving tabindex Yes + Yes + + Yes - Color Viewer Slider + Horizontal Multi-Thumb Slider Yes Yes Yes @@ -2244,57 +2436,87 @@

    Graphics Techniques

    - Date Picker Spin Button + Color Viewer Slider + Yes + Yes Yes Yes + + + Rating Slider + Yes + Yes + Yes + Yes + - Tabs with Automatic Activation - + Media Seek Slider + Yes + Yes + Yes + Yes + + + Vertical Temperature Slider + Yes Yes Yes Yes + + + - Tabs with Manual Activation + Date Picker Spin Button + Yes + Yes + + + + Switch Using HTML Button + Yes Yes Yes Yes + + + - Toolbar - Yes - Yes + Sortable Table + + + - Yes Yes Yes - Treegrid Email Inbox - + Toolbar + Yes Yes Yes - + Yes Yes - File Directory Treeview Using Computed Properties + File Directory Treeview Using Computed Properties @@ -2304,7 +2526,7 @@

    Graphics Techniques

    Yes - File Directory Treeview Using Declared Properties + File Directory Treeview Using Declared Properties @@ -2314,14 +2536,14 @@

    Graphics Techniques

    Yes - Navigation Treeview - Yes + Navigation Treeview Yes + @@ -2336,122 +2558,127 @@

    Mouse and Pointer Events

    - Auto-Rotating Image Carousel with Buttons for Slide Control + Auto-Rotating Image Carousel with Buttons for Slide Control Yes - Auto-Rotating Image Carousel with Tabs for Slide Control + Auto-Rotating Image Carousel with Tabs for Slide Control Yes - Editable Combobox With Both List and Inline Autocomplete - Yes + Editable Combobox With Both List and Inline Autocomplete + Yes - Editable Combobox With List Autocomplete - Yes + Editable Combobox With List Autocomplete + Yes - Editable Combobox without Autocomplete - Yes + Editable Combobox without Autocomplete + Yes - Date Picker Combobox + Date Picker Combobox Yes - Select-Only Combobox + Select-Only Combobox Yes - Date Picker Dialog + Date Picker Dialog Yes - Collapsible Dropdown Listbox + (Deprecated) Collapsible Dropdown Listbox Yes - Listbox with Grouped Options + Listbox with Grouped Options Yes - Listboxes with Rearrangeable Options + Listboxes with Rearrangeable Options Yes - Scrollable Listbox + Scrollable Listbox Yes - Actions Menu Button Using aria-activedescendant + Actions Menu Button Using aria-activedescendant Yes - Actions Menu Button Using element.focus() + Actions Menu Button Using element.focus() Yes - Navigation Menu Button + Navigation Menu Button Yes - Editor Menubar - Yes + Editor Menubar + Yes - Navigation Menubar - Yes + Navigation Menubar + Yes - Horizontal Multi-Thumb Slider - Yes + Horizontal Multi-Thumb Slider + Yes - Slider with aria-orientation and aria-valuetext - Yes + Color Viewer Slider + Yes - Color Viewer Slider + Rating Slider Yes - Toolbar + Media Seek Slider + Yes + + + Vertical Temperature Slider + Yes - File Directory Treeview Using Computed Properties + Toolbar Yes - File Directory Treeview Using Declared Properties + File Directory Treeview Using Computed Properties Yes - Navigation Treeview + File Directory Treeview Using Declared Properties Yes @@ -2462,6 +2689,7 @@

    Mouse and Pointer Events

    + - + \ No newline at end of file diff --git a/coverage/prop-coverage.csv b/coverage/prop-coverage.csv index caa7065e75..20b9d44b47 100644 --- a/coverage/prop-coverage.csv +++ b/coverage/prop-coverage.csv @@ -1,34 +1,34 @@ "Property or State","Guidance","Examples","References" -"aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" +"aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" "aria-atomic","0","1","Example: Alert" "aria-autocomplete","0","5","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup" "aria-busy","0","1","Example: Feed" -"aria-checked","0","6","Example: Checkbox (Two State)","Example: Checkbox (Mixed-State)","Example: Editor Menubar","Example: Radio Group Using aria-activedescendant","Example: Radio Group Using Roving tabindex","Example: Toolbar" +"aria-checked","0","9","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)","Example: Editor Menubar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Switch Using HTML Button","Example: Switch","Example: Toolbar" "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" "aria-controls","0","20","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" -"aria-current","0","4","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" +"aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" "aria-details","0","0" -"aria-disabled","0","3","Example: Accordion","Example: Editor Menubar","Example: Toolbar" +"aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" "aria-errormessage","0","0" -"aria-expanded","0","22","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"aria-expanded","0","22","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" -"aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" -"aria-hidden","0","4","Example: Button (IDL Version)","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" +"aria-hidden","0","13","Example: Button (IDL Version)","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar" "aria-invalid","0","0" "aria-keyshortcuts","0","0" -"aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","35","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Radio Group Using Roving tabindex","Example: Slider with aria-orientation and aria-valuetext","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" +"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog" "aria-multiline","0","0" "aria-multiselectable","0","1","Example: Listboxes with Rearrangeable Options" -"aria-orientation","0","1","Example: Slider with aria-orientation and aria-valuetext" +"aria-orientation","0","1","Example: Vertical Temperature Slider" "aria-owns","0","1","Example: Navigation Treeview" "aria-placeholder","0","0" "aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" @@ -40,10 +40,10 @@ "aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-selected","0","14","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" "aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" -"aria-sort","1","1","Guidance: Indicating sort order with aria-sort","Example: Data Grid" -"aria-valuemax","1","6","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Slider with aria-orientation and aria-valuetext","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuemin","0","6","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Slider with aria-orientation and aria-valuetext","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuenow","1","6","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Slider with aria-orientation and aria-valuetext","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuetext","1","4","Guidance: Using aria-valuetext","Example: Horizontal Multi-Thumb Slider","Example: Slider with aria-orientation and aria-valuetext","Example: Date Picker Spin Button","Example: Toolbar" +"aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" +"aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuenow","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuetext","1","5","Guidance: Using aria-valuetext","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/coverage/role-coverage.csv b/coverage/role-coverage.csv index c059044ec4..fda3e5ec60 100644 --- a/coverage/role-coverage.csv +++ b/coverage/role-coverage.csv @@ -7,7 +7,7 @@ "button","2","2","Guidance: Button","Guidance: Menu Button","Example: Button (IDL Version)","Example: Button" "caption","0","0" "cell","3","1","Guidance: Whether to Focus on a Cell Or an Element Inside It","Guidance: Editing and Navigating Inside a Cell","Guidance: Defining cell spans using aria-colspan and aria-rowspan","Example: Table" -"checkbox","1","2","Guidance: Checkbox","Example: Checkbox (Two State)","Example: Checkbox (Mixed-State)" +"checkbox","1","2","Guidance: Checkbox","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)" "code","0","0" "columnheader","0","1","Example: Table" "combobox","2","6","Guidance: Combobox","Guidance: Combobox Keyboard Interaction","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup" @@ -25,14 +25,14 @@ "generic","0","0" "grid","2","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" "gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","2","9","Guidance: Radio Group","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"group","2","10","Guidance: Radio Group","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "heading","0","0" "img","0","0" "input","0","0" "insertion","0","0" "link","1","1","Guidance: Link","Example: Link" "list","0","0" -"listbox","2","8","Guidance: Listbox Popup Keyboard Interaction","Guidance: Listbox","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" +"listbox","2","8","Guidance: Listbox Popup Keyboard Interaction","Guidance: Listbox","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" "listitem","0","0" "log","0","0" "main","1","1","Guidance: Main","Example: Main Landmark" @@ -45,9 +45,9 @@ "menuitemradio","0","2","Example: Editor Menubar","Example: Toolbar" "meter","2","1","Guidance: Meter","Guidance: Range properties with meter","Example: Meter" "navigation","5","3","Guidance: Navigation","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation ","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark" -"none","0","3","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Navigation Treeview" +"none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview" "note","0","0" -"option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" +"option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" "paragraph","0","0" "presentation","3","0","Guidance: Intentionally Hiding Semantics with the presentation Role","Guidance: Conditions That Cause Role presentation to be Ignored @@ -55,8 +55,8 @@ Example Demonstrating Effects of the presentation Role " "progressbar","0","0" -"radio","3","3","Guidance: Radio Group","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group Using aria-activedescendant","Example: Radio Group Using Roving tabindex","Example: Toolbar" -"radiogroup","0","3","Example: Radio Group Using aria-activedescendant","Example: Radio Group Using Roving tabindex","Example: Toolbar" +"radio","3","4","Guidance: Radio Group","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" +"radiogroup","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" "region","1","6","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" "row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" "rowgroup","0","1","Example: Table" @@ -65,10 +65,10 @@ "search","1","1","Guidance: Search","Example: Search Landmark" "searchbox","0","0" "separator","0","1","Example: Editor Menubar" -"slider","2","3","Guidance: Slider","Guidance: Slider (Multi-Thumb)","Example: Horizontal Multi-Thumb Slider","Example: Slider with aria-orientation and aria-valuetext","Example: Color Viewer Slider" +"slider","2","5","Guidance: Slider","Guidance: Slider (Multi-Thumb)","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider" "spinbutton","1","2","Guidance: Spinbutton","Example: Date Picker Spin Button","Example: Toolbar" "status","0","0" -"switch","0","0" +"switch","1","3","Guidance: Switch","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" "tab","1","3","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" "table","2","1","Guidance: Table","Guidance: Grid and Table Properties","Example: Table" "tablist","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" diff --git a/scripts/coverage-report.js b/scripts/coverage-report.js index 74fae12812..338008e2f6 100644 --- a/scripts/coverage-report.js +++ b/scripts/coverage-report.js @@ -12,8 +12,8 @@ const glob = require('glob'); const cheerio = require('cheerio'); const HTMLParser = require('node-html-parser'); -const exampleFilePath = path.join(__dirname, '..', 'coverage', 'index.html'); -const exampleTemplatePath = path.join(__dirname, 'coverage-report.template'); +const coverageReportPath = path.join(__dirname, '..', 'coverage', 'index.html'); +const templatePath = path.join(__dirname, 'coverage-report.template'); const csvRoleFilePath = path.join( __dirname, @@ -28,7 +28,7 @@ const csvPropFilePath = path.join( 'prop-coverage.csv' ); -let output = fs.readFileSync(exampleTemplatePath, function (err) { +let output = fs.readFileSync(templatePath, function (err) { console.log('Error reading aria index:', err); }); @@ -445,7 +445,7 @@ function getExampleCodeId(html) { // Index roles, properties and states used in examples glob - .sync('examples/!(landmarks)/**/!(index).html', { + .sync('content/patterns/!(landmarks)/examples/**/!(index).html', { cwd: path.join(__dirname, '..'), nodir: true, }) @@ -454,16 +454,6 @@ glob let dir = path.dirname(file); console.log('[ dir]: ' + dir); - // Ignore any files in the 'examples/js` directory - if (dir.indexOf('examples/js') >= 0) { - return; - } - - // Ignore any files in the 'examples/template` directory - if (dir.indexOf('examples/coding-template') >= 0) { - return; - } - if (file.toLowerCase().indexOf('deprecated') >= 0) { console.log(' [ignored]'); return; @@ -697,56 +687,56 @@ addLandmarkRole( ['banner'], false, 'Banner Landmark', - '../examples/landmarks/banner.html' + '../patterns/landmarks/examples/banner.html' ); addLandmarkRole( ['complementary'], true, 'Complementary Landmark', - '../examples/landmarks/complementary.html' + '../patterns/landmarks/examples/complementary.html' ); addLandmarkRole( ['contentinfo'], false, 'Contentinfo Landmark', - '../examples/landmarks/contentinfo.html' + '../patterns/landmarks/examples/contentinfo.html' ); addLandmarkRole( ['form'], true, 'Form Landmark', - '../examples/landmarks/form.html' + '../patterns/landmarks/examples/form.html' ); addLandmarkRole( ['main'], true, 'Main Landmark', - '../examples/landmarks/main.html' + '../patterns/landmarks/examples/main.html' ); addLandmarkRole( ['navigation'], true, 'Navigation Landmark', - '../examples/landmarks/navigation.html' + '../patterns/landmarks/examples/navigation.html' ); addLandmarkRole( ['region'], true, 'Region Landmark', - '../examples/landmarks/region.html' + '../patterns/landmarks/examples/region.html' ); addLandmarkRole( ['search'], true, 'Search Landmark', - '../examples/landmarks/search.html' + '../patterns/landmarks/examples/search.html' ); function getListItem(item) { @@ -1143,7 +1133,7 @@ const result = $.html() '\n' ); -fs.writeFile(exampleFilePath, result, function (err) { +fs.writeFile(coverageReportPath, result, function (err) { if (err) { console.log('Error saving updated aria practices:', err); } From 1d86abd580b50abeb5a46f88e343bf0609b1c95a Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 4 Sep 2022 23:15:12 -0700 Subject: [PATCH 2/8] Revise report template --- scripts/coverage-report.template | 72 ++++++++++++++++++++------------ 1 file changed, 46 insertions(+), 26 deletions(-) diff --git a/scripts/coverage-report.template b/scripts/coverage-report.template index eca7108bfa..b6feb092b6 100644 --- a/scripts/coverage-report.template +++ b/scripts/coverage-report.template @@ -3,7 +3,7 @@ - ARIA Roles, Properties and States Referenced in Guidance and Examples | WAI-ARIA Authoring Practices + Coverage and Quality Reports @@ -15,30 +15,53 @@ -
    -

    ARIA Roles, Properties and States Referenced in Guidance and Examples

    - -

    - This page includes information on number of guidance and example references in the WAI-ARIA Authoring Practices for each ARIA role, property and state. The guidance column is determined - by either the role, property or state being in the text content of a heading (e.g. h2-h6) or through the use of - data-aria-roles or data-aria-props attributes on any heading within the practices. The data-aria-roles or data-aria-props attributes should contain a space separated list of values. The use of the data attribute overrides the identification of roles, properties or states from the text content of a heading. The suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading. -

    - +

    Coverage and Quality Reports

    +
    +

    About These Reports

    +

    + The APG Task Force uses the reports on this page to help plan content improvements. + The reports provide data about the scope and quality of content in the APG. + The data delineates: +

    +
      +
    • Which ARIA attributes (roles, states, or properties) have usage demonstrated by an example.
      • +
    • Which ARIA attributes have usage guidance provided by a pattern or practice.
      • +
    • Which ARIA attributes are not covered by APG guidance or examples.
      • +
    • Which APG examples implement specific coding practices specified in the APG code guide.
      • +
    +

    + The data in the reports are generated by a script that runs when the main branch of the content repository is updated. + The script will indicate that a ARIA attribute has guidance in a pattern or practice if any of the following conditions are met: +

    +
      +
    • The ARIA attribute is included in the text of a heading (e.g. h2-h6) within the content of a pattern or practice.
      • +
    • + The ARIA attribute is included within either the data-aria-roles or data-aria-props attribute specified on a heading within a pattern or practice. + These data attributes may contain a space separated list of values. +
      • +
    +

    + If either of the data attributes is specified on a heading, the content of that heading will not be processed. + In the generated report, the suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading. +

    +

    + The following files and reports are generated: +

    + +
    -

    CSV Files of Role, Properties and States Coverage

    +

    CSV Formatted Reports of Role, Property, and State Coverage

    -

    Example Coding Practices

    +

    Code Quality

    Coding Summary

    @@ -225,9 +248,6 @@ - From c199421410155b54dc6a8f3a79c377de58e213e5 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 5 Sep 2022 08:40:58 -0700 Subject: [PATCH 3/8] Add script documentation to template --- scripts/coverage-report.template | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/scripts/coverage-report.template b/scripts/coverage-report.template index b6feb092b6..9bb1d81e1a 100644 --- a/scripts/coverage-report.template +++ b/scripts/coverage-report.template @@ -31,8 +31,10 @@
  • Which APG examples implement specific coding practices specified in the APG code guide.

    • - The data in the reports are generated by a script that runs when the main branch of the content repository is updated. - The script will indicate that a ARIA attribute has guidance in a pattern or practice if any of the following conditions are met: + The data in the reports are generated by a script + that is run by a GitHub action workflow + when the main branch of the aria-practices repository is updated. + The script will indicate that an ARIA attribute has guidance in a pattern or practice if any of the following conditions are met:

    • The ARIA attribute is included in the text of a heading (e.g. h2-h6) within the content of a pattern or practice.
      • From 274c92fc6f82ae740ac40a2d0bce653d8b2aef14 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 5 Sep 2022 11:14:51 -0700 Subject: [PATCH 4/8] Update paths to css and js in head --- scripts/coverage-report.template | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/coverage-report.template b/scripts/coverage-report.template index 9bb1d81e1a..fcf2892fdb 100644 --- a/scripts/coverage-report.template +++ b/scripts/coverage-report.template @@ -5,10 +5,10 @@ Coverage and Quality Reports - - - - + + + + -
      -

      ARIA Roles, Properties and States Referenced in Guidance and Examples

      - -

      - This page includes information on number of guidance and example references in the WAI-ARIA Authoring Practices for each ARIA role, property and state. The guidance column is determined - by either the role, property or state being in the text content of a heading (e.g. h2-h6) or through the use of - data-aria-roles or data-aria-props attributes on any heading within the practices. The data-aria-roles or data-aria-props attributes should contain a space separated list of values. The use of the data attribute overrides the identification of roles, properties or states from the text content of a heading. The suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading. -

      - +

      Coverage and Quality Reports

      +
      +

      About These Reports

      +

      + The APG Task Force uses the reports on this page to help plan content improvements. + The reports provide data about the scope and quality of content in the APG. + The data delineates: +

      +
        +
      • Which ARIA attributes (roles, states, or properties) have usage demonstrated by an example.
        • +
      • Which ARIA attributes have usage guidance provided by a pattern or practice.
        • +
      • Which ARIA attributes are not covered by APG guidance or examples.
        • +
      • Which APG examples implement specific coding practices specified in the APG code guide.
        • +
      +

      + The data in the reports are generated by a script + that is run by a GitHub action workflow + when the main branch of the aria-practices repository is updated. + The script will indicate that an ARIA attribute has guidance in a pattern or practice if any of the following conditions are met: +

      +
        +
      • The ARIA attribute is included in the text of a heading (e.g. h2-h6) within the content of a pattern or practice.
        • +
      • + The ARIA attribute is included within either the data-aria-roles or data-aria-props attribute specified on a heading within a pattern or practice. + These data attributes may contain a space separated list of values. +
        • +
      +

      + If either of the data attributes is specified on a heading, the content of that heading will not be processed. + In the generated report, the suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading. +

      +

      + The following files and reports are generated: +

      + +
      -

      CSV Files of Role, Properties and States Coverage

      +

      CSV Formatted Reports of Role, Property, and State Coverage

      -

      Roles with No Guidance or Examples (29)

      +

      Roles with No Guidance or Examples (31)

      • application
      • caption
        • @@ -68,6 +93,7 @@

        Roles with No Guidance or Examples (math
      • note
      • paragraph
        • +
      • presentation
      • progressbar
      • rowheader
      • scrollbar
        • @@ -75,11 +101,12 @@

        Roles with No Guidance or Examples (status
      • term
      • textbox
        • -
      • timer

      +
    • timer
      • +
    • tooltip
    -

    Roles with at Least One Guidance or Example (13)

    +

    Roles with at Least One Guidance or Example (17)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -100,6 +127,12 @@

    Roles with at Least One Guidance or Exampl

    + + + + + @@ -110,36 +143,44 @@

    Roles with at Least One Guidance or Exampl

    - - + - + - - + + + + + + - - + + + + + + @@ -150,9 +191,8 @@

    Roles with at Least One Guidance or Exampl

    - - + @@ -162,15 +202,20 @@

    Roles with at Least One Guidance or Exampl

    - - + + + + + + - + @@ -178,7 +223,7 @@

    Roles with at Least One Guidance or Exampl
    -

    Roles with More than One Guidance or Example (36)

    +

    Roles with More than One Guidance or Example (30)

    NOTE: The HC abbreviation means example has High Contrast support.

    article Feed +
    cellTable
    complementaryComplementary -Complementary Landmark + Complementary Landmark
    feedFeed - Feed
    linkLink + formForm Landmark
    link Link
    mainMain -Main Landmark + Main Landmark
    menuitemcheckbox Editor Menubar +
    meterMeter
    searchSearch -Search Landmark + Search Landmark
    tooltipTooltip Widget + tableTable
    toolbar Toolbar +
    treegridTreegrid - Treegrid Email Inbox
    @@ -191,11 +236,7 @@

    Roles with More than One Guidance or Exa

    - + - + - + - - - - - - + - + - + - + - - - - - - + - + - + - + - - - - - - + @@ -468,28 +440,9 @@

    Roles with More than One Guidance or Exa -

    - - - - - + - + @@ -536,11 +488,7 @@

    Roles with More than One Guidance or Exa

    - + - + - + - + - - - - - @@ -610,26 +545,11 @@

    Roles with More than One Guidance or Exa
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
    • - -

    - - - - - + @@ -247,8 +247,8 @@

    Roles with More than One Guidance or Exa

    @@ -257,8 +257,8 @@

    Roles with More than One Guidance or Exa

    @@ -266,8 +266,8 @@

    Roles with More than One Guidance or Exa

    @@ -275,12 +275,12 @@

    Roles with More than One Guidance or Exa

    @@ -288,8 +288,8 @@

    Roles with More than One Guidance or Exa

    @@ -298,9 +298,9 @@

    Roles with More than One Guidance or Exa

    @@ -308,11 +308,11 @@

    Roles with More than One Guidance or Exa

    @@ -320,9 +320,9 @@

    Roles with More than One Guidance or Exa

    @@ -330,16 +330,16 @@

    Roles with More than One Guidance or Exa

    @@ -347,14 +347,14 @@

    Roles with More than One Guidance or Exa

    @@ -362,12 +362,12 @@

    Roles with More than One Guidance or Exa

    @@ -375,8 +375,8 @@

    Roles with More than One Guidance or Exa

    @@ -384,11 +384,11 @@

    Roles with More than One Guidance or Exa

    @@ -396,8 +396,8 @@

    Roles with More than One Guidance or Exa

    @@ -405,8 +405,8 @@

    Roles with More than One Guidance or Exa

    @@ -415,13 +415,13 @@

    Roles with More than One Guidance or Exa

    @@ -429,14 +429,14 @@

    Roles with More than One Guidance or Exa

    @@ -444,10 +444,10 @@

    Roles with More than One Guidance or Exa

    @@ -455,10 +455,10 @@

    Roles with More than One Guidance or Exa

    @@ -466,11 +466,11 @@

    Roles with More than One Guidance or Exa

    @@ -479,10 +479,10 @@

    Roles with More than One Guidance or Exa

    @@ -490,11 +490,11 @@

    Roles with More than One Guidance or Exa

    @@ -502,8 +502,8 @@

    Roles with More than One Guidance or Exa

    @@ -511,9 +511,9 @@

    Roles with More than One Guidance or Exa

    @@ -521,9 +521,9 @@

    Roles with More than One Guidance or Exa

    @@ -531,9 +531,9 @@

    Roles with More than One Guidance or Exa

    @@ -541,9 +541,9 @@

    Roles with More than One Guidance or Exa

    @@ -551,9 +551,9 @@

    Roles with More than One Guidance or Exa

    @@ -561,9 +561,9 @@

    Roles with More than One Guidance or Exa

    @@ -605,43 +605,43 @@

    Properties and States with at Least One Gu

    - - - - - - -
    alert -
    bannerBanner -
    button - -
    cell -Table
    checkboxCheckbox -
    combobox -
    contentinfoContentinfo -
    dialog - -
    form -Form Landmark
    grid -
    group -
    listbox -
    menu - -
    meter -Meter
    navigation -
    presentation -
    radio -
    regionRegion -
    slider -
    spinbuttonSpinbutton -
    switchSwitch -
    tabKeyboard Navigation Between Components (The Tab Sequence) - -
    table -Table
    toolbar -Toolbar
    tree -
    • File Directory Treeview Using Computed Properties
    • File Directory Treeview Using Declared Properties
      • @@ -651,9 +571,10 @@

      Roles with More than One Guidance or Exa
      -

      Properties and States with No Guidance or Examples (12)

      +

      Properties and States with No Guidance or Examples (14)

      NOTE: The HC abbreviation means example has High Contrast support.
        +
      • aria-colspan
      • aria-details
      • aria-dropeffect
      • aria-errormessage
        • @@ -665,11 +586,12 @@

        Properties and States with No Guidance or
      • aria-placeholder
      • aria-readonly
      • aria-relevant
        • -
      • aria-required

      +
    • aria-required
      • +
    • aria-rowspan

    -

    Properties and States with at Least One Guidance or Example (8)

    +

    Properties and States with at Least One Guidance or Example (7)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -694,16 +616,15 @@

    Properties and States with at Least One Gu

    - + - - + + @@ -722,18 +643,12 @@

    Properties and States with at Least One Gu

    - - - - -
    aria-colcountUsing aria-colcount and aria-colindex - Data Grid
    aria-colspanDefining cell spans using aria-colspan and aria-rowspan -aria-colindex Data Grid +
    aria-multiselectable Navigation Treeview
    aria-rowspanDefining cell spans using aria-colspan and aria-rowspan -
    -

    Properties and States with More than One Guidance or Example (28)

    +

    Properties and States with More than One Guidance or Example (27)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -746,8 +661,7 @@

    Properties and States with More than One

    - + - - - - - @@ -843,8 +746,7 @@

    Properties and States with More than One

    - + - + - + @@ -1067,8 +967,7 @@

    Properties and States with More than One

    - + - + - + - + - + - + - - - - @@ -150,7 +150,7 @@

    Roles with at Least One Guidance or Exampl

    - @@ -162,7 +162,7 @@

    Roles with at Least One Guidance or Exampl

    - @@ -174,19 +174,19 @@

    Roles with at Least One Guidance or Exampl

    - - - @@ -198,25 +198,25 @@

    Roles with at Least One Guidance or Exampl

    - - - -
    aria-activedescendantManaging Focus in Composites Using aria-activedescendant - -
    aria-colindex -Data Grid
    aria-describedbyDescribing by referencing content with aria-describedby -
    aria-labelNaming with a String Attribute Via aria-label -
    aria-labelledbyNaming with Referenced Content Via aria-labelledby -
    aria-rowcountUsing aria-rowcount and aria-rowindex -
    aria-rowindexUsing aria-rowcount and aria-rowindex -
    aria-sortIndicating sort order with aria-sort -
    aria-valuemaxUsing aria-valuemin, aria-valuemax and aria-valuenow -
    aria-valuenowUsing aria-valuemin, aria-valuemax and aria-valuenow -
    aria-valuetextUsing aria-valuetext -
    • Rating Slider (HC)
    • Media Seek Slider (HC)
      • @@ -1192,7 +1086,7 @@

      Properties and States with More than One
      -

      Example Coding Practices

      +

      Code Quality

      Coding Summary

      @@ -1207,7 +1101,7 @@

      Coding Summary

      - + @@ -1215,7 +1109,7 @@

      Coding Summary

      - + @@ -1223,15 +1117,15 @@

      Coding Summary

      - + - + - + @@ -1988,16 +1882,16 @@

      Coding Practices

      - - + + + - - + @@ -2027,8 +1921,8 @@

      Coding Practices

      - - + + @@ -2515,6 +2409,16 @@

      Graphics Techniques

      + + + + + + + + + + @@ -2538,7 +2442,7 @@

      Graphics Techniques

      - + @@ -2681,14 +2585,16 @@

      Mouse and Pointer Events

      + + + + +
      Uses SVG3334
      Uses forced-color-adjust on SVG
      Uses event.KeyCode1820
      Uses event.which
      Use Class3031
      Use Prototype2223
      Mouse Events1516
      Pointer Events
      Treegrid Email InboxprototypeYes ex1 3 37 55aria-activedescendant,aria-current
      File Directory Treeview Using Computed Properties
      Navigation TreeviewclassYes Yes ex1 Yes Yes
      Treegrid Email InboxYesYesYes
      File Directory Treeview Using Computed Properties
      Navigation Treeview YesYes File Directory Treeview Using Declared Properties Yes
      Navigation TreeviewYes
      - diff --git a/coverage/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv similarity index 56% rename from coverage/prop-coverage.csv rename to content/about/coverage-and-quality/prop-coverage.csv index 20b9d44b47..867a1b6ff4 100644 --- a/coverage/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -1,15 +1,15 @@ "Property or State","Guidance","Examples","References" -"aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" +"aria-activedescendant","0","11","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" "aria-atomic","0","1","Example: Alert" "aria-autocomplete","0","5","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup" "aria-busy","0","1","Example: Feed" "aria-checked","0","9","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)","Example: Editor Menubar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Switch Using HTML Button","Example: Switch","Example: Toolbar" -"aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" -"aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" -"aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" +"aria-colcount","0","1","Example: Data Grid" +"aria-colindex","0","1","Example: Data Grid" +"aria-colspan","0","0" "aria-controls","0","20","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" -"aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" +"aria-describedby","0","6","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" "aria-details","0","0" "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" @@ -21,8 +21,8 @@ "aria-hidden","0","13","Example: Button (IDL Version)","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar" "aria-invalid","0","0" "aria-keyshortcuts","0","0" -"aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-label","0","18","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" +"aria-labelledby","0","40","Example: Accordion","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog" @@ -37,13 +37,13 @@ "aria-relevant","0","0" "aria-required","0","0" "aria-roledescription","0","2","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control" -"aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" -"aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" -"aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" +"aria-rowcount","0","2","Example: Data Grid","Example: Layout Grid" +"aria-rowindex","0","2","Example: Data Grid","Example: Layout Grid" +"aria-rowspan","0","0" "aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" "aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" -"aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" -"aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-sort","0","2","Example: Data Grid","Example: Sortable Table" +"aria-valuemax","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuenow","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuetext","1","5","Guidance: Using aria-valuetext","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuenow","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuetext","0","5","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv new file mode 100644 index 0000000000..737368ddea --- /dev/null +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -0,0 +1,79 @@ +"Role","Guidance","Examples","References" +"alert","0","2","Example: Alert","Example: Alert Dialog" +"alertdialog","0","1","Example: Alert Dialog" +"application","0","0" +"article","0","1","Example: Feed" +"banner","0","3","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark" +"button","0","2","Example: Button (IDL Version)","Example: Button" +"caption","0","0" +"cell","0","1","Example: Table" +"checkbox","0","2","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)" +"code","0","0" +"columnheader","0","1","Example: Table" +"combobox","0","6","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup" +"complementary","0","1","Example: Complementary Landmark" +"contentinfo","0","3","Example: Navigation Menubar","Example: Navigation Treeview","Example: Contentinfo Landmark" +"definition","0","0" +"deletion","0","0" +"dialog","0","3","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" +"directory","0","0" +"document","0","0" +"emphasis","0","0" +"feed","0","1","Example: Feed" +"figure","0","0" +"form","0","1","Example: Form Landmark" +"generic","0","0" +"grid","0","5","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" +"gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" +"group","0","10","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"heading","0","0" +"img","0","0" +"input","0","0" +"insertion","0","0" +"link","0","1","Example: Link" +"list","0","0" +"listbox","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" +"listitem","0","0" +"log","0","0" +"main","0","1","Example: Main Landmark" +"marquee","0","0" +"math","0","0" +"menu","0","6","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" +"menubar","0","2","Example: Editor Menubar","Example: Navigation Menubar" +"menuitem","0","5","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar" +"menuitemcheckbox","0","1","Example: Editor Menubar" +"menuitemradio","0","2","Example: Editor Menubar","Example: Toolbar" +"meter","0","1","Example: Meter" +"navigation","0","3","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark" +"none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview" +"note","0","0" +"option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" +"paragraph","0","0" +"presentation","0","0" +"progressbar","0","0" +"radio","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" +"radiogroup","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" +"region","0","6","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" +"row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" +"rowgroup","0","1","Example: Table" +"rowheader","0","0" +"scrollbar","0","0" +"search","0","1","Example: Search Landmark" +"searchbox","0","0" +"separator","0","1","Example: Editor Menubar" +"slider","0","5","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider" +"spinbutton","0","2","Example: Date Picker Spin Button","Example: Toolbar" +"status","0","0" +"switch","0","3","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" +"tab","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"table","0","1","Example: Table" +"tablist","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"tabpanel","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"term","0","0" +"textbox","0","0" +"timer","0","0" +"toolbar","0","1","Example: Toolbar" +"tooltip","0","0" +"tree","0","3","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"treegrid","0","1","Example: Treegrid Email Inbox" +"treeitem","0","3","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" diff --git a/content/shared/js/app.js b/content/shared/js/app.js index 7945ad6393..ab545ec1fb 100644 --- a/content/shared/js/app.js +++ b/content/shared/js/app.js @@ -69,7 +69,7 @@ // Add skipto.js to examples (function () { - let ref = window.location.href.match(/(.+\/)(patterns|index)\//)[1]; + let ref = window.location.href.match(/(.+\/)(patterns|about|index)\//)[1]; if (ref) { let head = document.getElementsByTagName('head')[0]; let scriptNode = document.createElement('script'); diff --git a/coverage/role-coverage.csv b/coverage/role-coverage.csv deleted file mode 100644 index fda3e5ec60..0000000000 --- a/coverage/role-coverage.csv +++ /dev/null @@ -1,83 +0,0 @@ -"Role","Guidance","Examples","References" -"alert","2","2","Guidance: Alert","Guidance: Alert and Message Dialogs","Example: Alert","Example: Alert Dialog" -"alertdialog","0","1","Example: Alert Dialog" -"application","0","0" -"article","0","1","Example: Feed" -"banner","1","3","Guidance: Banner","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark" -"button","2","2","Guidance: Button","Guidance: Menu Button","Example: Button (IDL Version)","Example: Button" -"caption","0","0" -"cell","3","1","Guidance: Whether to Focus on a Cell Or an Element Inside It","Guidance: Editing and Navigating Inside a Cell","Guidance: Defining cell spans using aria-colspan and aria-rowspan","Example: Table" -"checkbox","1","2","Guidance: Checkbox","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)" -"code","0","0" -"columnheader","0","1","Example: Table" -"combobox","2","6","Guidance: Combobox","Guidance: Combobox Keyboard Interaction","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup" -"complementary","1","1","Guidance: Complementary","Example: Complementary Landmark" -"contentinfo","1","3","Guidance: Contentinfo","Example: Navigation Menubar","Example: Navigation Treeview","Example: Contentinfo Landmark" -"definition","0","0" -"deletion","0","0" -"dialog","2","3","Guidance: Dialog Popup Keyboard Interaction","Guidance: Dialog (Modal)","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" -"directory","0","0" -"document","0","0" -"emphasis","0","0" -"feed","1","1","Guidance: Feed","Example: Feed" -"figure","0","0" -"form","2","1","Guidance: Form","Guidance: Naming Form Controls with the Label Element","Example: Form Landmark" -"generic","0","0" -"grid","2","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" -"gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","2","10","Guidance: Radio Group","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" -"heading","0","0" -"img","0","0" -"input","0","0" -"insertion","0","0" -"link","1","1","Guidance: Link","Example: Link" -"list","0","0" -"listbox","2","8","Guidance: Listbox Popup Keyboard Interaction","Guidance: Listbox","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" -"listitem","0","0" -"log","0","0" -"main","1","1","Guidance: Main","Example: Main Landmark" -"marquee","0","0" -"math","0","0" -"menu","2","6","Guidance: Menu or Menu bar","Guidance: Menu Button","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" -"menubar","0","2","Example: Editor Menubar","Example: Navigation Menubar" -"menuitem","0","5","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar" -"menuitemcheckbox","0","1","Example: Editor Menubar" -"menuitemradio","0","2","Example: Editor Menubar","Example: Toolbar" -"meter","2","1","Guidance: Meter","Guidance: Range properties with meter","Example: Meter" -"navigation","5","3","Guidance: Navigation","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation ","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark" -"none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview" -"note","0","0" -"option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" -"paragraph","0","0" -"presentation","3","0","Guidance: Intentionally Hiding Semantics with the presentation Role","Guidance: - Conditions That Cause Role presentation to be Ignored - ","Guidance: - Example Demonstrating Effects of the presentation Role - " -"progressbar","0","0" -"radio","3","4","Guidance: Radio Group","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" -"radiogroup","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" -"region","1","6","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" -"row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" -"rowgroup","0","1","Example: Table" -"rowheader","0","0" -"scrollbar","0","0" -"search","1","1","Guidance: Search","Example: Search Landmark" -"searchbox","0","0" -"separator","0","1","Example: Editor Menubar" -"slider","2","5","Guidance: Slider","Guidance: Slider (Multi-Thumb)","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider" -"spinbutton","1","2","Guidance: Spinbutton","Example: Date Picker Spin Button","Example: Toolbar" -"status","0","0" -"switch","1","3","Guidance: Switch","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" -"tab","1","3","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" -"table","2","1","Guidance: Table","Guidance: Grid and Table Properties","Example: Table" -"tablist","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" -"tabpanel","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" -"term","0","0" -"textbox","0","0" -"timer","0","0" -"toolbar","3","1","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Guidance: Toolbar","Example: Toolbar" -"tooltip","1","0","Guidance: Tooltip Widget" -"tree","2","3","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" -"treegrid","1","1","Guidance: Treegrid","Example: Treegrid Email Inbox" -"treeitem","0","3","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" diff --git a/scripts/coverage-report.js b/scripts/coverage-report.js index 338008e2f6..0e7497dd31 100644 --- a/scripts/coverage-report.js +++ b/scripts/coverage-report.js @@ -12,20 +12,19 @@ const glob = require('glob'); const cheerio = require('cheerio'); const HTMLParser = require('node-html-parser'); -const coverageReportPath = path.join(__dirname, '..', 'coverage', 'index.html'); +const coverageReportPath = path.join( + __dirname, + '../content/about/coverage-and-quality/coverage-and-quality-report.html' +); const templatePath = path.join(__dirname, 'coverage-report.template'); const csvRoleFilePath = path.join( __dirname, - '..', - 'coverage', - 'role-coverage.csv' + '../content/about/coverage-and-quality/role-coverage.csv' ); const csvPropFilePath = path.join( __dirname, - '..', - 'coverage', - 'prop-coverage.csv' + '../content/about/coverage-and-quality/prop-coverage.csv' ); let output = fs.readFileSync(templatePath, function (err) { @@ -687,56 +686,56 @@ addLandmarkRole( ['banner'], false, 'Banner Landmark', - '../patterns/landmarks/examples/banner.html' + '../content/patterns/landmarks/examples/banner.html' ); addLandmarkRole( ['complementary'], true, 'Complementary Landmark', - '../patterns/landmarks/examples/complementary.html' + '../content/patterns/landmarks/examples/complementary.html' ); addLandmarkRole( ['contentinfo'], false, 'Contentinfo Landmark', - '../patterns/landmarks/examples/contentinfo.html' + '../content/patterns/landmarks/examples/contentinfo.html' ); addLandmarkRole( ['form'], true, 'Form Landmark', - '../patterns/landmarks/examples/form.html' + '../content/patterns/landmarks/examples/form.html' ); addLandmarkRole( ['main'], true, 'Main Landmark', - '../patterns/landmarks/examples/main.html' + '../content/patterns/landmarks/examples/main.html' ); addLandmarkRole( ['navigation'], true, 'Navigation Landmark', - '../patterns/landmarks/examples/navigation.html' + '../content/patterns/landmarks/examples/navigation.html' ); addLandmarkRole( ['region'], true, 'Region Landmark', - '../patterns/landmarks/examples/region.html' + '../content/patterns/landmarks/examples/region.html' ); addLandmarkRole( ['search'], true, 'Search Landmark', - '../patterns/landmarks/examples/search.html' + '../content/patterns/landmarks/examples/search.html' ); function getListItem(item) { From 7fc0fe924687a114e0265fa4b14803b4d5be4581 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 2 Oct 2022 10:33:51 -0700 Subject: [PATCH 6/8] re-run script and generate index after merge --- .../coverage-and-quality-report.html | 1006 ++++++++--------- 1 file changed, 503 insertions(+), 503 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 3decb08133..090c366b43 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -120,25 +120,25 @@

      Roles with at Least One Guidance or Exampl

    alertdialog Alert Dialog + Alert Dialog
    article Feed + Feed
    cell Table + Table
    columnheader Table + Table
    feed Feed + Feed
    link Link + Link
    menuitemcheckbox Editor Menubar + Editor Menubar
    meter Meter + Meter
    rowgroup Table + Table
    separator Editor Menubar + Editor Menubar
    table Table + Table
    toolbar Toolbar + Toolbar
    treegrid Treegrid Email Inbox + Treegrid Email Inbox
    @@ -238,8 +238,8 @@

    Roles with More than One Guidance or Exa

    		alert
    banner button
    checkbox
    combobox
    contentinfo dialog
    grid
    gridcell
    group
    listbox
    menu
    menubar
    menuitem
    menuitemradio
    navigation none
    option
    radio
    radiogroup
    region row
    slider
    spinbutton
    switch
    tab
    tablist
    tabpanel
    tree
    treeitem
    aria-atomic Alert + Alert
    aria-busy Feed + Feed
    aria-colcount Data Grid + Data Grid
    aria-colindex Data Grid + Data Grid
    aria-multiselectable Listboxes with Rearrangeable Options + Listboxes with Rearrangeable Options
    aria-orientation Vertical Temperature Slider + Vertical Temperature Slider
    aria-owns Navigation Treeview + Navigation Treeview
    @@ -663,17 +663,17 @@

    Properties and States with More than One aria-activedescendant @@ -681,11 +681,11 @@

    Properties and States with More than One aria-autocomplete @@ -693,15 +693,15 @@

    Properties and States with More than One aria-checked @@ -709,26 +709,26 @@

    Properties and States with More than One aria-controls @@ -736,11 +736,11 @@

    Properties and States with More than One aria-current @@ -748,12 +748,12 @@

    Properties and States with More than One aria-describedby @@ -761,9 +761,9 @@

    Properties and States with More than One aria-disabled @@ -771,28 +771,28 @@

    Properties and States with More than One aria-expanded @@ -800,15 +800,15 @@

    Properties and States with More than One aria-haspopup @@ -816,19 +816,19 @@

    Properties and States with More than One aria-hidden @@ -836,24 +836,24 @@

    Properties and States with More than One aria-label @@ -861,40 +861,40 @@

    Properties and States with More than One aria-labelledby

    @@ -70,7 +70,7 @@

    CSV Formatted Reports of Role, Property, and State Coverage

    -

    Roles with No Guidance or Examples (31)

    +

    Roles with No Guidance or Examples (29)

    +
  • timer
    • -

    Roles with at Least One Guidance or Example (17)

    +

    Roles with at Least One Guidance or Example (13)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -127,12 +125,6 @@

    Roles with at Least One Guidance or Exampl

    - - - - - @@ -143,31 +135,29 @@

    Roles with at Least One Guidance or Exampl

    - + - - - - - - - - + - + @@ -175,12 +165,6 @@

    Roles with at Least One Guidance or Exampl

    - - - - - @@ -191,7 +175,8 @@

    Roles with at Least One Guidance or Exampl

    - + @@ -202,20 +187,15 @@

    Roles with at Least One Guidance or Exampl

    - - - + - - - - - + @@ -223,7 +203,7 @@

    Roles with at Least One Guidance or Exampl
    -

    Roles with More than One Guidance or Example (30)

    +

    Roles with More than One Guidance or Example (36)

    NOTE: The HC abbreviation means example has High Contrast support.

    article Feed -
    cellTable
    complementaryComplementary + Complementary Landmark
    feedFeed + Feed Pattern
    formForm Landmark + Feed
    linkLink Pattern + Link
    mainMain + Main Landmark
    menuitemcheckbox Editor Menubar -
    meterMeter
    searchSearch + Search Landmark
    tableTable + tooltipTooltip Pattern
    toolbar Toolbar -
    treegridTreegrid Pattern + Treegrid Email Inbox
    @@ -236,7 +216,11 @@

    Roles with More than One Guidance or Exa

    - + - + - + + + + + + - + - + - + - + + + + + + - + - + - + - + - + + + + + + - + - + + + + + + - + - + - + - + - + + + + + + @@ -545,11 +635,26 @@

    Roles with More than One Guidance or Exa
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
    • + +

    + + + + - +
    alert +
    bannerBanner +
    button + +
    cell +Table
    checkboxCheckbox Pattern +
    combobox +
    contentinfoContentinfo +
    dialog + +
    form +Form Landmark
    grid +
    group +
    listbox +
    menu +
    menubarMenu and Menubar Pattern + +
    meter +Meter
    navigation +
    radiopresentation +
    radio +
    regionRegion +
    slider +
    spinbuttonSpinbutton Pattern +
    switchSwitch Pattern +
    tabKeyboard Navigation Between Components (The Tab Sequence) + +
    table +Table
    toolbar +Toolbar
    tree +
    • File Directory Treeview Using Computed Properties
    • File Directory Treeview Using Declared Properties
      • @@ -571,10 +676,9 @@

      Roles with More than One Guidance or Exa
      -

      Properties and States with No Guidance or Examples (14)

      +

      Properties and States with No Guidance or Examples (12)

      NOTE: The HC abbreviation means example has High Contrast support.
        -
      • aria-colspan
      • aria-details
      • aria-dropeffect
      • aria-errormessage
        • @@ -586,12 +690,11 @@

        Properties and States with No Guidance or
      • aria-placeholder
      • aria-readonly
      • aria-relevant
        • -
      • aria-required
        • -
      • aria-rowspan

      +
    • aria-required

    -

    Properties and States with at Least One Guidance or Example (7)

    +

    Properties and States with at Least One Guidance or Example (8)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -616,15 +719,16 @@

    Properties and States with at Least One Gu

    - + - - - + + @@ -643,12 +747,18 @@

    Properties and States with at Least One Gu

    + + + + +
    aria-colcountUsing aria-colcount and aria-colindex + Data Grid
    aria-colindexData Grid + aria-colspanDefining cell spans using aria-colspan and aria-rowspan
    aria-multiselectable Navigation Treeview
    aria-rowspanDefining cell spans using aria-colspan and aria-rowspan +
    -

    Properties and States with More than One Guidance or Example (27)

    +

    Properties and States with More than One Guidance or Example (28)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -661,7 +771,8 @@

    Properties and States with More than One

    - + + + + + + @@ -746,7 +868,8 @@

    Properties and States with More than One

    - + - + - + - + - + - + - + - + - +
    aria-activedescendantManaging Focus in Composites Using aria-activedescendant + +
    aria-colindex +Data Grid
    aria-describedbyDescribing by referencing content with aria-describedby +
    aria-labelNaming with a String Attribute Via aria-label +
    aria-labelledbyNaming with Referenced Content Via aria-labelledby +
    aria-rowcountUsing aria-rowcount and aria-rowindex +
    aria-rowindexUsing aria-rowcount and aria-rowindex +
    aria-sortIndicating sort order with aria-sort +
    aria-valuemaxUsing aria-valuemin, aria-valuemax and aria-valuenow +
    aria-valuenowUsing aria-valuemin, aria-valuemax and aria-valuenow +
    aria-valuetextUsing aria-valuetext +
    • Rating Slider (HC)
    • Media Seek Slider (HC)
      • diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index 867a1b6ff4..20b9d44b47 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -1,15 +1,15 @@ "Property or State","Guidance","Examples","References" -"aria-activedescendant","0","11","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" +"aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" "aria-atomic","0","1","Example: Alert" "aria-autocomplete","0","5","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup" "aria-busy","0","1","Example: Feed" "aria-checked","0","9","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)","Example: Editor Menubar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Switch Using HTML Button","Example: Switch","Example: Toolbar" -"aria-colcount","0","1","Example: Data Grid" -"aria-colindex","0","1","Example: Data Grid" -"aria-colspan","0","0" +"aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" +"aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" +"aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" "aria-controls","0","20","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" -"aria-describedby","0","6","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" +"aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" "aria-details","0","0" "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" @@ -21,8 +21,8 @@ "aria-hidden","0","13","Example: Button (IDL Version)","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar" "aria-invalid","0","0" "aria-keyshortcuts","0","0" -"aria-label","0","18","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","0","40","Example: Accordion","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" +"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Date Picker Combobox","Example: Alert Dialog","Example: Date Picker Dialog","Example: Modal Dialog" @@ -37,13 +37,13 @@ "aria-relevant","0","0" "aria-required","0","0" "aria-roledescription","0","2","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control" -"aria-rowcount","0","2","Example: Data Grid","Example: Layout Grid" -"aria-rowindex","0","2","Example: Data Grid","Example: Layout Grid" -"aria-rowspan","0","0" +"aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" +"aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" +"aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" "aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" "aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" -"aria-sort","0","2","Example: Data Grid","Example: Sortable Table" -"aria-valuemax","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" +"aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuenow","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuetext","0","5","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuenow","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuetext","1","5","Guidance: Using aria-valuetext","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index 737368ddea..0ce29e8ea8 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -1,79 +1,79 @@ "Role","Guidance","Examples","References" -"alert","0","2","Example: Alert","Example: Alert Dialog" +"alert","2","2","Guidance: Alert and Message Dialogs Pattern","Guidance: Alert Pattern","Example: Alert","Example: Alert Dialog" "alertdialog","0","1","Example: Alert Dialog" "application","0","0" "article","0","1","Example: Feed" -"banner","0","3","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark" -"button","0","2","Example: Button (IDL Version)","Example: Button" +"banner","1","3","Guidance: Banner","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark" +"button","2","2","Guidance: Button Pattern","Guidance: Menu Button Pattern","Example: Button (IDL Version)","Example: Button" "caption","0","0" -"cell","0","1","Example: Table" -"checkbox","0","2","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)" +"cell","3","1","Guidance: Whether to Focus on a Cell Or an Element Inside It","Guidance: Editing and Navigating Inside a Cell","Guidance: Defining cell spans using aria-colspan and aria-rowspan","Example: Table" +"checkbox","1","2","Guidance: Checkbox Pattern","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)" "code","0","0" "columnheader","0","1","Example: Table" -"combobox","0","6","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup" -"complementary","0","1","Example: Complementary Landmark" -"contentinfo","0","3","Example: Navigation Menubar","Example: Navigation Treeview","Example: Contentinfo Landmark" +"combobox","2","6","Guidance: Combobox Pattern","Guidance: Combobox Keyboard Interaction","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup" +"complementary","1","1","Guidance: Complementary","Example: Complementary Landmark" +"contentinfo","1","3","Guidance: Contentinfo","Example: Navigation Menubar","Example: Navigation Treeview","Example: Contentinfo Landmark" "definition","0","0" "deletion","0","0" -"dialog","0","3","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" +"dialog","2","3","Guidance: Dialog Popup Keyboard Interaction","Guidance: Dialog (Modal) Pattern","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" "directory","0","0" "document","0","0" "emphasis","0","0" -"feed","0","1","Example: Feed" +"feed","1","1","Guidance: Feed Pattern","Example: Feed" "figure","0","0" -"form","0","1","Example: Form Landmark" +"form","2","1","Guidance: Form","Guidance: Naming Form Controls with the Label Element","Example: Form Landmark" "generic","0","0" -"grid","0","5","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" +"grid","3","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid (Interactive Tabular Data and Layout Containers) Pattern","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" "gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","0","10","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"group","2","10","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "heading","0","0" "img","0","0" "input","0","0" "insertion","0","0" -"link","0","1","Example: Link" +"link","1","1","Guidance: Link Pattern","Example: Link" "list","0","0" -"listbox","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" +"listbox","2","8","Guidance: Listbox Popup Keyboard Interaction","Guidance: Listbox Pattern","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" "listitem","0","0" "log","0","0" -"main","0","1","Example: Main Landmark" +"main","1","1","Guidance: Main","Example: Main Landmark" "marquee","0","0" "math","0","0" -"menu","0","6","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" -"menubar","0","2","Example: Editor Menubar","Example: Navigation Menubar" +"menu","2","6","Guidance: Menu Button Pattern","Guidance: Menu and Menubar Pattern","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" +"menubar","1","2","Guidance: Menu and Menubar Pattern","Example: Editor Menubar","Example: Navigation Menubar" "menuitem","0","5","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar" "menuitemcheckbox","0","1","Example: Editor Menubar" "menuitemradio","0","2","Example: Editor Menubar","Example: Toolbar" -"meter","0","1","Example: Meter" -"navigation","0","3","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark" +"meter","2","1","Guidance: Meter Pattern","Guidance: Range properties with meter","Example: Meter" +"navigation","5","3","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation ","Guidance: Navigation","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark" "none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview" "note","0","0" "option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" "paragraph","0","0" -"presentation","0","0" +"presentation","5","0","Guidance: Hiding Semantics with the presentation Role","Guidance: Common Uses of Role presentation","Guidance: Effects of Role presentation","Guidance: Conditions That Cause Role presentation to be Ignored","Guidance: Example Demonstrating Effects of the presentation Role" "progressbar","0","0" -"radio","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" +"radio","3","4","Guidance: Radio Group Pattern","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" "radiogroup","0","4","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Toolbar" -"region","0","6","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" +"region","1","6","Guidance: Region","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Navigation Menubar","Example: Navigation Treeview","Example: Region Landmark" "row","0","4","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Table","Example: Treegrid Email Inbox" "rowgroup","0","1","Example: Table" "rowheader","0","0" "scrollbar","0","0" -"search","0","1","Example: Search Landmark" +"search","1","1","Guidance: Search","Example: Search Landmark" "searchbox","0","0" "separator","0","1","Example: Editor Menubar" -"slider","0","5","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider" -"spinbutton","0","2","Example: Date Picker Spin Button","Example: Toolbar" +"slider","2","5","Guidance: Slider (Multi-Thumb) Pattern","Guidance: Slider Pattern","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider" +"spinbutton","1","2","Guidance: Spinbutton Pattern","Example: Date Picker Spin Button","Example: Toolbar" "status","0","0" -"switch","0","3","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" -"tab","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" -"table","0","1","Example: Table" +"switch","1","3","Guidance: Switch Pattern","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" +"tab","1","3","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"table","2","1","Guidance: Table Pattern","Guidance: Grid and Table Properties","Example: Table" "tablist","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" "tabpanel","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" "term","0","0" "textbox","0","0" "timer","0","0" -"toolbar","0","1","Example: Toolbar" -"tooltip","0","0" -"tree","0","3","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" -"treegrid","0","1","Example: Treegrid Email Inbox" +"toolbar","3","1","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Guidance: Toolbar Pattern","Example: Toolbar" +"tooltip","1","0","Guidance: Tooltip Pattern" +"tree","2","3","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"treegrid","1","1","Guidance: Treegrid Pattern","Example: Treegrid Email Inbox" "treeitem","0","3","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" diff --git a/scripts/coverage-report.js b/scripts/coverage-report.js index f18dfcec88..fcad1db6dd 100644 --- a/scripts/coverage-report.js +++ b/scripts/coverage-report.js @@ -384,7 +384,7 @@ function getUniqueRolesInExample(html, dataJS) { } } }); - roles.forEach((role) => console.log(' [Example role]: ' + role)); + // roles.forEach((role) => console.log(' [Example role]: ' + role)); console.log(' [Example Roles]: ' + roles.length); return roles; } @@ -598,7 +598,7 @@ function addGuidanceToPropertyOrState(prop, url, label, id) { } function getRolesPropertiesAndStatesFromHeaders(html, url) { - let dataHeadings = html.querySelectorAll('h2, h3, h4, h4, h5, h6'); + let dataHeadings = html.querySelectorAll('h1, h2, h3, h4, h4, h5, h6'); for (let i = 0; i < dataHeadings.length; i++) { let dataHeading = dataHeadings[i]; @@ -672,21 +672,30 @@ function getRolesPropertiesAndStatesFromGuidance(html, url) { getPropertiesAndStatesFromDataAttributesOnHeaders(html, url); } -let data = fs.readFileSync( - path.join(__dirname, '../aria-practices.html'), - 'utf8' -); +const patternFiles = glob.sync('content/patterns/!(landmarks)/*-pattern.html', { + cwd: path.join(__dirname, '..'), +}); + +const practiceFiles = glob.sync('content/practices/*/*-practice.html', { + cwd: path.join(__dirname, '..'), +}); -let html = HTMLParser.parse(data); +const guidanceFiles = [...patternFiles, ...practiceFiles]; -getRolesPropertiesAndStatesFromGuidance(html, '../aria-practices.html'); +guidanceFiles.forEach(function (file) { + let data = fs.readFileSync(file, 'utf8'); + + let html = HTMLParser.parse(data); + + getRolesPropertiesAndStatesFromGuidance(html, path.join('../../../', file)); +}); // Add landmark examples, since they are a different format addLandmarkRole( ['banner'], false, 'Banner Landmark', - '../../content/patterns/landmarks/examples/banner.html' + '../../../content/patterns/landmarks/examples/banner.html' ); addLandmarkRole(