-
Notifications
You must be signed in to change notification settings - Fork 323
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.
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
[SPIKE] Explore progressively enhanced file upload component #5305
base: main
Are you sure you want to change the base?
Conversation
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 980b1c6 |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
9113f76
to
26b05e1
Compare
26b05e1
to
8fe1f08
Compare
I've started testing this today. But I've only tested with Dragon so far. Unfortunately it doesn't work. Roughly 9 out of 10 times saying "click choose file" or "click button" only focused on the button but didn't open the file dialog. And weirdly 1 out of 10 times it did. But I didn't do anything differently between when it did and when it didn't. When we've figured out why this is happening I will test again, including in other assistive technologies. |
8fe1f08
to
d411a91
Compare
Rebased this whilst I do some local testing |
Just in case it's helpful - we had a styled upload button on the passport service - which has presumably been tested by DAC multiple times. |
@edwardhorsford Do you know if it was tested in Dragon NaturallySpeaking and, if so, whether it exhibited the same issues described by @selfthinker? |
I assume it was tested with it as DAC did the testing. But I don't recall more than that. You could try on the live service to see how it works now... |
This change is mutated by a lot of mess from me trying to make typescript not upset with me
cee7848
to
9cfd3be
Compare
Adding
|
DAC's solution was using the |
Setting this via the `attributes` parameter raises complaints from the test that lints our HTML output. Should quieten that failing test.
Chromium actively ignores this attribute on file inputs and throws a warning in the console
6ab7ef8
to
f2bccb3
Compare
Adds a mutation observer that looks to see if the `disabled` attribute of the input changes and, if so, updates the button to match
5a0104a
to
fbc34fe
Compare
624cfa9
to
364c7b2
Compare
364c7b2
to
16960ef
Compare
Dragenter is fired only once when the drag first touches the page, whereas dragover fires continuously. As we’re only toggling the visbility of the dropzone, dragenter will suffice for our needs.
As part of post-audit investigations, a spike into layering a new UI onto the File upload component that should be a bit more friendly to assistive technologies. alphagov/govuk-design-system#4031
Note: This hasn't actually been tested across browsers and ATs yet,
Changes
multiple
,accepts
andcapture
attributes; etc.)Thoughts