| <!DOCTYPE html> |
| <html lang="en-US"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> |
| <title>Coverage and Quality Reports</title> |
| <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css"> |
| <link rel="stylesheet" href="../../shared/css/core.css"> |
| <script src="../../shared/js/examples.js"></script> |
| <script src="../../shared/js/highlight.pack.js"></script> |
| <script src="../../shared/js/app.js"></script> |
| <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script> |
| <style> |
| .sr-only {position: absolute; top: -30em;} |
| table.summary th { width: 12em; } |
| </style> |
| </head> |
| <body> |
| <main> |
| <h1>Coverage and Quality Reports</h1> |
| <p>Page last updated:</p> |
| <section> |
| <h2>About These Reports</h2> |
| <p> |
| 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: |
| </p> |
| <ul> |
| <li>Which ARIA attributes (roles, states, or properties) have usage demonstrated by an example.</li> |
| <li>Which ARIA attributes have usage guidance provided by a pattern or practice.</li> |
| <li>Which ARIA attributes are not covered by APG guidance or examples.</li> |
| <li>Which APG examples implement specific coding practices specified in the APG code guide.</li> |
| </ul> |
| <p> |
| The data in the reports are generated by a <a href="https://github.com/w3c/aria-practices/blob/main/scripts/coverage-report.js">script</a> |
| that is run by a <a href="https://github.com/w3c/aria-practices/blob/main/.github/workflows/coverage-report.yml">GitHub action workflow</a> |
| 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: |
| </p> |
| <ul> |
| <li>The ARIA attribute is included in the text of a heading (e.g. <code>h2</code>-<code>h6</code>) within the content of a pattern or practice.</li> |
| <li> |
| The ARIA attribute is included within either the <code>data-aria-roles</code> or <code>data-aria-props</code> attribute specified on a heading within a pattern or practice. |
| These data attributes may contain a space separated list of values. |
| </li> |
| </ul> |
| <p> |
| 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 <strong>"(D)"</strong> indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading. |
| </p> |
| <p> |
| The following files and reports are generated: |
| </p> |
| <ul> |
| <li><a href="#csv_files">CSV Files of Role, Properties and States Coverage</a></li> |
| <li><a href="#roles_with_no_examples">Roles with no Guidance or Examples (<span class="roles_with_no_examples_count"></span>)</a></li> |
| <li><a href="#roles_with_one_example">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count"></span>)</a></li> |
| <li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count"></span>)</a></li> |
| <li><a href="#props_with_no_examples">Properties and States with no Examples (<span class="props_with_no_examples_count"></span>)</a></li> |
| <li><a href="#props_with_one_example">Properties and States with One Examples (<span class="props_with_one_example_count"></span>)</a></li> |
| <li><a href="#props_with_more_than_one_example">Properties and States with More than One Example (<span class="props_with_more_than_one_examples_count"></span>)</a></li> |
| <li><a href="#example_coding">Example Coding Practices</a></li> |
| </ul> |
| </section> |
| |
| <section id="csv_files"> |
| <h2>CSV Formatted Reports of Role, Property, and State Coverage</h2> |
| <ul> |
| <li><a href="role-coverage.csv">CSV file of role coverage</a></li> |
| <li><a href="prop-coverage.csv">CSV file of properties and states coverage</a></li> |
| </ul> |
| </section> |
| |
| <section id="roles_with_no_examples"> |
| <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span class="roles_with_no_examples_count"></span>)</h2> |
| <ul id="roles_with_no_examples_ul"> |
| </ul> |
| </section> |
| |
| <section id="roles_with_one_example"> |
| <h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count"></span>)</h2> |
| <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div> |
| <table aria-labelledby="roles_with_one_example_label" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Role</th> |
| <th>Guidance</th> |
| <th>Example</th> |
| </tr> |
| </thead> |
| <tbody id="roles_with_one_example_tbody"> |
| </tbody> |
| </table> |
| </section> |
| |
| <section id="roles_with_more_than_one_example"> |
| <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count"></span>)</h2> |
| <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div> |
| <table aria-labelledby="roles_with_more_than_one_label" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Role</th> |
| <th>Guidance</th> |
| <th>Examples</th> |
| </tr> |
| </thead> |
| <tbody id="roles_with_more_than_one_tbody"> |
| </tbody> |
| </table> |
| </section> |
| |
| <section id="props_with_no_examples"> |
| <h2 id="props_with_no_examples_label">Properties and States with No Guidance or Examples (<span class="props_with_no_examples_count"></span>)</h2> |
| <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div> |
| <ul id="props_with_no_examples_ul"> |
| </ul> |
| </section> |
| |
| <section id="props_with_one_example"> |
| <h2 id="props_with_one_example_label">Properties and States with at Least One Guidance or Example (<span class="props_with_one_example_count"></span>)</h2> |
| <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div> |
| <table aria-labelledby="props_with_one_example_label" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Property or State</th> |
| <th>Guidance</th> |
| <th>Example</th> |
| </tr> |
| </thead> |
| <tbody id="props_with_one_example_tbody"> |
| </tbody> |
| </table> |
| </section> |
| |
| <section id="props_with_more_than_one_example"> |
| <h2 id="props_with_more_than_one_label">Properties and States with More than One Guidance or Example (<span class="props_with_more_than_one_examples_count"></span>)</h2> |
| <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div> |
| <table aria-labelledby="props_with_more_than_one_label" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Property or State</th> |
| <th>Guidance</th> |
| <th>Examples</th> |
| </tr> |
| </thead> |
| <tbody id="props_with_more_than_one_tbody"> |
| </tbody> |
| </table> |
| </section> |
| |
| <section id="example_coding"> |
| <h2>Code Quality</h2> |
| |
| <h3 id="example_summary">Coding Summary</h3> |
| <table aria-labelledby="example_summary" class="data attributes summary"> |
| <tbody> |
| <tr> |
| <th scope="row">Total Examples</th> |
| <td id="example_summary_total"></td> |
| </tr> |
| <tr> |
| <th scope="row">High Contrast Documentation</th> |
| <td id="example_summary_hc"></td> |
| </tr> |
| <tr> |
| <th scope="row">Uses SVG</th> |
| <td id="example_summary_svg"></td> |
| </tr> |
| <tr> |
| <th scope="row">Uses <code>forced-colors</code> media query</th> |
| <td id="example_summary_force_colors"></td> |
| </tr> |
| <tr> |
| <th scope="row">Uses <code>currentColor</code> value</th> |
| <td id="example_summary_current_color"></td> |
| </tr> |
| <!-- |
| <tr> |
| <th scope="row">Uses <code>forced-color-adjust</code> in CSS/SVG</th> |
| <td id="example_summary_force_color_adjust"></td> |
| </tr> |
| --> |
| <tr> |
| <th scope="row">Uses <code>event.KeyCode</code></th> |
| <td id="example_summary_keycode"></td> |
| </tr> |
| <tr> |
| <th scope="row">Uses <code>event.which</code></th> |
| <td id="example_summary_which"></td> |
| </tr> |
| <tr> |
| <th scope="row">Use Class</th> |
| <td id="example_summary_class"></td> |
| </tr> |
| <tr> |
| <th scope="row">Use Prototype</th> |
| <td id="example_summary_prototype"></td> |
| </tr> |
| <tr> |
| <th scope="row">Mouse Events</th> |
| <td id="example_summary_mouse"></td> |
| </tr> |
| <tr> |
| <th scope="row">Pointer Events</th> |
| <td id="example_summary_pointer"></td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h3 id="example_coding_practices">Coding Practices</h3> |
| <table aria-labelledby="example_coding_practices" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Example</th> |
| <th>Created Using</th> |
| <th>Uses <code>event.keyCode</code></th> |
| <th>Uses <code>event.which</code></th> |
| <th>High Contrast Documentation</th> |
| <th>Example Code ID</th> |
| <th>Roles in Javascript and HTML</th> |
| <th>Roles in Documentation</th> |
| <th>aria-* Attributes in Javascript and HTML</th> |
| <th>aria-* Attributes in Documentation</th> |
| <th>Differences between the documentation and the source code.</th> |
| </tr> |
| </thead> |
| <tbody id="example_coding_practices_tbody"> |
| </tbody> |
| </table> |
| |
| <h3 id="example_graphics_techniques">SVG and High Contrast Techniques</h3> |
| <table aria-labelledby="example_graphics_techniques" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Example</th> |
| <th>SVG in HTML</th> |
| <th>SVG in CSS</th> |
| <th>SVG in JS</th> |
| <th><code>forced-colors</code> media query</th> |
| <th><code>currentColor</code> value</th> |
| </tr> |
| </thead> |
| <tbody id="example_graphics_techniques_tbody"> |
| </tbody> |
| </table> |
| |
| <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3> |
| <table aria-labelledby="example_mouse_pointer" class="data attributes"> |
| <thead> |
| <tr> |
| <th>Example</th> |
| <th>Mouse Events</th> |
| <th>Pointer Events</th> |
| </tr> |
| </thead> |
| <tbody id="example_mouse_pointer_tbody"> |
| </tbody> |
| </table> |
| |
| </section> |
| |
| </main> |
| </body> |
| </html> |
