Skip to content

Backport "Rework accessibility improvements" to v0.22#6336

Merged
tramuntanal merged 6 commits intorelease/0.22-stablefrom
backport/accessibility
Jul 28, 2020
Merged

Backport "Rework accessibility improvements" to v0.22#6336
tramuntanal merged 6 commits intorelease/0.22-stablefrom
backport/accessibility

Conversation

@microstudi
Copy link
Copy Markdown
Contributor

🎩 What? Why?

Backport accessibility improvements into the 0.22 branch
Supersedes #6322

📌 Related Issues

📋 Subtasks

  • Add CHANGELOG upgrade notes, if required
  • If there's a new public field, add it to GraphQL API
  • Add documentation regarding the feature
  • Add/modify seeds
  • Add tests
  • Another subtask

📷 Screenshots (optional)

Description

* [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
@microstudi microstudi mentioned this pull request Jul 24, 2020
2 tasks
@microstudi microstudi added release: v0.22 Issues that need to be tackled for v0.22 backport Pull Requests that are a backport for a fixed bug labels Jul 24, 2020
@tramuntanal tramuntanal changed the title Backport Rework accessibility improvements Backport "Rework accessibility improvements" to v0.22 Jul 27, 2020
@tramuntanal tramuntanal merged commit de2e5e7 into release/0.22-stable Jul 28, 2020
@tramuntanal tramuntanal deleted the backport/accessibility branch July 28, 2020 06:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport Pull Requests that are a backport for a fixed bug release: v0.22 Issues that need to be tackled for v0.22

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants