search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
36 stars 55 forks source link

USWDS - File Input - Design #1499

Closed caw310 closed 6 months ago

caw310 commented 1 year ago

Description

We need to incorporate the designs for the USWDS File Input into the VA Sketch library. The version of this component with the different features from USWDS may need to live side-by-side with our component in the Sketch library for a time.

There may be some differences between the USWDS version and ours, so you'll want to do a small audit first to determine what those are. It would be helpful to present that audit to the team so everyone is aware. There may need to be some discussion about features we want to keep from USWDS and features we do not.

Details

USWDS File input component VA DS File input component

Tasks

Acceptance Criteria

GnatalieH commented 1 year ago

@humancompanion-usds are we inheriting the drag and drop functionality of the USWDS File input? It's not a mobile-friendly interaction, FWIW. Although I don't know how many folks are attempting to do file uploads via their phone.

GnatalieH commented 1 year ago

@humancompanion-usds here is the Sketch artboard ready for your review. I created symbols for the states that the VA File input component has.

humancompanion-usds commented 1 year ago

Sorry, I just went and reviewed the design of the USWDS component. You can still click or select the link within the input and get the functionality we have today. We need a11y to review this. Let's setup a discussion with Brian.

GnatalieH commented 1 year ago

Oh, so the design might change to not include a button, @humancompanion-usds? I'll be on PTO Thursday and Friday of this week, so tagging @briandeconinck on this ticket so we can track the conversation here for now. I'm assuming this may not be a kosher way to use a link, we'll find out what Brian says.

briandeconinck commented 1 year ago

@GnatalieH is correct, I'm not a fan of the link! 😄

The USWDS component doesn't actually have a link, either -- it's faking it with a styled span to hint at where users should click, but what you're actually clicking on is the file upload input which overlaps with the span. That input has an aria-label of "No file selected" which is not visible text anywhere on screen.

For screen reader users, the visible text is wrapped in an aria-hidden and won't be announced. The only thing you hear is "Input, No file selected." Debatable whether that's enough context to understand the interaction, but I'd say probably not.

For voice command users, the visible text doesn't do anything and isn't associated with the input, so "Click choose from folder" won't work. Next option would be to say "Click link" and select from the link prompts -- but since it's not actually a link, that won't work either. Saying "Click No file selected" works, but it seems unlikely a user will be able to guess those magic words.

Demonstration with Dragon:

https://user-images.githubusercontent.com/6844775/223518739-84b4b68e-3312-4669-a8b5-d58a3f0f60e6.mp4

GnatalieH commented 1 year ago

@humancompanion-usds I had to put this ticket back in progress because some of the button symbols got messed up in Sketch. I'll finish it when I return from PTO, thanks.

GnatalieH commented 1 year ago

@humancompanion-usds here is the updated Sketch artboard, ready for your review. I am going back to the Button design for this based on Brian's comment.

humancompanion-usds commented 1 year ago

@GnatalieH - Hold on File input until Brian can meet with USWDS and we see how they want to handle things. I believe they intend to connect soon.

caw310 commented 1 year ago

This will carry over into sprint 23.

humancompanion-usds commented 1 year ago

@briandeconinck did a great job demonstrating the problems and Dan indicated they'd try to get to this very soon, potentially in their next sprint. They are writing up the issue right away. They'll loop Brian in for feedback on their iteration and I offered to have the Veteran-facing Forms team test this next quarter (May) with Veterans if we can identify a form in our queue that requires the file input component.

Let's put this back into our prioritized queue until they have an iteration for us to use. I moved it on our roadmap out to sprint 28 in late May.

caw310 commented 1 year ago

Putting this back into reviewed/needs prioritizing as USWDS will address issues Brian raised. We will update once USWDS has made updates. We will pick up work for this in a future sprint.

caw310 commented 7 months ago

@rsmithadhoc , would you please review the USWDS design and let the team know if you see any accessibility issues? Would like your opinion before we adopt their design for File input.

rsmithadhoc commented 7 months ago

@caw310 I believe this should be good to adopt. It worked well in my testing with keyboard and VoiceOver. USWDS has also tested with JAWS and NVDA.

I see that Brian also reviewed for voice command users here. There are quirks, and I see the fake link still in there, but it should work most of the time for Dragon users.

caw310 commented 7 months ago

Hey team! Please add your planning poker estimate with Zenhub @danbrady @LWWright7

danbrady commented 6 months ago

USWDS design ported to Figma. @LWWright7, this is ready for testing. I put a screenshot of the examples from USWDS next to the component and then rebuilt them with the Figma component.

LWWright7 commented 6 months ago

@danbrady This looks great!! I like how you laid out the examples with the USWDS next to the standard frame with the heading, etc. This is a great pattern to follow and will def help with the VADS example library too. Great job! I don't see any problems or issues. Good to go!