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 labels for admin edit pages #931
Conversation
I'm just checking in on this PR in the new year, please let me know if I ought to do things differently to make it easier to merge. Thanks! |
Hi, Jeremy, I don't think there's anything you need to do, we've just got some moving pieces on our end we need to get into place before we can move on this. Rest assured we haven't forgotten about it. |
Hi, just getting back to this as we're looking at incorporating the new admin theme. I see you removed the changes to the links to edit, etc. in this PR, which I think is a good idea to keep things separate. Could you also remove the visually_hidden function you added, as now it has no usages in this PR (and I'm not sure a function like that is the direction we'd want to go, actually). It would probably also be good to separate out the gray color change as well into its own issue or PR. A couple other questions:
|
Thanks for that feedback! I'll separate out the color issue and remove the As for the question about numbering the text inputs, there are two things that should be able to do. One is to make it explicit which "remove" and "use html" inputs correspond to which text fields. The other is to provide a way for people using voice interfaces to have a way to explicitly reference a given input field. As part of removing the visually-hidden class, I'll take another pass at those inputs and labels. I just learned about chaining aria-labelledby references from our accessibility team, which should provide some elegant solutions. I'll also give rebasing a try, and defer to you if it proves more than I can handle. |
Added fieldsets to edit pages to group input elements, even when new elements are added. Also added an aria-live element to alert screen readers to changed content when adding metadata fields. Last but not least, added a `visually-hidden` class to add content for screen readers that won't be displayed visually on the site, used on browse and edit pages.
Atom wants to make these changes to whitespace
Label is visually hidden, but present for benefit of screen readers. The label includes a number to indicate which input it is, in the case where multiple inputs have been created.
Increased contrast slightly to get to sufficient WCAG contrast and put $midgray variable in place of gray color keyword in scss files
Clearing trailing spaces to make atom happy separate from content changes
Changing the link text is a separate issue, don't want to conflate it with the form inputs issue
This reverts commit 6132076.
c483a69
to
6426fbb
Compare
When tabbing through inputs, moving between groups is announced by screen readers, but when reading a list of inputs, groups are not announced with input labels, resulting in undifferentiated inputs (e.g. repeated 'edit text' fields). By using chained ids in aria-labelledby tags, existing elements are used as labels and announce their context appropriately, even when those inputs are isolated by a screen reader.
Travis CI failed, saying 'A non-numeric value encountered' on line 78 of ElementInput, hoping this fixes it
I've changed things around, hopefully all for the better. I've removed all of the visually-hidden elements, css, and functions, relying entirely on existing elements. I had to add some IDs to elements that didn't have any, as I used chained I was also able to rebase the branch, so it's building on more solid foundations. |
Okay, we've merged a re-rebased version of this (squashed down to a single commit) so it will appear with the new admin theme. Thanks for your contribution. |
This PR is intended to address issue #929 dealing with input labels when editing metadata. It adds a fieldset around metadata inputs and a legend element that's visually hidden but visible to screen readers to group multiple instances of the same metadata input. It also adds an
aria-live: polite tag
around each of the metadata fields, so that screen readers are notified when inputs are added. There's also a minor change to the gray text color to increase the contrast. All of these changes are based on thenew-admin-theme
branch to work with those updates. Happy to revise the changes based on feedback.