6ea9383743
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.
40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
<div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false" data-use-m-u-i="false">
|
|
<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>
|
|
</button>
|
|
|
|
<ul class="orbit-container">
|
|
<li>
|
|
<button class="orbit-previous">
|
|
<span class="show-for-sr"><%= t("shared.orbit.previous_slide") %></span>◀︎
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="orbit-next">
|
|
<span class="show-for-sr"><%= t("shared.orbit.next_slide") %></span>▶︎
|
|
</button>
|
|
</li>
|
|
|
|
<% answer.images.reverse.each_with_index do |image, index| %>
|
|
<li class="orbit-slide <%= is_active_class(index) %>">
|
|
<%= link_to image.attachment.url(:original), target: "_blank" do %>
|
|
<%= image_tag image.attachment.url(:original),
|
|
class: "orbit-image",
|
|
alt: image.title.unicode_normalize %>
|
|
<% end %>
|
|
<span class="orbit-caption"><%= image.title.unicode_normalize %></span>
|
|
</li>
|
|
<% end %>
|
|
|
|
</ul>
|
|
|
|
<nav class="orbit-bullets">
|
|
<% answer.images.each_with_index do |image, index| %>
|
|
<button class="<%= is_active_class(index) %>" data-slide="<%= index %>">
|
|
<span class="show-for-sr"><%= image.title.unicode_normalize %></span>
|
|
</button>
|
|
<% end %>
|
|
</nav>
|
|
</div>
|