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.

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

Add new section for file upload, with examples #305

Merged
merged 3 commits into from
Sep 12, 2016

Conversation

gemmaleigh
Copy link
Contributor

What problem does the pull request solve?

This PR fixes #298, by reverting the custom file upload style.

What does it do?

The button style currently used prevents the button from gaining focus.
This a bug, for now it is better to revert to the native file upload and in future find a custom solution which is accessible.

Screenshots (if appropriate):

Before:
screen shot 2016-09-08 at 11 40 55

After:

screen shot 2016-09-08 at 11 39 43

After (focussed by tabbing through form examples page):

screen shot 2016-09-08 at 11 40 03

New section added to the "Form elements" guide:

screen shot 2016-09-08 at 11 40 19

What type of change is it?

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

- Ensure both examples have their own snippets
- Do not style the input, leave as native control
- Show how errors look with this input
@NickColley
Copy link
Contributor

Looks good, I wonder if we should put an explanation on why we are not doing a custom upload as I imagine some people will see this as an opportunity to re-implement it without realising the effort we need to go into to making sure a custom input behaves as well as a native input?

@gemmaleigh
Copy link
Contributor Author

I've added a section underneath to explain why we recommend using the native input type="file".

Screenshot below:

explanation -form elements gov uk elements

@robinwhittleton robinwhittleton merged commit be000a9 into master Sep 12, 2016
@robinwhittleton robinwhittleton deleted the remove-custom-file-input branch September 12, 2016 09:59
@NickColley
Copy link
Contributor

NickColley commented Sep 12, 2016

Thanks Gemma 👍

<li>the control gains focus when tabbing through the page</li>
<li>the control functions using a keyboard</li>
<li>the control functions using assistive technology</li>
<li>the control functions when javascript is disabled</li>
Copy link
Contributor

@joelanman joelanman Sep 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we generally refer to 'javascript is not available', given the majority case is not 'disabled'

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, absolutely - feel free to open a PR to fix!

gemmaleigh pushed a commit that referenced this pull request Jun 8, 2017
0.22.0

- Adds new Apple touch icons to precompile list for Rails apps [PR #305](alphagov/govuk_template#305)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Upload a file button gets no focus
4 participants