consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow toggling elements with the keyboard

Browse Source 
Using `<a>` 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.
This commit is contained in:
Javi Martín
2021-03-27 18:26:44 +01:00
parent bfbbda00e3
commit 6ea9383743
22 changed files with 127 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/dashboard.scss
View File

@@ -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
// -----------

8
app/assets/stylesheets/layout.scss
View File

@@ -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;
}
}

10
app/assets/stylesheets/participation.scss
View File

@@ -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;

4
app/assets/stylesheets/sdg/goals/show.scss
View File

@@ -69,6 +69,10 @@
.read-more {
text-align: center;
}
.read-more button {
@include link;
}
}
.goal-description {

8
app/components/sdg/goals/show_component.html.erb
View File

@@ -12,17 +12,17 @@
<%= long_description %>
</div>
<div class="read-more">
<a id="read_more_goal_<%= goal.code %>"
<button type="button" id="read_more_goal_<%= goal.code %>"
data-toggle="description_goal_<%= goal.code %> read_more_goal_<%= goal.code %> read_less_goal_<%= goal.code %>"
data-toggler="hide">
<%= t("sdg.goals.show.read_more", goal: goal.title) %>
</a>
<a id="read_less_goal_<%= goal.code %>"
</button>
<button type="button" id="read_less_goal_<%= goal.code %>"
data-toggle="description_goal_<%= goal.code %> read_more_goal_<%= goal.code %> read_less_goal_<%= goal.code %>"
data-toggler="hide"
class="hide">
<%= t("sdg.goals.show.read_less", goal: goal.title) %>
</a>
</button>
</div>
</div>
</article>

10
app/views/dashboard/_next_goal.html.erb
View File

@@ -1,5 +1,5 @@
<% if next_goal.present? %>
<div id="goals-section">
<div id="goals-section" class="goals-section">
<h3 class="title"><%= t("dashboard.next_goal.title") %></h3>
<div id="next_goal" data-toggler=".hide">
@@ -7,9 +7,9 @@
<% if course.count > 1 %>
<div class="margin small">
<a id="see_complete_course_link" data-toggle="complete_course next_goal">
<button type="button" id="see_complete_course_link" data-toggle="complete_course next_goal">
<%= t("dashboard.next_goal.see_complete_course") %>
</a>
</button>
</div>
<% end %>
</div>
@@ -19,9 +19,9 @@
<%= render partial: "goal", collection: course %>
<div class="margin small">
<a data-toggle="complete_course next_goal">
<button type="button" data-toggle="complete_course next_goal">
<%= t("dashboard.next_goal.hide_course") %>
</a>
</button>
</div>
</div>
<% end %>

4
app/views/dashboard/_proposed_action.html.erb
View File

@@ -33,10 +33,10 @@
data-toggler=".hide">
<%= proposed_action_description(proposed_action) %>
</div>
<a data-toggle="proposed_action_description_<%= dom_id(proposed_action) %>
<button type="button" data-toggle="proposed_action_description_<%= dom_id(proposed_action) %>
truncated_description_<%= dom_id(proposed_action) %>">
<small><%= t("dashboard.recommended_actions.show_description") %></small>
</a>
</button>
<div id="proposed_action_description_<%= dom_id(proposed_action) %>" class="hide" data-toggler=".hide">
<%= wysiwyg(proposed_action.description) %>
</div>

12
app/views/dashboard/_recommended_actions_by_status.html.erb
View File

@@ -1,15 +1,15 @@
<h3 class="title"><%= t("dashboard.recommended_actions.#{status}_title") %></h3>
<% if actions.any? %>
<div id="proposed_actions_<%= status %>">
<div id="proposed_actions_<%= status %>" class="proposed-actions">
<% actions.first(4).each do |proposed_action| %>
<%= render "proposed_action", proposed_action: proposed_action %>
<% end %>
<% if actions.count > 4 %>
<div class="margin small" id="proposed_actions_<%= status %>_link" data-toggler=".hide">
<% if toggle == true %>
<a id="see_proposed_actions_link_<%= status %>" data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
<button type="button" id="see_proposed_actions_link_<%= status %>" data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
<strong><%= t("dashboard.recommended_actions.see_proposed_actions") %></strong>
</a>
</button>
<% else %>
<%= link_to recommended_actions_proposal_dashboard_path(proposal.to_param) do %>
<strong><%= t("dashboard.recommended_actions.goto_proposed_actions") %></strong>
@@ -20,12 +20,12 @@
</div>
<% if toggle == true %>
<% if actions.count > 4 %>
<div id="last_proposed_actions_<%= status %>" class="hide" data-toggler=".hide">
<div id="last_proposed_actions_<%= status %>" class="hide proposed-actions" data-toggler=".hide">
<%= render partial: "proposed_action", collection: actions - actions.first(4) %>
<div class="margin small">
<a data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
<button type="button" data-toggle="last_proposed_actions_<%= status %> proposed_actions_<%= status %>_link">
<strong><%= t("dashboard.recommended_actions.hide_proposed_actions") %></strong>
</a>
</button>
</div>
</div>
<% end %>

2
app/views/layouts/_header.html.erb
View File

@@ -16,7 +16,7 @@
<div class="top-bar">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
<span class="menu-icon dark" data-toggle></span>
<button type="button" class="menu-icon dark" data-toggle></button>
<%= t("application.menu") %>
</span>

4
app/views/legislation/processes/_header.html.erb
View File

@@ -27,9 +27,9 @@
<% end %>
</div>
<a class="button" data-toggle="legislation_info">
<button type="button" class="button" data-toggle="legislation_info">
<%= t("legislation.processes.header.more_info") %>
</a>
</button>
<% else %>
<%= render "legislation/processes/header_full", process: @process %>
<% end %>

4
app/views/legislation/processes/_header_full.html.erb
View File

@@ -12,10 +12,10 @@
<%= markdown @process.additional_info if @process.additional_info %>
</div>
<a class="button" data-toggle="additional_info"
<button type="button" class="button" data-toggle="additional_info"
<% if banner_color? %>
style="background:<%= process.font_color %>; color:<%= process.background_color %>;"
<% end %>>
<%= t("legislation.processes.header.additional_info") %>
</a>
</button>
<% end %>

4
app/views/legislation/processes/_help_gif.html.erb
View File

@@ -1,10 +1,10 @@
<div class="row">
<div class="small-12 column">
<div class="float-right">
<a class="button hollow" data-toggle="annotator-help">
<button type="button" class="button hollow" data-toggle="annotator-help">
<sub><span class="icon-edit"></span></sub>&nbsp;
<%= t("annotator.help.title") %>
</a>
</button>
<div class="dropdown-pane" id="annotator-help" data-dropdown data-auto-focus="true">
<% if user_signed_in? %>

4
app/views/polls/_gallery.html.erb
View File

@@ -1,8 +1,8 @@
<div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false" data-use-m-u-i="false">
<a data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link hide-for-small-only">
<button type="button" data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link hide-for-small-only">
<span id="zoom_<%= answer.id %>" class="icon-search-plus" data-toggler="icon-search-plus icon-search-minus"></span>
<span class="show-for-sr"><%= t("polls.show.zoom_plus") %></span>
</a>
</button>
<ul class="orbit-container">
<li>

10
app/views/polls/show.html.erb
View File

@@ -63,18 +63,18 @@
<div id="answer_description_<%= answer.id %>" class="answer-description short" data-toggler="short">
<%= wysiwyg(answer.description) %>
</div>
<div class="margin">
<a id="read_more_<%= answer.id %>"
<div class="read-more">
<button type="button" id="read_more_<%= answer.id %>"
data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
data-toggler="hide">
<%= t("polls.show.read_more", answer: answer.title) %>
</a>
<a id="read_less_<%= answer.id %>"
</button>
<button type="button" id="read_less_<%= answer.id %>"
data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
data-toggler="hide"
class="hide">
<%= t("polls.show.read_less", answer: answer.title) %>
</a>
</button>
</div>
</div>
<% end %>

8
app/views/shared/_flag_actions.html.erb
View File

@@ -4,9 +4,9 @@
<span class="divider">&nbsp;|&nbsp;</span>
<% end %>
<a data-toggle="flag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.flag") %>">
<button type="button" data-toggle="flag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.flag") %>">
<span class="icon-flag flag-disable"></span>
</a>
</button>
<span class="dropdown-pane" id="flag-drop-<%= dom_id(flaggable) %>" data-dropdown data-auto-focus="true">
<%= link_to t("shared.flag"), polymorphic_path(flaggable, action: :flag), method: :put, remote: true %>
</span>
@@ -17,9 +17,9 @@
<span class="divider">&nbsp;|&nbsp;</span>
<% end %>
<a data-toggle="unflag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.unflag") %>">
<button type="button" data-toggle="unflag-drop-<%= dom_id(flaggable) %>" title="<%= t("shared.unflag") %>">
<span class="icon-flag flag-active"></span>
</a>
</button>
<span class="dropdown-pane" id="unflag-drop-<%= dom_id(flaggable) %>" data-dropdown data-auto-focus="true">
<%= link_to t("shared.unflag"), polymorphic_path(flaggable, action: :unflag), method: :put, remote: true %>
</span>

