Skip to content

Commit

Permalink
Improv/report remove passed item button (#276)
Browse files Browse the repository at this point in the history 
* Remove Passed items as button category in report

* Move scanItems to the <head>

* Add missing brackets (0 issues)

* Remove outdated comments and add code formatting

* Add Scan Stats for failed and passed occurrences
  • Loading branch information
@younglim
younglim authored Feb 7, 2024
1 parent bea2bfb commit d4fada5
Show file tree
Hide file tree
Showing 9 changed files with 234 additions and 149 deletions.
108 changes: 59 additions & 49 deletions static/ejs/partials/components/categorySelector.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,63 @@
passed: "Passed"
} %>

<button
aria-labelledby="<%= category %>Title <%= category %>ItemsInformation"
aria-describedby="<%= category %>AriaDescription"
id="<%= category %>Selector"
class="h-100 category-selector <%= category %>"
onclick="changeSelectedCategory(event, '<%= category %>')"
onfocus="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseover'))"
onblur="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseout'))"
onmousedown="event.preventDefault()"
>
<div class="d-flex align-items-center mb-3">
<span id="<%= category %>Title" class="d-flex align-items-center category-name fw-bold d-inline mb-0">
<%= formattedCategoryTitles[category] %>
</span>
<svg
tabindex="-1"
id="<%= category %>Description"
class="ms-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="<%= items[category].description %>"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(.clip0_1630_1670)">
<path
d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
fill="#B5C5CA"
/>
</g>
<defs>
<clipPath class="clip0_1630_1670">
<rect width="14" height="14" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<span id="<%= category %>ItemsInformation" class="category-information">
<% if (category !== 'passed' && items[category].totalItems !== 0) { %>
<%= items[category].rules.length %> issues / <%= items[category].totalItems %> occurrences
<% } else if (category !== 'passed' && items[category].totalItems === 0) { %>
0 issues
<% } else { %>
<%= items[category].totalItems %> occurrences
<nav class="d-none d-md-flex row m-0 pt-3 px-2" aria-label="Issue category">
<% Object.keys(items).forEach((category) => { %>
<% if (category !== 'passed') { %>
<div class="col-md-4 px-2">
<button
aria-labelledby="<%= category %>Title <%= category %>ItemsInformation"
aria-describedby="<%= category %>AriaDescription"
id="<%= category %>Selector"
class="h-100 category-selector <%= category %>"
onclick="changeSelectedCategory(event, '<%= category %>')"
onfocus="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseover'))"
onblur="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseout'))"
onmousedown="event.preventDefault()"
>
<div class="d-flex align-items-center mb-3">
<span id="<%= category %>Title" class="d-flex align-items-center category-name fw-bold d-inline mb-0">
<%= formattedCategoryTitles[category] %>
</span>
<svg
tabindex="-1"
id="<%= category %>Description"
class="ms-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="<%= items[category].description %>"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(.clip0_1630_1670)">
<path
d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
fill="#B5C5CA"
/>
</g>
<defs>
<clipPath class="clip0_1630_1670">
<rect width="14" height="14" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<span id="<%= category %>ItemsInformation" class="category-information">
<% if (category !== 'passed' && items[category].totalItems !== 0) { %>
<%= items[category].rules.length %> issues / <%= items[category].totalItems %> occurrences
<% } else if (category !== 'passed' && items[category].totalItems === 0) { %>
0 issues
<% } else { %>
<%= items[category].totalItems %> occurrences
<% } %>
</span>
</button>
</div>
<% } %>
</span>
</button>
<% }) %>
</nav>


86 changes: 67 additions & 19 deletions static/ejs/partials/components/categorySelectorDropdown.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,70 @@
passed: "Passed"
} %>

