Visitar URL original
USWDS - File input: Fix issues with voice command by amyleadem · Pull Request #5213 · uswds/uswds · GitHub
Skip to content

USWDS - File input: Fix issues with voice command #5213

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 61 commits into from
May 26, 2023
Merged

USWDS - File input: Fix issues with voice command #5213

Changes from 1 commit
Commits
Show all changes
61 commits
Select commit Hold shift + click to select a range
1432fc1
Create status message element; add default message
Apr 3, 2023
24f7239
Update status message in handleChange
Apr 3, 2023
4fc3d8f
Find statusMessage from dropTarget
Apr 3, 2023
a8ea6f8
Add instruction text to input aria-label
Apr 3, 2023
2103bf7
Update sr-only-class
Apr 3, 2023
57c4e8c
On change, set input aria-label to match visible instruction text
Apr 3, 2023
81a8f82
Run prettier
Apr 3, 2023
c408be7
Add clarifying comments to buildFileInput; move lower const declarati…
Apr 4, 2023
973eda2
Small cleanup
Apr 4, 2023
dc2d66d
Add setTimeout to status element; add statusElement and statusMessage…
Apr 4, 2023
c978289
Add conditional to removeOldPreviews to prevent unit test error
Apr 4, 2023
b3aaf22
Add status message tests to unit test
Apr 4, 2023
7a4d917
Run prettier
Apr 4, 2023
f7fb830
Update comments
Apr 7, 2023
6423b25
Use aria-describedby
Apr 10, 2023
4f6ae5b
Create multiple inputs test story
Apr 10, 2023
1ab3096
Disconnect aria-describedby from status message; update comments
Apr 13, 2023
ecacad2
Add story demonstrating data attributes
Apr 13, 2023
10476b5
Set text with data attributes, if available
Apr 13, 2023
e02cd77
Update unit tests
Apr 13, 2023
8157249
Formatting
Apr 13, 2023
012e01b
Update data-default-status-message to data-default-status-text
Apr 14, 2023
a5c8196
Remove custom text data attributes. Will address in future issue
Apr 18, 2023
6eece6d
Update dragText to fix unit test
Apr 18, 2023
e3b5022
Move multiple inputs test into /test-patterns directory
May 4, 2023
a1a3d0a
Remove multiple_inputs arg from stories.js
May 4, 2023
9d5b577
Restore MultipleContent story (d'oh)
May 4, 2023
b71fcba
Restore MultipleContent story (d'oh)
May 4, 2023
a531b7b
Formatting and run prettier
May 4, 2023
7c35929
Create buildStatusMessage function
May 4, 2023
23fbe09
Add updateStatusMessage(), addPreviewHeading() ; clean up removeOldPr…
May 5, 2023
c69a964
Rename inputItems --> items
May 5, 2023
7e10ff5
Rename changeText --> changeItemText
May 5, 2023
b8f94c5
Rename inputAriaLabel --> defaultAriaLabelText
May 5, 2023
1e94264
Improve comments
amyleadem May 10, 2023
08cb947
Simplify 'items' text declaration
amyleadem May 10, 2023
bb8cc28
Replace 'items' with 'itemsLabel'
May 10, 2023
aaecb66
Clean up conditional that triggers addPreviewHeading
May 10, 2023
5c3a80c
Define strings at start of buildStatusMessage()
May 10, 2023
953b886
Reorganize buildFileInput and buildStatusMessage into granular functi…
May 10, 2023
7174273
Add clarity to JSDoc comments
May 10, 2023
866d335
Simplify params for addPreviewHeading and rename previewText -> previ…
May 10, 2023
5fd8441
Merge branch 'develop' of https://github.com/uswds/uswds into al-file…
May 10, 2023
5be98e4
Run prettier
May 10, 2023
ce96a82
Remove extra params from addPreviewHeading call
May 10, 2023
5b41437
Remove extra params from removeOldPreviews call
May 10, 2023
25fdb61
Add setItemsLabel() function to determine if plural should be used
May 10, 2023
056be44
Run prettier
May 10, 2023
7c6c21a
Merge develop; resolve merge conflicts in index.js and stories.js
May 17, 2023
f253f6a
Run prettier
May 17, 2023
0843926
Add check for disabled state before creating sr-only status
May 18, 2023
38cf451
Rename setItemsLabel --> getItemsLabel
May 22, 2023
ec606b8
Simplify comments for createVisibleInstructions
amyleadem May 22, 2023
e102337
Add box to dropTarget instead of the input parent
May 22, 2023
659d51a
Add DEFAULT_ARIA_LABEL_TEXT to remove need for data-default-aria-label
May 22, 2023
8e5dcf3
Merge branch 'al-file-input-vc' of https://github.com/uswds/uswds int…
May 22, 2023
af2a72b
Add DEFAULT_FILE_STATUS_TEXT to remove need for data-default-status-text
May 22, 2023
cd6ba70
Move disabled checks from createTargetArea to enhanceFileInput
May 22, 2023
4278f23
Remove HIDDEN_CLASS in favor of hidden attribute
May 22, 2023
8dbf2e1
Run prettier
May 22, 2023
bb7a9d6
Simplify check for disabled component
May 23, 2023
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
Add clarifying comments to buildFileInput; move lower const declarati… 
…ons to let at top of function
  • Loading branch information
Amy Leadem
Amy Leadem committed Apr 4, 2023
commit c408be7413e6fa335a8ddebfb6192265f9eece44
29 changes: 18 additions & 11 deletions packages/usa-file-input/src/index.js
View file
Open in desktop
Comment thread
amyleadem marked this conversation as resolved.
Resolved
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@ const buildFileInput = (fileInputEl) => {
const fileInputStatusEl = document.createElement("div");
const inputItems = "files";
let inputItem = "file";
let dragText = "";
let chooseText = "";
let instructionText = "";
let defaultStatus = "";

// Adds class names and other attributes
fileInputEl.classList.remove(DROPZONE_CLASS);
Expand All @@ -149,25 +153,28 @@ const buildFileInput = (fileInputEl) => {
}

// Create instruction text
// Identify if the plural should be used
if (acceptsMultiple) {
inputItem = inputItems;
}

const dragText = `Drag ${inputItem} here or `;
const chooseText = "choose from folder";
const defaultStatus = `No ${inputItem} selected.`;
const instructionText = `${dragText}${chooseText}`;

// Create text content
// Construct instruction text
// TODO: allow user to customize text via a data attribute
dragText = `Drag ${inputItem} here or `;
chooseText = "choose from folder";
instructionText = `${dragText}${chooseText}`;
// Add instruction text to input element
fileInputEl.setAttribute("aria-label", instructionText);
fileInputEl.setAttribute("data-default-aria-label", instructionText);
instructions.innerHTML = Sanitizer.escapeHTML`<span class="${DRAG_TEXT_CLASS}">${dragText}</span><span class="${CHOOSE_CLASS}">${chooseText}</span>`;

// Create status message element
// Create status message
// Build sr-only status element
fileInputStatusEl.classList.add(SR_ONLY_CLASS);
fileInputStatusEl.setAttribute("aria-live", "polite");
// Construct default status text
defaultStatus = `No ${inputItem} selected.`;
// Add default status text to status element
fileInputStatusEl.setAttribute("data-default-status-message", defaultStatus);
// Set default status message
fileInputStatusEl.textContent = defaultStatus;
fileInputParent.appendChild(fileInputStatusEl);

Expand Down Expand Up @@ -253,7 +260,7 @@ const handleChange = (e, fileInputEl, instructions, dropTarget) => {
removeOldPreviews(dropTarget, instructions, statusMessage);

// Then, iterate through files list and:
// 1. Add selected file list names to aria-label
// 1. Add selected file list names to status message
// 2. Create previews
for (let i = 0; i < fileNames.length; i += 1) {
const reader = new FileReader();
Expand All @@ -262,7 +269,7 @@ const handleChange = (e, fileInputEl, instructions, dropTarget) => {
// Push updated file names into the store array
fileStore.push(fileName);

// read out the store array via aria-label, wording options vary based on file count
// read out the store array, wording options vary based on file count
if (i === 0) {
statusElement.textContent = `You have selected the file: ${fileName}`;
} else if (i >= 1) {
Expand Down