cc6f9391fc
We were hiding the file input and styling the label as a button instead. Since clicking on a label has the same effect as clicking on the input, the input worked properly for mouse and touch screen users. However, hiding the input makes it inaccessible for keyboard users, since labels don't get keyboard focus, but inputs do. So we must not hide the input but make it invisible instead. But we still need to hide the input (alongside the label) after a file has been attached. We could add some extra JavaScript to hide the input when we hide the label. Since the JavaScript is already quite complex and my first few attempts at changing it failed, I've opted to assume that the input (and its label) must be hidden whenever there's already a file name, and implement that rule with CSS. Note we're using the `:focus-within` pseudoclass to style a label when focus is on the input. This rule (at the time of writing) is only supported by 93.5% of the browsers. Keyboard users without a screen reader and using the other 6.5% of the browsers will still be able to focus on the field but might not notice the field has received focus. Since the percentage of affected users will decrease over time and until now 100% of keyboard users were completely unable to focus on these fields, for now we think this is a good-enough solution.
29 lines
800 B
Plaintext
29 lines
800 B
Plaintext
<div class="document direct-upload document-fields nested-fields">
|
|
<%= f.hidden_field :id %>
|
|
<%= f.hidden_field :user_id, value: current_user.id %>
|
|
<%= f.hidden_field :cached_attachment %>
|
|
|
|
<div class="small-12 column title">
|
|
<%= f.text_field :title, placeholder: t("documents.form.title_placeholder") %>
|
|
</div>
|
|
|
|
<div class="small-12 column attachment-actions">
|
|
<p class="file-name small-9 column"><%= file_name %></p>
|
|
|
|
<div class="small-9 column action-add attachment-errors document-attachment">
|
|
<%= file_field %>
|
|
</div>
|
|
|
|
<div class="small-3 column action-remove text-right">
|
|
<%= destroy_link %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="small-12 column">
|
|
<div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
</div>
|