4
app/views/verification/residence/new.html.erb
View File

@@ -47,10 +47,10 @@
<%= f.label t("verification.residence.new.document_number") %>
</div>
<div class="inline-block" data-toggle="info-document-number">
<button type="button" class="inline-block" data-toggle="info-document-number">
<span class="icon-help"></span>
<span class="show-for-sr"><%= t("verification.residence.new.document_number_help_title") %></span>
</div>
</button>
<div class="dropdown-pane" id="info-document-number" data-dropdown
data-hover="true" data-hover-pane="true">

2
config/locales/en/general.yml
View File

@@ -946,7 +946,7 @@ en:
help:
alt: Select the text you want to comment and press the button with the pencil.
text: To comment this document you must %{sign_in} or %{sign_up}. Then select the text you want to comment and press the button with the pencil.
title: How I can comment this document?
title: How can I comment this document?
links:
form:
delete_button: Delete

24
spec/shared/system/flaggable.rb
View File

@@ -26,10 +26,10 @@ shared_examples "flaggable" do |factory_name, admin: false|
visit path
within "##{dom_id(flaggable)} .flag-content" do
find(".icon-flag").click
click_button "Flag as inappropriate"
click_link "Flag as inappropriate"
expect(page).to have_css ".flag-active"
expect(page).to have_button "Unflag"
expect(page).to have_link "Unflag", visible: :hidden
expect(page).not_to have_link "Flag as inappropriate", visible: :all
end
@@ -49,12 +49,12 @@ shared_examples "flaggable" do |factory_name, admin: false|
visit path
within "##{dom_id(flaggable)} .flag-content" do
expect(page).to have_css ".flag-active"
expect(page).to have_button "Unflag"
find(".icon-flag").click
click_button "Unflag"
click_link "Unflag"
expect(page).not_to have_css ".flag-active"
expect(page).not_to have_button "Unflag"
expect(page).to have_link "Flag as inappropriate", visible: :hidden
expect(page).not_to have_link "Unflag", visible: :all
end
@@ -72,15 +72,15 @@ shared_examples "flaggable" do |factory_name, admin: false|
visit path
within "##{dom_id(flaggable)} .flag-content" do
find(".icon-flag").click
click_button "Flag as inappropriate"
click_link "Flag as inappropriate"
expect(page).to have_css ".flag-active"
expect(page).to have_button "Unflag"
find(".icon-flag").click
click_button "Unflag"
click_link "Unflag"
expect(page).not_to have_css ".flag-active"
expect(page).not_to have_button "Unflag"
end
visit path
@@ -100,14 +100,14 @@ shared_examples "flaggable" do |factory_name, admin: false|
visit path
within "##{dom_id(flaggable)} > .comment-body .flag-content" do
find(".icon-flag").click
click_button "Flag as inappropriate"
click_link "Flag as inappropriate"
expect(page).to have_css ".flag-active"
expect(page).to have_button "Unflag"
end
within "##{dom_id(child_comment)} .flag-content" do
expect(page).not_to have_css ".flag-active"
expect(page).not_to have_button "Unflag"
end
end
end