<li
aria-labelledby="<%= category %>Title <%= category %>ItemsInformation"
aria-describedby="<%= category %>AriaDescription"
id="<%= category %>DropdownSelector"
class="<%= category %>"
role="option"
> <span id="<%= category %>Title" class="align-items-center category-name fw-bold d-inline mb-0">
<%= formattedCategoryTitles[category] %>
</span>
<span id="<%= category %>ItemsInformation" class="px-2 category-information">
<% if (category !== 'passed' && items[category].totalItems !== 0) { %>
(<%= items[category].rules.length %> issues)
<% } else if (category !== 'passed' && items[category].totalItems === 0) { %>
0 issues
<% } else { %>
(<%= items[category].totalItems %> occurrences)
<% } %>
</span>
</li>
<div class="d-md-none d-flex mt-4 mx-2 px-2 position-relative ally-button-container" aria-label="Issue category">
<label class="visually-hidden" for="select">Accessible Dropdown</label>
<button
class="ally-toggle-button"
role="combobox"
id="select"
value="Select"
aria-controls="listbox"
aria-haspopup="listbox"
tabindex="0"
aria-expanded="false"
>Accessible Dropdown</button>
<div>
<svg
tabindex="-1"
id="categorySelectorDropdownToolipDescription"
class="h-100 ms-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Choose a category from the dropdown"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(.clip0_1630_1670)">
<path
d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
fill="#B5C5CA"
/>
</g>
<defs>
<clipPath class="clip0_1630_1670">
<rect width="14" height="14" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<!-- Screen Reader Announcer -->
<div class="visually-hidden" id="announcement" aria-live="assertive" role="alert"></div>
<ul role="listbox" id="listbox">
<% Object.keys(items).forEach((category) => { %>
<% if (category !== 'passed') { %>
<li
aria-labelledby="<%= category %>Title <%= category %>ItemsInformation"
aria-describedby="<%= category %>AriaDescription"
id="<%= category %>DropdownSelector"
class="<%= category %>"
role="option"
> <span id="<%= category %>Title" class="align-items-center category-name fw-bold d-inline mb-0">
<%= formattedCategoryTitles[category] %>
</span>
<span id="<%= category %>ItemsInformation" class="px-2 category-information">
<% if (category !== 'passed' && items[category].totalItems !== 0) { %>
(<%= items[category].rules.length %> issues)
<% } else if (category !== 'passed' && items[category].totalItems === 0) { %>
(0 issues)
<% } else { %>
(<%= items[category].totalItems %> occurrences)
<% } %>
</span>
</li>
<% } %>
<% }) %>
</ul>
</div>
76 changes: 76 additions & 0 deletions static/ejs/partials/components/scanAbout.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,82 @@
<% } %>
</button>
</li>
<li>
<svg
aria-label="Scan Statistics"
width="17"
height="18"
viewBox="0 0 17 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1630_1547)">
<path
d="M14.0299 1.09229H2.97102C2.59546 1.09229 2.29102 1.39673 2.29102 1.77228V16.231C2.29102 16.6065 2.59546 16.911 2.97102 16.911H14.0299C14.4054 16.911 14.7099 16.6065 14.7099 16.231V1.77228C14.7099 1.39673 14.4054 1.09229 14.0299 1.09229Z"
stroke="#CED4DA"
stroke-width="1.7369"
/>
<path
d="M5.03369 4.92139H11.9663"
stroke="#CED4DA"
stroke-width="1.189"
stroke-linecap="round"
/>
<path
d="M5.03369 7.64136H11.9663"
stroke="#CED4DA"
stroke-width="1.189"
stroke-linecap="round"
/>
<path
d="M5.03369 10.3613H11.9663"
stroke="#CED4DA"
stroke-width="1.189"
stroke-linecap="round"
/>
<path
d="M5.03369 13.0813H11.9663"
stroke="#CED4DA"
stroke-width="1.189"
stroke-linecap="round"
/>
</g>
<defs>
<clipPath id="clip0_1630_1547">
<rect width="17" height="17" fill="white" transform="translate(0 0.501465)" />
</clipPath>
</defs>
</svg>
<span>
<%= items.mustFix.totalItems + items.goodToFix.totalItems %> occurrences failed,<br>
<%= items.passed.totalItems %> occurences passed
<svg
tabindex="-1"
id="passedItemsTooltip"
class="ms-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="You may find the list of passed HTML elements in ./passed_items.json.txt"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(.clip0_1630_1670)">
<path
d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
fill="#B5C5CA"
/>
</g>
<defs>
<clipPath class="clip0_1630_1670">
<rect width="14" height="14" fill="white" />
</clipPath>
</defs>
</svg>
</span>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" fill="none">
<mask id="mask0_459_43" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1001" height="1001">
Expand Down
70 changes: 7 additions & 63 deletions static/ejs/partials/main.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,65 +16,11 @@
<div id= "searchGroup" class="row m-0 px-3">
<%- include("components/reportSearch") %>
</div>
<!-- Button Category Selector -->
<nav class="d-none d-md-flex row m-0 pt-3 px-2" aria-label="Issue category">
<% Object.keys(items).forEach((category) => { %>
<div class="col-md-4 px-2">
<%- include("components/categorySelector", { category: category }) %>
</div>
<% }) %>
</nav>
<!-- Button Category Selector -->
<%- include("components/categorySelector") %>

<!-- Dropdown Category Selector -->
<div class="d-md-none d-flex mt-4 mx-2 px-2 position-relative ally-button-container" aria-label="Issue category">
<label class="visually-hidden" for="select">Accessible Dropdown</label>
<button
class="ally-toggle-button"
role="combobox"
id="select"
value="Select"
aria-controls="listbox"
aria-haspopup="listbox"
tabindex="0"
aria-expanded="false"
>Accessible Dropdown</button>
<div>
<!-- [TESTCODE] SVG placeholder-->
<!-- FIX: This needs to be dynamic, the id description has to match the selected category -->
<svg
tabindex="-1"
id="passedDescription"
class="h-100 ms-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Occurrences that passed the automated checks."
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(.clip0_1630_1670)">
<path
d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
fill="#B5C5CA"
/>
</g>
<defs>
<clipPath class="clip0_1630_1670">
<rect width="14" height="14" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<!-- Screen Reader Announcer -->
<div class="visually-hidden" id="announcement" aria-live="assertive" role="alert"></div>
<ul role="listbox" id="listbox">
<!-- categorySelectorDropdown.ejs is rendered here -->
<% Object.keys(items).forEach((category) => { %>
<%- include("components/categorySelectorDropdown", { category: category }) %>
<% }) %>
</ul>
</div>
<%- include("components/categorySelectorDropdown") %>
<ul id="categorySummary" class="unbulleted-list px-3 py-4 mb-3 flex-grow-1">
<!-- dynamically generated section from scripts/categorySummary -->
<%# dynamically generated section from scripts/categorySummary %>
Expand All @@ -84,15 +30,13 @@
Tooltip: Contains AI suggestions.
</p>
<p id="mustFixAriaDescription" class="d-none">
Tooltip: Issues that need to be addressed promptly, as they create significant barriers for
persons with disabilities and can prevent them from accessing essential content or features.
Tooltip: <%= items.mustFix.description %>
</p>
<p id="goodToFixAriaDescription" class="d-none">
Tooltip: Issues that could pose certain challenges for persons with disabilities (PWDs), but
are unlikely to completely hinder their access to essential content or features.
Tooltip: <%= items.goodToFix.description %>
</p>
<p id="passedAriaDescription" class="d-none">
Tooltip: Occurrences that passed the automated checks.
Tooltip: <%= items.passed.description %>
</p>
</section>
</main>
Expand Down
Loading

0 comments on commit d4fada5

Please sign in to comment.