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: