a11yist/app/views/elements/_element.html.erb

<div id="<%= dom_id element %>" class="mb-5">
  <%= turbo_frame_tag dom_id(element, :frame) do %>
    <div class="d-flex border-bottom mb-3">
      <h3 class="h4">
          <i class="bi bi-boxes">
          </i>
        <span id="<%= dom_id(element, :title) %>">
          <%= element.page.position %>.<%= element.position %>
          <%= element.title %>
        </span>
      </h3>
      <%= element_menu(element) %>
    </div>
    
    <div class="d-flex flex-column flex-sm-row">
      <% if element.description %>
        <div class="mb-3 flex-fill">
          <%= element.description %>
        </div>
      <% end %>
      <% safe_display(element.screenshot) do |s| %> 
        <div class="mb-3" data-controller="lightbox">
          <%= link_to(s) do %>
            <%= image_tag(s.variant(:thumbnail), class: "img-fluid", alt: "Screenshot des getesteten Elements") %>
          <% end rescue nil %>
        </div>
      <% end %>
    </div>
  <% end %>

  <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3" data-controller="sortable" data-form-name="success_criterion" data-position-attribute= "position" data-draggable-selector=".draggable">
    <% element.success_criteria.each do |sc| %>
      <%= render sc %>
    <% end %>
  </div>

  <div class="mb-3">
    <%= turbo_frame_tag dom_id(element, "new_success_criterion_frame") do %>
      <%= render partial: "elements/new_success_criterion_button", locals: { element: element } %>
    <% end %>
  </div>
</div>