15
spec/system/dashboard/dashboard_spec.rb
View File

@@ -41,10 +41,15 @@ describe "Proposal's dashboard" do
expect(page).to have_content(goal.title)
expect(page).not_to have_content(future_goal.title)
find(:css, "#see_complete_course_link").click
click_button "Check out the complete course"
expect(page).to have_content(goal.title)
expect(page).to have_content(future_goal.title)
click_button "Hide course"
expect(page).to have_content(goal.title)
expect(page).not_to have_content(future_goal.title)
end
end
@@ -69,7 +74,7 @@ describe "Proposal's dashboard" do
expect(page).to have_content(action.description)
expect(page).to have_content("This is a really very long description for a proposed")
expect(page).to have_selector("#truncated_description_dashboard_action_#{action_long.id}")
expect(page).to have_selector("a", text: "Show description")
expect(page).to have_button("Show description")
end
scenario "Dashboard progress do not display from the fourth proposed actions", js: true do
@@ -420,9 +425,13 @@ describe "Proposal's dashboard" do
action_5 = create(:dashboard_action, :proposed_action, :active)
visit recommended_actions_proposal_dashboard_path(proposal.to_param)
find(:css, "#see_proposed_actions_link_pending").click
click_button "Check out recommended actions"
expect(page).to have_content(action_5.title)
click_button "Hide recommended actions"
expect(page).not_to have_content(action_5.title)
end
scenario "On recommended actions section display four proposed actions", js: true do

