Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added 2.1 & 2.2 switcher to audit tool #372

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added 2.1 & 2.2 switcher to audit tool #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/auditTool/index.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions public/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3313,11 +3313,11 @@ ul:not([class]) > li::marker {
display: none;
}

[data-tool="21"] [data-hide-21] {
[data-tool="21"] [data-hide="21"] {
display: none;
}

[data-tool="22"] [data-hide-22] {
[data-tool="22"] [data-hide="22"] {
display: none;
}

Expand Down
68 changes: 46 additions & 22 deletions public/js/auditTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ counterBtn.forEach(btn => {
document.querySelectorAll('.sc-table__radio').forEach(radio => {
radio.addEventListener('change', (evt) => {
radio.closest('.sc-table__group').setAttribute('aria-invalid', 'false');
const closestRow = evt.target.closest('tr')
const closestRow = evt.target.closest('tr:not([data-ignore])')

if (evt.target.value == 'partially-supports' || evt.target.value == 'does-not-support') {
closestRow.querySelector('.sc-table__result').setAttribute('data-pass', 'false');
Expand Down Expand Up @@ -88,7 +88,7 @@ const getFailedSCTotal = (totalSCsFailed) => {
}

modalTrigger.addEventListener('click', () => {
const errCount = document.querySelectorAll('tr[data-invalid]');
const errCount = document.querySelectorAll('tr[data-invalid]:not([data-ignore])');
errCount.forEach(row => {
if (row.querySelector('.sc-table__group').getAttribute('aria-invalid') == 'true') {
const errMsg = row.querySelector('[data-radio-cell] .sc-table__err-msg');
Expand All @@ -99,7 +99,7 @@ modalTrigger.addEventListener('click', () => {

if (!!errCount.length) {
document.querySelector('.page__announcement').textContent = `${errCount.length} row${errCount.length > 1 ? 's have' : ' has'} not been completed`;
document.querySelector('tr[data-invalid] .sc-table__link').focus();
document.querySelector('tr[data-invalid]:not([data-ignore]) .sc-table__link').focus();

setTimeout(() => {
document.querySelector('.page__announcement').textContent = ``;
Expand Down Expand Up @@ -148,7 +148,7 @@ const generateStatementAndVPAT = () => {
let vpatTableA = `<table role="presentation">`
let vpatTableAA = `<table role="presentation">`

document.querySelectorAll('.sc-table__requirement').forEach((row, idx, array) => {
document.querySelectorAll('.sc-table__requirement:not([data-ignore])').forEach((row, idx, array) => {
let issueText = row.querySelector('.sc-table__comment').value;
const vpatSupport = row.getAttribute('data-support');
if (row.querySelector('.sc-table__result[data-pass="false"]')) {
Expand Down Expand Up @@ -249,22 +249,46 @@ const closeModal = () => {

const wcagToggleBtn = document.querySelectorAll('.wcag-toggle__btn');
document.body.setAttribute('data-tool', '22');
const SCRows = document.querySelectorAll('.sc-table__requirement');

// wcagToggleBtn.forEach((btn) => {
// btn.addEventListener('click', (evt) => {
// if (evt.target.getAttribute('aria-pressed') == 'false') {
// const notPressed = evt.target.closest('fieldset').querySelector('[aria-pressed="false"]');
// const pressed = evt.target.closest('fieldset').querySelector('[aria-pressed="true"]');
// pressed.setAttribute('aria-pressed', 'false');
// notPressed.setAttribute('aria-pressed', 'true');

// if (evt.target.id == 'wcag21') {
// document.body.setAttribute('data-tool', '21');
// document.querySelector('.sc-table__caption').innerText = 'WCAG 2.1 conformance details';
// } else {
// document.body.setAttribute('data-tool', '22');
// document.querySelector('.sc-table__caption').innerText = 'WCAG 2.2 conformance details';
// }
// }
// })
// })
wcagToggleBtn.forEach((btn) => {
btn.addEventListener('click', (evt) => {
if (evt.target.getAttribute('aria-pressed') == 'false') {
const notPressed = evt.target.closest('fieldset').querySelector('[aria-pressed="false"]');
const pressed = evt.target.closest('fieldset').querySelector('[aria-pressed="true"]');
pressed.setAttribute('aria-pressed', 'false');
notPressed.setAttribute('aria-pressed', 'true');

if (evt.target.id == 'wcag21') {
document.body.setAttribute('data-tool', '21');
document.querySelector('.sc-table__caption').innerText = 'WCAG 2.1 conformance details';
ignoreRows('21');
} else {
document.body.setAttribute('data-tool', '22');
document.querySelector('.sc-table__caption').innerText = 'WCAG 2.2 conformance details';
ignoreRows('22');
}
updateUrl();
}
})
})

const ignoreRows = (level) => {
SCRows.forEach(row => {
row.getAttribute('data-hide') == level ? row.setAttribute('data-ignore', '') : row.removeAttribute('data-ignore');

})
}
ignoreRows('22');

const updateUrl = () => {
SCRows.forEach(row => {
let ReqLink = row.querySelector('a');
if (ReqLink.getAttribute('href').includes('WCAG22')) {
var updatedLink = ReqLink.getAttribute('href').replace('WCAG22', 'WCAG21');
} else if (ReqLink.getAttribute('href').includes('WCAG21')) {
var updatedLink = ReqLink.getAttribute('href').replace('WCAG21', 'WCAG22')
}
ReqLink.setAttribute('href', updatedLink);
})
}
77 changes: 38 additions & 39 deletions src/auditTool.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,11 +127,11 @@ extraWide: true
</table>
</div>

<!-- <fieldset class="wcag-toggle__fieldset">
<fieldset class="wcag-toggle__fieldset">
<legend class="wcag-toggle__legend">WCAG version</legend>
<button class="wcag-toggle__btn" id="wcag22" aria-pressed="true">WCAG 2.2 <span>&#10003;</span></button>
<button class="wcag-toggle__btn" id="wcag21" aria-pressed="false">WCAG 2.1 <span>&#10003;</span></button>
</fieldset> -->
</fieldset>

<div class="sc-table__wrapper">
<table class="sc-table">
Expand All @@ -146,44 +146,42 @@ extraWide: true
</thead>
<tbody>
{%- for item in reportToolSCData %}
{% if item.hide != '22' %}
<tr class="sc-table__requirement" data-level="{{ item.level }}" data-invalid {% if item.hide %}data-hide-{{item.hide}}{% endif %}>
{% set scNum = item.fullText.split(' ') %}
<th scope="row">
<a id="wcag{{ item.identifier }}Link" class="sc-table__link" href="{{ item.url }}" target="_blank" rel="noreferrer noopener" aria-describedby="newTabInstruction">{{ scNum[0] }} <span id="wcag{{ item.identifier }}ShortText">{{ item.shortText }}</span> ({{ item.level | uppercase }}) {% include './svg/newTab.svg' %}</a>
</th>
<td data-radio-cell>
<span id="wcag{{ item.identifier }}GroupErrMsg" class="sc-table__err-msg" aria-hidden="true">Required option</span>
<div role="radiogroup" aria-required="true" aria-invalid="true" class="sc-table__group" aria-labelledby="confCol">
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}Sup" name="sc{{ item.identifier }}" value="supports" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}SupLabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}SupLabel" for="wcag{{ item.identifier }}Sup" class="sc-table__label">Supports</label>
</div>
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}Par" name="sc{{ item.identifier }}" value="partially-supports" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}ParLabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}ParLabel" for="wcag{{ item.identifier }}Par" class="sc-table__label">Partially supports</label>
</div>
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}Not" name="sc{{ item.identifier }}" value="does-not-support" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}NotLabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}NotLabel" for="wcag{{ item.identifier }}Not" class="sc-table__label">Does not support</label>
</div>
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}NA" name="sc{{ item.identifier }}" value="not-applicable" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}NALabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}NALabel" for="wcag{{ item.identifier }}NA" class="sc-table__label">Not applicable</label>
</div>
<tr class="sc-table__requirement" data-level="{{ item.level }}" data-invalid {% if item.hide %}data-hide="{{item.hide}}"{% endif %}>
{% set scNum = item.fullText.split(' ') %}
<th scope="row">
<a id="wcag{{ item.identifier }}Link" class="sc-table__link" href="{{ item.url }}" target="_blank" rel="noreferrer noopener" aria-describedby="newTabInstruction">{{ scNum[0] }} <span id="wcag{{ item.identifier }}ShortText">{{ item.shortText }}</span> ({{ item.level | uppercase }}) {% include './svg/newTab.svg' %}</a>
</th>
<td data-radio-cell>
<span id="wcag{{ item.identifier }}GroupErrMsg" class="sc-table__err-msg" aria-hidden="true">Required option</span>
<div role="radiogroup" aria-required="true" aria-invalid="true" class="sc-table__group" aria-labelledby="confCol">
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}Sup" name="sc{{ item.identifier }}" value="supports" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}SupLabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}SupLabel" for="wcag{{ item.identifier }}Sup" class="sc-table__label">Supports</label>
</div>
</td>
<td>
<div class="sc-table__comment-wrapper" data-valid="true">
<span id="wcag{{ item.identifier }}CommentErrMsg" class="sc-table__err-msg" aria-hidden="true">Issue details required</span>
<textarea name="{{ item.identifier }}Com" id="wcag{{ item.identifier }}Com" class="sc-table__comment" cols="30" rows="10" aria-labelledby="wcag{{ item.identifier }}ShortText comCol" autocomplete="off"></textarea>
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}Par" name="sc{{ item.identifier }}" value="partially-supports" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}ParLabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}ParLabel" for="wcag{{ item.identifier }}Par" class="sc-table__label">Partially supports</label>
</div>
</td>
<td>
<span class="sc-table__result" data-pass="clean">--</span>
</td>
</tr>
{% endif %}
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}Not" name="sc{{ item.identifier }}" value="does-not-support" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}NotLabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}NotLabel" for="wcag{{ item.identifier }}Not" class="sc-table__label">Does not support</label>
</div>
<div class="sc-table__radio-wrapper">
<input type="radio" id="wcag{{ item.identifier }}NA" name="sc{{ item.identifier }}" value="not-applicable" class="sc-table__radio" aria-labelledby="wcag{{ item.identifier }}NALabel wcag{{ item.identifier }}ShortText">
<label id="wcag{{ item.identifier }}NALabel" for="wcag{{ item.identifier }}NA" class="sc-table__label">Not applicable</label>
</div>
</div>
</td>
<td>
<div class="sc-table__comment-wrapper" data-valid="true">
<span id="wcag{{ item.identifier }}CommentErrMsg" class="sc-table__err-msg" aria-hidden="true">Issue details required</span>
<textarea name="{{ item.identifier }}Com" id="wcag{{ item.identifier }}Com" class="sc-table__comment" cols="30" rows="10" aria-labelledby="wcag{{ item.identifier }}ShortText comCol" autocomplete="off"></textarea>
</div>
</td>
<td>
<span class="sc-table__result" data-pass="clean">--</span>
</td>
</tr>
{% endfor %}
<tr>
<th scope="row" colspan="3">Total WCAG success criteria failed</th>
Expand All @@ -197,4 +195,5 @@ extraWide: true
<!-- <button class="control-btn control-btn--clear">Reset all</button> -->
<a class="control__btn control__btn--clear" href="javascript:history.go(0)">Reset all</a>
<button class="control__btn control__btn--generate">Generate text</button>
</div>
</div>

68 changes: 46 additions & 22 deletions src/js/auditTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ counterBtn.forEach(btn => {
document.querySelectorAll('.sc-table__radio').forEach(radio => {
radio.addEventListener('change', (evt) => {
radio.closest('.sc-table__group').setAttribute('aria-invalid', 'false');
const closestRow = evt.target.closest('tr')
const closestRow = evt.target.closest('tr:not([data-ignore])')

if (evt.target.value == 'partially-supports' || evt.target.value == 'does-not-support') {
closestRow.querySelector('.sc-table__result').setAttribute('data-pass', 'false');
Expand Down Expand Up @@ -88,7 +88,7 @@ const getFailedSCTotal = (totalSCsFailed) => {
}

modalTrigger.addEventListener('click', () => {
const errCount = document.querySelectorAll('tr[data-invalid]');
const errCount = document.querySelectorAll('tr[data-invalid]:not([data-ignore])');
errCount.forEach(row => {
if (row.querySelector('.sc-table__group').getAttribute('aria-invalid') == 'true') {
const errMsg = row.querySelector('[data-radio-cell] .sc-table__err-msg');
Expand All @@ -99,7 +99,7 @@ modalTrigger.addEventListener('click', () => {

if (!!errCount.length) {
document.querySelector('.page__announcement').textContent = `${errCount.length} row${errCount.length > 1 ? 's have' : ' has'} not been completed`;
document.querySelector('tr[data-invalid] .sc-table__link').focus();
document.querySelector('tr[data-invalid]:not([data-ignore]) .sc-table__link').focus();

setTimeout(() => {
document.querySelector('.page__announcement').textContent = ``;
Expand Down Expand Up @@ -148,7 +148,7 @@ const generateStatementAndVPAT = () => {
let vpatTableA = `<table role="presentation">`
let vpatTableAA = `<table role="presentation">`

document.querySelectorAll('.sc-table__requirement').forEach((row, idx, array) => {
document.querySelectorAll('.sc-table__requirement:not([data-ignore])').forEach((row, idx, array) => {
let issueText = row.querySelector('.sc-table__comment').value;
const vpatSupport = row.getAttribute('data-support');
if (row.querySelector('.sc-table__result[data-pass="false"]')) {
Expand Down Expand Up @@ -249,22 +249,46 @@ const closeModal = () => {

const wcagToggleBtn = document.querySelectorAll('.wcag-toggle__btn');
document.body.setAttribute('data-tool', '22');
const SCRows = document.querySelectorAll('.sc-table__requirement');

// wcagToggleBtn.forEach((btn) => {
// btn.addEventListener('click', (evt) => {
// if (evt.target.getAttribute('aria-pressed') == 'false') {
// const notPressed = evt.target.closest('fieldset').querySelector('[aria-pressed="false"]');
// const pressed = evt.target.closest('fieldset').querySelector('[aria-pressed="true"]');
// pressed.setAttribute('aria-pressed', 'false');
// notPressed.setAttribute('aria-pressed', 'true');

// if (evt.target.id == 'wcag21') {
// document.body.setAttribute('data-tool', '21');
// document.querySelector('.sc-table__caption').innerText = 'WCAG 2.1 conformance details';
// } else {
// document.body.setAttribute('data-tool', '22');
// document.querySelector('.sc-table__caption').innerText = 'WCAG 2.2 conformance details';
// }
// }
// })
// })
wcagToggleBtn.forEach((btn) => {
btn.addEventListener('click', (evt) => {
if (evt.target.getAttribute('aria-pressed') == 'false') {
const notPressed = evt.target.closest('fieldset').querySelector('[aria-pressed="false"]');
const pressed = evt.target.closest('fieldset').querySelector('[aria-pressed="true"]');
pressed.setAttribute('aria-pressed', 'false');
notPressed.setAttribute('aria-pressed', 'true');

if (evt.target.id == 'wcag21') {
document.body.setAttribute('data-tool', '21');
document.querySelector('.sc-table__caption').innerText = 'WCAG 2.1 conformance details';
ignoreRows('21');
} else {
document.body.setAttribute('data-tool', '22');
document.querySelector('.sc-table__caption').innerText = 'WCAG 2.2 conformance details';
ignoreRows('22');
}
updateUrl();
}
})
})

const ignoreRows = (level) => {
SCRows.forEach(row => {
row.getAttribute('data-hide') == level ? row.setAttribute('data-ignore', '') : row.removeAttribute('data-ignore');

})
}
ignoreRows('22');

const updateUrl = () => {
SCRows.forEach(row => {
let ReqLink = row.querySelector('a');
if (ReqLink.getAttribute('href').includes('WCAG22')) {
var updatedLink = ReqLink.getAttribute('href').replace('WCAG22', 'WCAG21');
} else if (ReqLink.getAttribute('href').includes('WCAG21')) {
var updatedLink = ReqLink.getAttribute('href').replace('WCAG21', 'WCAG22')
}
ReqLink.setAttribute('href', updatedLink);
})
}
4 changes: 2 additions & 2 deletions src/sass/pages/_auditTool.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -763,13 +763,13 @@
}
}

[data-hide-21] {
[data-hide="21"] {
[data-tool="21"] & {
display: none;
}
}

[data-hide-22] {
[data-hide="22"] {
[data-tool="22"] & {
display: none;
}
Expand Down