-
-
Notifications
You must be signed in to change notification settings - Fork 631
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
input type="file" is only read as "browse button" in firefox #5326
Comments
Comment 1 by jteh on 2015-09-09 23:11 If I move through the document with browse mode, I see the label before the button. I don't think it's appropriate to change the label of the button itself. If it just said "Avatar", you wouldn't know that the button was to browse for a file. I guess the file input could be treated as a grouping, which would cause it to be read like a fieldset legend. Regardless, this is something that'd need to be changed in Firefox. I'm not sure how this is better in Chrome. In Chrome, I see the same results except for "Choose file" instead of "Browse". |
Comment 2 by jmuheim on 2015-09-10 12:16 And you're right, it's the same in Chrome, but in IE it works as expected. Congrats, IE (I rarely say this, haha)! |
@jcsteh: Should someone file a bug against firefox for this? |
Interestingly, in Chrome, the button does now get the author provided label instead of "Choose file". For Firefox, I still think I'd prefer the file input (which currently gets a role of text frame) to get a role of grouping. It already gets the label. That way, this would be read as a labelled grouping with a Browse button when tabbing. A bug has yet to be filed against Firefox. |
Enables FileDrop to accept the same `messages` prop that our other form input components accept. Fixes: INSTUI-862 Test plan: - The second FileDrop example should now appear with an `Invalid filetype` message and red/error border - Change the message type to `success` and confirm the text turns green - Test the input on a screenreader and confirm that the message is read when the input is focused via aria-describedby (does not work in NVDA due to screenreader/Firefox bug nvaccess/nvda#5326) - Confirm that :focus, :hover, and error states can now be seen simultaneously Change-Id: Iec9d8e98c0ae9bbd99f0800689fd4dccfae9d522 Reviewed-on: https://gerrit.instructure.com/134365 Tested-by: Jenkins Reviewed-by: Jennifer Stern <jstern@instructure.com> QA-Review: Dan Sasaki <dsasaki@instructure.com> Product-Review: Chris Hart <chart@instructure.com>
Enables FileDrop to accept the same `messages` prop that our other form input components accept. Fixes: INSTUI-862 Test plan: - The second FileDrop example should now appear with an `Invalid filetype` message and red/error border - Change the message type to `success` and confirm the text turns green - Test the input on a screenreader and confirm that the message is read when the input is focused via aria-describedby (does not work in NVDA due to screenreader/Firefox bug nvaccess/nvda#5326) - Confirm that :focus, :hover, and error states can now be seen simultaneously Change-Id: Iec9d8e98c0ae9bbd99f0800689fd4dccfae9d522 Reviewed-on: https://gerrit.instructure.com/134365 Tested-by: Jenkins Reviewed-by: Jennifer Stern <jstern@instructure.com> QA-Review: Dan Sasaki <dsasaki@instructure.com> Product-Review: Chris Hart <chart@instructure.com>
Where can such a bug be filed? |
Actually, there is a bug after all: Mozilla bug 1316965 |
Reported by jmuheim on 2015-09-09 07:16
File inputs are only read as "browse button" in firefox, regardless whether there is a label or any sort of aria-describedby (or similar) enhancement.
In IE and Chrome it works better.
Check out demo here:
http://codepen.io/jmuheim/full/JYdKRx
The text was updated successfully, but these errors were encountered: