Skip to content

Commit 2da7fe9

Browse files
ahukkanenahukkanen
committed
[TAC019] Add unique link purposes according to WCAG 2.1 - 2.4.4
All links and buttons need to have a unique context names. Clarify such links as "read more", "more info", "support", "see all" "endorse", "unendorse", "follow", "stop following", etc. with the name of the resource to clarify their purposes.
1 parent eb45ae3 commit 2da7fe9

42 files changed

Lines changed: 194 additions & 87 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎decidim-accountability/config/locales/en.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ en:
219219
results: Results
220220
participatory_spaces:
221221
highlighted_results:
222-
see_all: See all (%{count})
222+
see_all: See all results (%{count})
223223
resource_links:
224224
included_projects:
225225
result_project: Projects included in this result

‎decidim-accountability/config/locales/fi.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ fi:
218218
results: Tulokset
219219
participatory_spaces:
220220
highlighted_results:
221-
see_all: Näytä kaikki (%{count})
221+
see_all: Näytä kaikki tulokset (%{count})
222222
resource_links:
223223
included_projects:
224224
result_project: Tähän tulokseen liittyvät suunnitelmat

‎decidim-accountability/config/locales/sv.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ sv:
218218
results: Resultat
219219
participatory_spaces:
220220
highlighted_results:
221-
see_all: Visa alla (%{count})
221+
see_all: Visa alla resultat (%{count})
222222
resource_links:
223223
included_projects:
224224
result_project: Projekt som ingår i detta resultat

‎decidim-assemblies/app/cells/decidim/assemblies/content_blocks/highlighted_assemblies/show.erb‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,13 @@
66
large-up-4 card-grid">
77
<% highlighted_assemblies.each do |assembly| %>
88
<div class="column">
9-
<article class="card card--assembly card--mini">
10-
<%= link_to decidim_assemblies.assembly_path(assembly), class: "card__link" do %>
11-
<span class="show-for-sr"><%= translated_attribute assembly.title %></span>
12-
<div class="card__image-top"
13-
style="background-image:url(<%= assembly.hero_image.url %>)"></div>
14-
<% end %>
9+
<%= link_to decidim_assemblies.assembly_path(assembly), class: "card card--assembly card--mini", "aria-role": "article" do %>
10+
<div aria-hidden="true" class="card__image-top"
11+
style="background-image:url(<%= assembly.hero_image.url %>)"></div>
1512
<div class="card__content">
16-
<%= link_to decidim_assemblies.assembly_path(assembly), class: "card__link" do %>
17-
<span class="card__title"><%= translated_attribute assembly.title %></span>
18-
<% end %>
13+
<span class="card__title card__link"><%= translated_attribute assembly.title %></span>
1914
</div>
20-
</article>
15+
<% end %>
2116
</div>
2217
<% end %>
2318
</div>

‎decidim-conferences/app/cells/decidim/conferences/content_blocks/highlighted_conferences/show.erb‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,13 @@
66
large-up-4 card-grid">
77
<% highlighted_conferences.each do |conference| %>
88
<div class="column">
9-
<article class="card card--conference card--mini">
10-
<%= link_to decidim_conferences.conference_path(conference), class: "card__link" do %>
11-
<span class="show-for-sr"><%= translated_attribute conference.title %></span>
12-
<div class="card__image-top"
13-
style="background-image:url(<%= conference.hero_image.url %>)"></div>
14-
<% end %>
9+
<%= link_to decidim_conferences.conference_path(conference), class: "card card--conference card--mini", "aria-role": "article" do %>
10+
<div aria-hidden="true" class="card__image-top"
11+
style="background-image:url(<%= conference.hero_image.url %>)"></div>
1512
<div class="card__content">
16-
<%= link_to decidim_conferences.conference_path(conference), class: "card__link" do %>
17-
<span class="card__title"><%= translated_attribute conference.title %></span>
18-
<% end %>
13+
<span class="card__title card__link"><%= translated_attribute conference.title %></span>
1914
</div>
20-
</article>
15+
<% end %>
2116
</div>
2217
<% end %>
2318
</div>

‎decidim-core/app/assets/stylesheets/decidim/modules/_cards.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ $datetime-bg: var(--primary);
2828
background: $card-bg;
2929
border: $card-border;
3030
border-radius: $card-border-radius;
31-
overflow: hidden;
31+
// Keep visible for accessibility (active/focused card as a link)
32+
overflow: visible;
3233

3334
@include modifiers(border-top-color, (muted: rgba($muted, .3))){
3435
border-top-width: $card-border-top-width;
@@ -39,6 +40,18 @@ $datetime-bg: var(--primary);
3940
}
4041
}
4142

43+
a.card{
44+
&:active,
45+
&:focus{
46+
outline: 2px solid $secondary;
47+
48+
h2,
49+
h3{
50+
outline: 2px solid $secondary;
51+
}
52+
}
53+
}
54+
4255
.card--nomargin{
4356
margin-bottom: 0;
4457
}
@@ -449,7 +462,9 @@ a .card__title{
449462
text-decoration: underline;
450463
}
451464

465+
&:active,
452466
&:focus{
467+
z-index: 2; // Raise the focus border on top of overflowing elements
453468
outline: 2px solid $secondary;
454469

455470
h2,
@@ -514,9 +529,10 @@ a .card__title{
514529
flex-grow: 1;
515530
flex-shrink: 1;
516531
display: inline-flex;
517-
overflow: hidden;
518532
align-items: center;
519533
padding: 1rem 1rem 1rem 0;
534+
// Keep visible for accessibility (active/focused card as a link)
535+
overflow: visible;
520536

521537
&.card--list__text--top{
522538
align-items: start;

‎decidim-core/app/cells/decidim/content_blocks/how_to_participate/show.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<div class="row">
4242
<div class="columns small-centered small-10
4343
smallmedium-8 medium-6 large-4">
44-
<%= link_to t("decidim.pages.home.extended.more_info"), decidim.page_path("faq"), class: "button expanded hollow button--sc" %>
44+
<%= link_to t("decidim.pages.home.extended.more_info", resource_name: translated_attribute(current_organization.name, current_organization)), decidim.page_path("faq"), class: "button expanded hollow button--sc" %>
4545
</div>
4646
</div>
4747
</div>

‎decidim-core/app/cells/decidim/endorsement_buttons/select_identity_button.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<%= javascript_include_tag "decidim/identity_selector_dialog" %>
22
<button id="select-identity-button" type="button" name="button" class="button small compact light button--sc secondary <%= fully_endorsed?(resource, current_user) && "success" %>">
33
<%= endorse_translated %>
4+
<%= render_screen_reader_context_title %>
45
</button>
56

67
<div class="reveal collapse"

‎decidim-core/app/cells/decidim/endorsement_buttons_cell.rb‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ class EndorsementButtonsCell < Decidim::ViewModel
77
include LayoutHelper
88
include CellsHelper
99
include EndorsableHelper
10+
include ResourceHelper
11+
include Decidim::SanitizeHelper
1012

1113
delegate :current_user, to: :controller, prefix: false
1214
delegate :current_settings, to: :controller, prefix: false
@@ -64,7 +66,15 @@ def render_endorsements_count
6466
# Renders the endorsements button but disabled.
6567
# To be used to let the user know that endorsements are enabled but are blocked or cant participate.
6668
def render_disabled_endorsements_button
67-
content_tag :span, endorse_translated, class: "#{card_button_html_class} #{endorsement_button_classes(false)} disabled", disabled: true, title: endorse_translated
69+
content_tag :span, class: "#{card_button_html_class} #{endorsement_button_classes(false)} disabled", disabled: true, title: endorse_translated do
70+
endorse_translated + render_screen_reader_context_title
71+
end
72+
end
73+
74+
def render_screen_reader_context_title
75+
content_tag :span, class: "show-for-sr" do
76+
decidim_html_escape(resource_title(resource))
77+
end
6878
end
6979

7080
# Returns the css classes used for proposal endorsement button in both proposals list and show pages
@@ -99,11 +109,15 @@ def render_user_identity_endorse_button
99109
elsif resource.endorsed_by?(current_user)
100110
unendorse_label = t("decidim.endorsement_buttons_cell.already_endorsed")
101111
destroy_endorsement_url = path_to_destroy_endorsement(resource)
102-
action_authorized_button_to(:endorse, unendorse_label, destroy_endorsement_url, resource: resource, method: :delete, remote: true,
103-
class: "button #{endorsement_button_classes} success", id: "endorsement_button")
112+
action_authorized_button_to(:endorse, destroy_endorsement_url, resource: resource, method: :delete, remote: true,
113+
class: "button #{endorsement_button_classes} success", id: "endorsement_button") do
114+
unendorse_label + render_screen_reader_context_title
115+
end
104116
else
105-
action_authorized_button_to(:endorse, endorse_translated, path_to_create_endorsement(resource), resource: resource, remote: true,
106-
class: "button #{endorsement_button_classes} secondary")
117+
action_authorized_button_to(:endorse, path_to_create_endorsement(resource), resource: resource, remote: true,
118+
class: "button #{endorsement_button_classes} secondary") do
119+
endorse_translated + render_screen_reader_context_title
120+
end
107121
end
108122
end
109123
end
@@ -143,16 +157,19 @@ def endorsement_identity_presenter(endorsement)
143157

144158
def render_user_login_button
145159
action_authorized_button_to(:endorse,
146-
endorse_translated,
147160
path_to_create_endorsement(resource),
148161
resource: resource,
149-
class: "button #{endorsement_button_classes} secondary")
162+
class: "button #{endorsement_button_classes} secondary") do
163+
endorse_translated + render_screen_reader_context_title
164+
end
150165
end
151166

152167
def render_verification_modal
153-
button_to(endorse_translated, endorsement_path(resource),
168+
button_to(endorsement_path(resource),
154169
data: { open: "authorizationModal", "open-url": modal_path(:endorse, resource) },
155-
class: "#{card_button_html_class} #{endorsement_button_classes(false)} secondary")
170+
class: "#{card_button_html_class} #{endorsement_button_classes(false)} secondary") do
171+
endorse_translated + render_screen_reader_context_title
172+
end
156173
end
157174

158175
def endorsements_blocked_or_user_can_not_participate?

‎decidim-core/app/cells/decidim/fingerprint/show.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="tech-info">
2-
<a href="#" onclick="event.preventDefault();" data-open="<%= modal_name %>"><%= t "decidim.fingerprint.check" %></a>
2+
<a href="#" onclick="event.preventDefault();" data-open="<%= modal_name %>"><%= t "decidim.fingerprint.check", resource_name: decidim_html_escape(resource_title(model)) %></a>
33
</div>
44

55
<div id="<%= modal_name %>" class="reveal fingerprint-dialog" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

0 commit comments

Comments
 (0)