Backport "Rework accessibility improvements" to v0.22#6336
Merged
tramuntanal merged 6 commits intorelease/0.22-stablefrom Jul 28, 2020
Merged
Backport "Rework accessibility improvements" to v0.22#6336tramuntanal merged 6 commits intorelease/0.22-stablefrom
tramuntanal merged 6 commits intorelease/0.22-stablefrom
Conversation
* [TAC025] Fix consultations spec after HTML validation Original commit: 989b391 * [TAC025] Fix assemblies spec after HTML validation Original commit: d6b1699 * [TAC025] Improve the required fields on the forms for screen reader Original commit: 5cb9744 * [TAC025] Fix test issues after HTML validation Original commit: d04ec68 * [TAC025] Fix a typo in the form builder Original commit: 0f2efec * [TAC025] Fix specs after HTML validation changes Original commit: c5bb2e6 * [TAC025] Fix spec after HTML validation Original commit: cd448d2 * [TAC025] Fix specs after HTML validation Original commit: a4c48e5 * [TAC025] Fix the text_area method on the form builder Original commit: 560aecb * [TAC025] Fix data-open reveal buttons submitting the underlying form Original commit: 40fe31f * [TAC025] Fix proposals listing spec after HTML validation Original commit: 5dfbb29 * [TAC025] Fix admin test after required label change on the forms Original commit: 65a4714 * [TAC025] Fix debates specs after the HTML validation Original commit: 3dcaa44 * [TAC025] Revert disabling join meeting button when no registration form Original commit: 97259e6 * [TAC025] Fix meetings specs after the HTML validation Original commit: 60b8665 * [TAC025] Fix capybara data picker support methods after HTML validation Original commit: d6076f4 * [TAC025] Fix redundant cell class definition (already defined) Original commit: 70417b9 * [TAC025] Fix hashtaggable translated editor fields after HTML validation Original commit: 24eeb2f * [TAC025] Define a specific class for activity card Original commit: aad245f * [TAC025] Fix core specs after the HTML validation Original commit: f87fada * [TAC025] Fix an oversight in check boxes tree during HTML validation Original commit: 9cb97e2 * [TAC025] Fix vote proposal spec after HTML validation Original commit: fcf8cd1 * [TAC022] Unify some buttons Unify the button styling in some views: - Light hollow buttons active and focus states - Profile sidebar secondary buttons to hollow buttons - New collaborative draft button similar to normal proposals - Versions "back to" link hollow instead of secondary Original commit: 6aecf58 * [TAC025] Fix conferences HTML validation errors Original commit: a28d13d * [TAC022] Unify confereces registration links on top of hero image Original commit: 82d8a3f * [TAC025] Fix HTML validation issues in the core gem Original commit: 0ab7781 * [TAC028] Add ALT text to card images Original commit: 88b0268 * [TAC073] Fix element read order on proposal pages Original commit: 2ea7532 * [TAC073] Fix element read order on collaborative draft pages Original commit: f0a8880 * [TAC038] Fix followers button for screen readers Original commit: 542d3be * [TAC038] Improve the follow button for screen readers Original commit: 9923b7a * [TAC036] Fix process card dates first list item For screen readers, the first list item did not read anything leaving the user confused. Original commit: b1304df * Fix rubocop violation Original commit: 7aaa253 * [TAC055] Fixes regarding the budgets progress bar - Make the screen reader always announce the correct percentage of the element instead of too high percentages, the screen reader or the browser calculates the percentage with the following formula: `valuenow` / (`valuemax` - `valuemin`) - Fix the threshold progress bar Original commit: e750734 * [TAC073] Fix spec after changing the proposal page DOM order Original commit: 98d8055 * [TAC028] Fix specs after adding ALT text to card images Original commit: 5b1fc9a * [TAC061] Fix character counter with input prefix or suffix Original commit: b712329 * Add missing scope_id term Original commit: df4d8ca * Add guidance texts to the file upload fields Original commit: 8e58b94 * Fix the topbar for Safari and Firefox Original commit: 8c20520 * Fix social button styling Original commit: e8e8c25 * [TAC061] Improve the length validation on the proposal body Original commit: 8f85e16 * Clarify button text for "already following participatory space" Original commit: 1d508ad * Fix scope not sticking when editing a proposal Original commit: 708ee25 * Ignore few "missing" and "unused" terms (which are not missing nor unused) Original commit: 2a46f4d * Fix rubocop violations Original commit: 3180b4a * Fix the omniauth mini buttons styling and accessibility Original commit: c6f0310 * Fix file upload help texts for the form upload field Original commit: 33e7ad6 * Fix endorsements visible when not enabled Original commit: 1df37bb * Fix heading levels to normal text as in the body text This caused the h2 to look smaller than h2 in the main content which caused confusion among the content editors. Original commit: bb9512a * Fix extra margin on the pages index page Original commit: 7db7094 * [TAC025] Fix HTML validation issues Original commit: 3087364 * Update the attachment title UI label Original commit: 8b24705 * Update svg4everybody (was broken on IE11) Original commit: 1a173c2 * Fix mysterious IE11 issue with missing forEach method Original commit: 2b827ca * Fix dynamic SVG icons on IE11 Original commit: 8958fbb * Fix topbar search on IE11 Original commit: 2c84f8b * Update the file help messages (attachment => file) Original commit: 4f06c02 * [TAC034] Improve the help text on the dynamic filtering forms Original commit: 2cc1198 * [TAC037] Add explanation to card "created at" status date Original commit: 67afdac * Add missing title translation for proposals update view When the saving of a proposal fails, it wasn't showing the correct title on the page. Original commit: 3fb67d2 * Add missing translation key breaking an admin view Original commit: 12ebd5c * [TAC074] Improve the report inappropriate content alternative text Original commit: 5412ba7 * [TAC042] Fix admin specs after the ALLCAPS change * [TAC042] Fix ALLCAPS for budget list data elements * [TAC019] Fix the already followin participatory space double text After the changes described at [TAC019], the participatory space title was written twice for the screen readers. * [TAC019] Fix follows example specs after link context updates * [TAC019] Validate HTML - Add section title ID Original commit: 2da7fe9 * [TAC042] Fix the initiative page ALLCAPS texts * [TAC065] Make the proposal creation steps more accessible Original commit: 1a5654f * [TAC064] Fix re-clicking a normal confirm link * [TAC042] Fix initiatives versions spec after the ALLCAPS change * [TAC022] Unify button and link styling across application Fix typo in the previous re-commit. Original commit: 1dd9438 * [TAC019] Fix unclosed if statement in proposal vote button Fix a typo in the original re-commit. Original commit: 2da7fe9 * [TAC042] Fix ALLCAPS in the proposal supports * [TAC042] Fix vote proposal spec after supports ALLCAPS change * Remove unused translation key * Normalize the en locale translation files * ERB lint * [TAC042] Fix initiative signing spec after the ALLCAPS change * Revert locales fi and sv Revert the locale files back to commit: 204758a This is needed for Decidim core pull requests. * [TAC042] Fix initiative signing SMS spec after the ALLCAPS change * [TAC019] Add unique link purpose text for see all meetings link Original commit: 2da7fe9 * Fix topbar link focus state border The border was spanning too wide because of the before element on the link also on desktop widths. * Add more margin after form help text This change makes the form fields better distinguished from each other when they have the help text after them. * [TAC023] Fix the admin UI dropdowns according to WCAG criteria * [TAC007] Mark the correct aria roles for icons Most of the icons do not need to be announced by the screen reader, so we apply the role "none presentation" to them. * [TAC009] Generalize the search buttons next to free text search box * Cleanup and lint (double space to single space) * [TAC019] Add screen reader descriptions for the verifications view * [TAC036] Add textual explanations for the date icons next to dates * [TAC027] Improve the usability of the floating help After the accessibility changes the floating help buttons were making the user jump in the view. * [TAC041] Make "Endorsements" translatable * [TAC019] Add link context for marking notification as read * [TAC027] Add the close help button translation Related to: 9f03f9a * Add textual explanation for the officialized badge icon * [TAC019] Add translation for renewing a verification Related to: aaa356b * [TAC009] Generalize the search button next to intiatives filter Related to: 3a6292b * Fix initiatives comments count translation for multiple comments * [TAC007] Mark the correct aria role for collaborative drafts Related to: 8fc7b38 * [TAC063] Make the close modal texts translatable * [TAC009] Add label text for screen reader in the header search * [TAC010] Add footer nav element according to WCAG 1.3.1 * [TAC015] Add lang attribute to the language chooser * [TAC019] Translatable screen reader explanations for footer links * [TAC021] Add external link text explanation for screen readers * [TAC021] Improve external link styling * [TAC023] [HAC4.1] Update foundation for making dropdowns accessible Updating foundation makes dropdowns more accessible. See: foundation/foundation-sites#8810 * [TAC023] [HAC4.1] Fix admin CSS after foundation update Apply the foundation override to fix SCSS compilation crashing for the admin views. Related to: 6890387 * [TAC023] [HAC4.1] Improve the usability of the dropdown menus These changes makes the dropdown menus accessible using a screen reader. * [TAC019] Add the organization name to the social media links * [TAC024] Add user account dropdown menu aria link explanation To emphasize for screen readers that the link is for the user account menu. * [TAC007] Add icon roles for some of the presentational icons Some icons were still missing the aria roles. * [TAC007] Add correct label for the show conversation icon link * [TAC030] Back to process page link to process steps index page * [TAC037] Add "created at" label next to created at date for proposals * [TAC038] Remove <title> elements from the icons SVG This causes the accessibility titles of the icons on the page to show the icon's technical name as its title. This is not desired functionality for accessibility. * [TAC038] Fix SVG icon titles for accessibility * [TAC023] [HAC4.1] Fix system CSS after foundation update Apply the foundation override to fix SCSS compilation crashing for the admin views. Related to: 6890387 * [TAC023] Further improve the dropdown menu accessibility * [TAC038] Remove unnecessary titles from the icon links These titles did not add any valuable information for accessibility and they were rather confusing. * [TAC023] Add proper screen reader label for the language menu This makes the language menu more accessible using a screen reader. The user is no longer confused by the language name as the menu title and instead they will get a proper label "Choose language". * [TAC051] Remove the tabindex from the Foundation progress bars This caused the progress bar elements to be focusable using the keyboard which is not necessary and not desired functionality as there is nothing the progress bar allows the user to do. Related to: foundation/foundation-sites#12043 * [TAC070] Clarify scope and category tag links for accessibility Clarify the purposes of the links for accessibility. WCAG 2.1 AA / 4.2.1 * [TAC070] Fix the link purposes for proposal scope/category tags WCAG 2.1 AA / 4.2.1 * [TAC074] Fix comments order by for screen reader accessibility * [TAC023] [HAC4.1] Fix order by dropdown after Foundation update This fixes the order by dropdown next to the comments section. The background color got broken after Foundation was updated. Related to: 6890387 * [TAC063] Make the alert dismiss buttons translatable * [TAC074] Add labels/titles for the comment vote up/down buttons * [TAC048] Refactor + Make the results per page work dynamically Refactor the dynamic listing options for the results listing views and make the results per page selector work dynamically. * [TAC061] Improve form error validation for screen readers - Automatically focus to the first erroneous field - Announce there are errors on the form that need to be corrected * [TAC58] [TAC083] Add general explanation for form required fields * [TAC020] [TAC086] Improve the focus borders - Implement alternative focus color to be used where the main color is not distinctive enough - Add outline offset to better distinguish the focus border on certain elements * Navbar styling fixes after the accessibility updates * [TAC056] [TAC062] Improved the callout alert accessibility Now the alert is announced by most screen readers automatically after the page has loaded. * Fix budgeting add/remove project labels * Fix success/alert/etc. button coloring after Foundation update * [HAC6.1] Remove new proposal button when creation is not enabled The new proposal button was not implemented in accessible way making it hard to understand for screen reader users. It is also unnecessary when proposal creation is not enabled. * [HAC5.13] Mark pagination current page with aria-current This makes the screen reader announce the current page in the pagination. * Fix custom confirm dialog after Foundation update * Fix translation location after core merge * Fix comment report and link button screen reader titles + lint * Clarify the link title for "report a problem" * Bundle comments JS * Fix CSS issue after the foundation update The applied foundation SCSS patch was not working correctly. This fixes the styling issues caused by the patch. * Re-bundle core and admin JS * Remove unused translation key * Fix Gemfile sanity for design app and generators * Fix save participatory texts draft * Fix ambigious link clicks in spec after the ALLCAPS change * Fix icon helper spec after the SVG role changes * Fix reports examples after Foundation update * Fix manage impersonations spec after the required field label change * Fix comment by spec when user group name has special characters * Normalize the locales * Fix account deletion confirmation after Foundation update * Fix forms spec after core merge + ALLCAPS change * Revert "Fix success/alert/etc. button coloring after Foundation update" This reverts commit 25c1fdf. * Add results listing JS to the core manifest (broke non-dev envs) * Stylelint * Stylelint - Ignore newline before @else * Stylelint * Fix new initiatives spec after with the ALLCAPS changes * All label to "back to all conversations" * Fix initiatives filter spec for the ALLCAPS change * Fix forms specs for dismissing the page unload notification * Add title to meetings view defining the type of the results displayed * Fix flanky test that did not always work correctly * Make "more about cookies" link accessible * Fixes after merge with develop - Update specs - Migrate parts broken by the versions functionality refactoring * Fix SVG roles for valid HTML Although suggested by some guides, "none", "presentation" or "presentation none" are not valid SVG element ARIA roles according to the specification or the HTML validators. Change all SVGs marked with those roles to use the "img" role and add the "aria-hidden" attribute to them. * Fix syntax error after HTML validation * HTML-validation: fix double <main> elements in various parts * HTML-validation: fix budget voting button disabled attributes * HTML-validation: fix form field prefix/suffix markup * HTML-validation: add missing ALT-attribute to profile image * HTML-validation: fix wizard invalid concecutive <ol> tags * Add aria-current to wizard stepper current element * HTML-validation: fix double data-open attribute for authorize btns * HTML-validation: namespace the user related forms This ensures there are no doubled ID attributes on the page in case there are multiple user forms displayed at the same time, e.g. on the login page (registration form and login modal). * HTML-validation: remove autofocus from login modal There can only be one autofocus element on the page. * HTML-validation: invisible captcha styles to the page head * HTML-validation: remove invalid label="false" attribute from input * HTML-validation: change article tags to divs This is because the article tags do not represent an actual article and they do not have a h2-h6 defined within them. * HTML-validation: validate the new conversation views * HTML-validation: unique IDs for irreversible action modals * HTML-validation: fix label for attribute missing reference * HTML-validation: fix invalid <small> element contents The small elements contained tags that are not allowed within them. * HTML-validation: fix disabled proposal support buttons - Span elements cannot be marked with "disabled" - For accessibility, the buttons should be represented as buttons * [TAC022] Unify the conversations reply button styling * Fix specs broken by the HTML validation * Recovered uppercase styles. Anchor :hover with text-decoration. Button :hover styles. Input :focus styles * Process phase uppercase. Topbar search general styles * Stylelint fixes * Fix broken en translation file in decidim-meetings * Fix specs broken by the merge * Fix decidim-meetings expore_versions_spec after the merge * External link style fixes * card footer upperclase and alignments * Removed :hover styles from cards since cards are not clickable * Flag button and support/follow button fixes * Documents, meetings and other document lists with unified font sizes * Removed unnecessary :hover styles * Participatory space for 'already following' for screen readers only in English translation * Cityhall logo position fix * Cityhall discarded from external-link JS * Contextual help position in forms * Quill toolbar video icon margin fix * Followers/Members counter style fixes * update linters * style lints * revert vendor modifications * downgrade rubocop, order locales * more linting * fix version diff javascript * rebuild js * revert tests uppercases * core spec fixes * fix sever modules specs * fix more specs in modules * fix last proposals specs * revert css flex property * fix chromdriver spec error * Add remaining chars helper text in quill editors * test characters only in proposals * fix new proposal test * fix case in debate version spec Co-authored-by: Antti Hukkanen <antti.hukkanen@mainiotech.fi> Co-authored-by: Ivan Vergés <ivan@platoniq.net> # Conflicts: # Gemfile.lock # decidim-comments/app/assets/javascripts/decidim/comments/bundle.js # decidim-comments/app/frontend/comments/comment.component.tsx # decidim-core/app/assets/javascripts/decidim/diff_mode_dropdown.js.es6 # decidim-core/app/cells/decidim/author/flag.erb # decidim-core/app/cells/decidim/diff/attribute.erb # decidim-core/app/views/decidim/scopes/_scopes_picker_input.html.erb # decidim-core/spec/cells/decidim/diff_cell_spec.rb # decidim-core/spec/system/registration_spec.rb # decidim-debates/app/views/decidim/debates/debates/_form.html.erb # decidim-debates/config/locales/en.yml # decidim-debates/spec/system/debates_versions_spec.rb # decidim-forms/app/views/decidim/forms/questionnaires/_answer.html.erb # decidim-forms/lib/decidim/forms/test/shared_examples/manage_questionnaire_answers.rb # decidim-forms/lib/decidim/forms/test/shared_examples/manage_questionnaires/add_questions.rb # decidim-meetings/config/locales/en.yml # decidim-meetings/spec/system/explore_meetings_spec.rb
2 tasks
tramuntanal
approved these changes
Jul 28, 2020
This file contains hidden or 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
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.
🎩 What? Why?
Backport accessibility improvements into the 0.22 branch
Supersedes #6322
📌 Related Issues
📋 Subtasks
CHANGELOGupgrade notes, if required📷 Screenshots (optional)