Visitar URL original
USWDS - Bug: Fix invalid aria role in validator list items by amyleadem · Pull Request #4914 · uswds/uswds · GitHub
Skip to content

USWDS - Bug: Fix invalid aria role in validator list items #4914

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

Merged
thisisdano merged 31 commits into from
Oct 11, 2022
Merged

USWDS - Bug: Fix invalid aria role in validator list items #4914

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
0684b17
Pull in changes from cm-validation-a11y
Aug 8, 2022
f077275
Remove aria-checked attribute
Aug 8, 2022
0a19319
Add tabindex to usa-checklist
Aug 8, 2022
14f06bc
Remove tabindex from template
Aug 11, 2022
29c2b61
Add tabindex to validation list items
Aug 11, 2022
07ad7de
Add aria-label to input element
Sep 20, 2022
8b0bff8
Change span to i
Sep 20, 2022
abc6fb4
Remove comma
Sep 20, 2022
45cdf3d
Add aria label on init
Sep 21, 2022
511d666
Clean up code
Sep 21, 2022
6e89868
Change innerText to textContent
Sep 21, 2022
2a56879
Replace generated span with aria-label
Sep 22, 2022
8be3392
Create container for status summary; add status updates
Sep 26, 2022
34c5be9
Replace 'item' with 'input'
Sep 26, 2022
eeb2e18
Create data-validation-complete and data-validation-incomplete
Sep 26, 2022
7b53b94
Create enhanceValidation function
Sep 27, 2022
c284450
Rename data-checklist-label to data-validation-status
Sep 27, 2022
36a1de6
Update package-lock
Oct 5, 2022
393d235
Add unique id to summary element
Oct 5, 2022
fb807ba
Rename change to handleChange
Oct 5, 2022
73b954f
Remove input aria-describedby from twig
Oct 5, 2022
a57aff1
Move selectOrMatches to init
Oct 5, 2022
853fb7d
Separate functions into createStatusElement and createInitialStatus
Oct 6, 2022
9162036
Add debounce
Oct 6, 2022
aa38ecb
Update handleChange
Oct 6, 2022
545a7d9
Pull in develop
Oct 6, 2022
ab76749
Update statusSummaryID
Oct 6, 2022
aea87ce
Simplify statusComplete and statusIncomplete data check
Oct 7, 2022
bfbfd52
Add readability with srUpdateStatus()
Oct 7, 2022
e41d2fe
Consolidate handleChange function
Oct 9, 2022
ef0c9db
Run prettier
Oct 9, 2022
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
Prev Previous commit
Next Next commit
Replace generated span with aria-label
  • Loading branch information
Amy Leadem
Amy Leadem committed Sep 22, 2022
commit 2a56879eec541950a4828035d6e9ba627eeef060
17 changes: 3 additions & 14 deletions packages/usa-validation/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,12 @@ const { prefix: PREFIX } = require("../../uswds-core/src/js/config");
const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches");

const VALIDATE_INPUT = "input[data-validation-element]";
const CHECKLIST = `.${PREFIX}-checklist`;
const CHECKLIST_ITEM = `.${PREFIX}-checklist__item`;

function change() {
validate(this);
}

function createHiddenLabel() {
const hiddenLabel = document.createElement("i");

hiddenLabel.classList.add("usa-sr-only");
hiddenLabel.textContent = " status incomplete. ";
hiddenLabel.setAttribute("data-checklist-label", "");

return hiddenLabel;
}

const validator = behavior(
{
"input change": {
Expand All @@ -40,10 +29,10 @@ const validator = behavior(

let inputLabel = "";
Comment thread
amyleadem marked this conversation as resolved.
Resolved
checklistItems.forEach((listItem) => {
const newSpan = createHiddenLabel();
listItem.appendChild(newSpan);
const itemStatus = `${listItem.textContent} status incomplete`;
Comment thread
amyleadem marked this conversation as resolved.
Resolved
listItem.setAttribute("tabindex", "0");
inputLabel += listItem.textContent;
listItem.setAttribute("aria-label", itemStatus);
inputLabel += `${itemStatus}. `;
});

item.setAttribute("aria-label", inputLabel);
Comment thread
amyleadem marked this conversation as resolved.
Resolved
Expand Down
19 changes: 8 additions & 11 deletions packages/uswds-core/src/js/utils/validate-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ module.exports = function validate(el) {
const validatorPattern = new RegExp(value);
const validatorSelector = `[data-validator="${validatorName}"]`;
const validatorCheckbox = checkList.querySelector(validatorSelector);
const hiddenCheckboxSpan = validatorCheckbox.querySelector(
`[data-checklist-label]`
);

if (!validatorCheckbox) {
throw new Error(`No validator checkbox found for: "${validatorName}"`);
Expand All @@ -32,15 +29,15 @@ module.exports = function validate(el) {
const checked = validatorPattern.test(el.value);
validatorCheckbox.classList.toggle(CHECKED_CLASS, checked);

hiddenCheckboxSpan.textContent = validatorCheckbox.classList.contains(
CHECKED_CLASS
)
? " status complete. "
: " status incomplete. ";
let validatorStatus = `${validatorCheckbox.textContent} status `;
if(validatorCheckbox.classList.contains(CHECKED_CLASS)){
validatorStatus += "complete";
} else{
validatorStatus += "incomplete";
};

// gather text content from checklist items into one element for aria-label
inputLabel += validatorCheckbox.textContent;
// apply new aria-label content to input element
validatorCheckbox.setAttribute("aria-label", validatorStatus);
inputLabel += `${validatorStatus}. `;
el.setAttribute("aria-label", inputLabel);
}
});
Expand Down