19
spec/system/legislation/draft_versions_spec.rb
View File

@@ -72,6 +72,25 @@ describe "Legislation Draft Versions" do
expect(page).to have_content("Current version")
end
scenario "show more info button", :js do
process.update!(additional_info: "Text for additional info of the process")
visit legislation_process_draft_version_path(process, original)
expect(page).not_to have_content "Text for additional info of the process"
click_button "More information and context"
expect(page).to have_content "Text for additional info of the process"
end
scenario "show help gif", :js do
visit legislation_process_draft_version_path(process, original)
click_button text: "How can I comment this document?"
expect(page).to have_content "select the text you want to comment and press the button with the pencil"
end
context "for final versions" do
it "does not show the comments panel" do
final_version = create(:legislation_draft_version, process: process, title: "Final version",

11
spec/system/legislation/processes_spec.rb
View File

@@ -187,13 +187,16 @@ describe "Legislation" do
end
end
scenario "show additional info button" do
scenario "show additional info button", :js do
process = create(:legislation_process, additional_info: "Text for additional info of the process")
visit legislation_process_path(process)
expect(page).to have_content("Additional information")
expect(page).to have_content("Text for additional info of the process")
expect(page).not_to have_content "Text for additional info of the process"
click_button "Additional information"
expect(page).to have_content "Text for additional info of the process"
end
scenario "do not show additional info button if it is empty" do
@@ -201,7 +204,7 @@ describe "Legislation" do
visit legislation_process_path(process)
expect(page).not_to have_content("Additional information")
expect(page).not_to have_button "Additional information"
end
scenario "Shows another translation when the default locale isn't available" do

12
spec/system/sdg/goals_spec.rb
View File

@@ -106,16 +106,16 @@ describe "SDG Goals", :js do
end
end
scenario "has links to read more and read less for long description" do
scenario "has buttons to read more and read less for long description" do
visit sdg_goal_path(15)
expect(page).to have_css("div.read-more a", text: "Read more about Life on Land")
expect(page).to have_css("div.read-more a", text: "Read less about Life on Land", visible: :hidden)
expect(page).to have_button "Read more about Life on Land"
expect(page).to have_button "Read less about Life on Land", visible: :hidden
find("div.read-more a", text: "Read more about Life on Land").click
click_button "Read more about Life on Land"
expect(page).to have_css("div.read-more a", text: "Read more about Life on Land", visible: :hidden)
expect(page).to have_css("div.read-more a", text: "Read less about Life on Land")
expect(page).to have_button "Read more about Life on Land", visible: :hidden
expect(page).to have_button "Read less about Life on Land"
end
scenario "has tab target section" do