Standardize drawer function for consistency and accessibility #995
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Use actual buttons for toggles and actions. * Improve button and input labels for screen readers. * Make drawer markup more consistent. * Consolidate drawer js.
* Drawer toggles and remove actions are buttons. * Improved aria labeling for drawer actions. * Pull navigation link edit markup out into a partial for more legible management.
The js now covers toggling drawer contents and both delete and undo. The "data-action-selector" attribute tells the js what selector to toggle on relevant drawer components.
* Reduce redundancy in updateDeleteButtons. Most of it is now handled in the shared manageDrawers function in globals.js. * Manage display of 'remove/undo' buttons in the partial.
The way the partial was iterating resulted in duplicate ids.
New links were previously inserted into the navigation via the javascript using separate markup. This allows us to manage consistent markup for both new and existing navigation links. The form will include an empty version of this partial as a template, then the javascript clones and populates the template with new link data.
This allows the drawer javascript to listen to a larger container for clicks on the drawer buttons. Previously on forms that add new drawers, the new drawers would not get all the proper behaviors bound.
It's already called in edit-navigation.php.
* The form has an empty navigation link partial marked '.template'. The js clones the template and populates it with the relevant values. * Omeka.Navigation.populateNewNavLinkAttributes() exists because there are so many attributes to update to keep the new links screen reader friendly, alongside submitting properly. * The visit buttons are now actual buttons instead of links. The js has been updated accordingly. * The add new link form now shows required field alerts if not filled out properly. * Upon adding a new field, screen readers will read a success message that includes the total number of links on the form. * Instances of '.main_link' selectors have been updated to '#navigation_main_list .main_link' to avoid picking up empty template values.
Buttons are buttons now.
It is confusing for identical "remove" buttons to perform differently on the same form.
The controller now sends the temporary element id to the partials, which can then be referenced in other uses of aria-labelledby.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request consolidates multiple uses of the "drawer" pattern where a component can collapse and expand, and often be marked for removal or be dragged to create order. It also does the following:
Omeka.manageDrawers()inglobals.js, to centralize near identical functionality spread across js for navigation and item type elements.