From 6ea9383743ca6ac67a387e05d517f7f890024ac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 27 Mar 2021 18:26:44 +0100 Subject: [PATCH] Allow toggling elements with the keyboard Using `` tags with no `href` means these elements cannot be activated by keyboard users, so we're replacing them with buttons. In the future we probably want to add more consistency so all toggle buttons use the same code. We might also add styles depending on the `aria-expanded` property. --- app/assets/stylesheets/dashboard.scss | 16 +++++++++++++ app/assets/stylesheets/layout.scss | 8 +++---- app/assets/stylesheets/participation.scss | 10 ++++++++ app/assets/stylesheets/sdg/goals/show.scss | 4 ++++ .../sdg/goals/show_component.html.erb | 8 +++---- app/views/dashboard/_next_goal.html.erb | 10 ++++---- app/views/dashboard/_proposed_action.html.erb | 4 ++-- .../_recommended_actions_by_status.html.erb | 12 +++++----- app/views/layouts/_header.html.erb | 2 +- .../legislation/processes/_header.html.erb | 4 ++-- .../processes/_header_full.html.erb | 4 ++-- .../legislation/processes/_help_gif.html.erb | 4 ++-- app/views/polls/_gallery.html.erb | 4 ++-- app/views/polls/show.html.erb | 10 ++++---- app/views/shared/_flag_actions.html.erb | 8 +++---- app/views/verification/residence/new.html.erb | 4 ++-- config/locales/en/general.yml | 2 +- spec/shared/system/flaggable.rb | 24 +++++++++---------- spec/system/dashboard/dashboard_spec.rb | 15 +++++++++--- .../system/legislation/draft_versions_spec.rb | 19 +++++++++++++++ spec/system/legislation/processes_spec.rb | 11 +++++---- spec/system/sdg/goals_spec.rb | 12 +++++----- 22 files changed, 127 insertions(+), 68 deletions(-) diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index f674ce45b..1424032c2 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -133,6 +133,10 @@ p { font-size: $small-font-size; } + + button { + @include link; + } } .icon-check { @@ -156,6 +160,12 @@ } } +.proposed-actions { + button { + @include link; + } +} + // 03. Resources // ------------- @@ -285,6 +295,12 @@ } } +.goals-section { + button { + @include link; + } +} + // 05. Sidebar // ----------- diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index df8cb15e1..05af63779 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1090,7 +1090,7 @@ form { } } - [type]:not(.close-button, [type=checkbox], [type=file], [type=radio], [type=submit]) { + [type]:not([type="button"], [type=checkbox], [type=file], [type=radio], [type=submit]) { background: #f8f8f8; height: $input-height; margin-bottom: rem-calc(16); @@ -2060,10 +2060,8 @@ table { .flag-content { - .button { - background: none; - margin-bottom: 0; - padding: 0; + button { + @include link; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index e0f4e4f17..4e0ea542e 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1579,6 +1579,15 @@ .poll-more-info, .poll-more-info-answers { border-top: 1px solid #eee; + + .read-more { + margin-bottom: $line-height; + margin-top: $line-height; + + button { + @include link; + } + } } .poll-more-info-answers { @@ -1655,6 +1664,7 @@ top: 24px; width: rem-calc(48); z-index: 9; + cursor: pointer; &:hover { background: $dark; diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss index 1e6c57bfc..3e266bfb5 100644 --- a/app/assets/stylesheets/sdg/goals/show.scss +++ b/app/assets/stylesheets/sdg/goals/show.scss @@ -69,6 +69,10 @@ .read-more { text-align: center; } + + .read-more button { + @include link; + } } .goal-description { diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb index fcc731887..2cd9176ed 100644 --- a/app/components/sdg/goals/show_component.html.erb +++ b/app/components/sdg/goals/show_component.html.erb @@ -12,17 +12,17 @@ <%= long_description %>
- <%= t("sdg.goals.show.read_more", goal: goal.title) %> - - +
diff --git a/app/views/dashboard/_next_goal.html.erb b/app/views/dashboard/_next_goal.html.erb index 2ca577279..61e1b566d 100644 --- a/app/views/dashboard/_next_goal.html.erb +++ b/app/views/dashboard/_next_goal.html.erb @@ -1,5 +1,5 @@ <% if next_goal.present? %> -
+

<%= t("dashboard.next_goal.title") %>

@@ -7,9 +7,9 @@ <% if course.count > 1 %>
- +
<% end %>
@@ -19,9 +19,9 @@ <%= render partial: "goal", collection: course %>
- +
<% end %> diff --git a/app/views/dashboard/_proposed_action.html.erb b/app/views/dashboard/_proposed_action.html.erb index 83536298a..12fa5b451 100644 --- a/app/views/dashboard/_proposed_action.html.erb +++ b/app/views/dashboard/_proposed_action.html.erb @@ -33,10 +33,10 @@ data-toggler=".hide"> <%= proposed_action_description(proposed_action) %>
- <%= t("dashboard.recommended_actions.show_description") %> - +
<%= wysiwyg(proposed_action.description) %>
diff --git a/app/views/dashboard/_recommended_actions_by_status.html.erb b/app/views/dashboard/_recommended_actions_by_status.html.erb index be0a983f3..9ee7cf572 100644 --- a/app/views/dashboard/_recommended_actions_by_status.html.erb +++ b/app/views/dashboard/_recommended_actions_by_status.html.erb @@ -1,15 +1,15 @@

<%= t("dashboard.recommended_actions.#{status}_title") %>

<% if actions.any? %> -
+
<% actions.first(4).each do |proposed_action| %> <%= render "proposed_action", proposed_action: proposed_action %> <% end %> <% if actions.count > 4 %> <% if toggle == true %> <% if actions.count > 4 %> -
+
<%= render partial: "proposed_action", collection: actions - actions.first(4) %>
- +
<% end %> diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index ceba47231..346582e84 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -16,7 +16,7 @@
- + <%= t("application.menu") %> diff --git a/app/views/legislation/processes/_header.html.erb b/app/views/legislation/processes/_header.html.erb index f0be35496..8917176e5 100644 --- a/app/views/legislation/processes/_header.html.erb +++ b/app/views/legislation/processes/_header.html.erb @@ -27,9 +27,9 @@ <% end %>
- + <% else %> <%= render "legislation/processes/header_full", process: @process %> <% end %> diff --git a/app/views/legislation/processes/_header_full.html.erb b/app/views/legislation/processes/_header_full.html.erb index 08a0205aa..2bed4ae2b 100644 --- a/app/views/legislation/processes/_header_full.html.erb +++ b/app/views/legislation/processes/_header_full.html.erb @@ -12,10 +12,10 @@ <%= markdown @process.additional_info if @process.additional_info %>
- style="background:<%= process.font_color %>; color:<%= process.background_color %>;" <% end %>> <%= t("legislation.processes.header.additional_info") %> - + <% end %> diff --git a/app/views/legislation/processes/_help_gif.html.erb b/app/views/legislation/processes/_help_gif.html.erb index 19e47a506..4481623d5 100644 --- a/app/views/legislation/processes/_help_gif.html.erb +++ b/app/views/legislation/processes/_help_gif.html.erb @@ -1,10 +1,10 @@
- + -
+
+