govuk_publishing_components 35.16.0 → 35.16.1

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -182,7 +182,7 @@ $after-button-padding-left: govuk-spacing(4);
       }
     }
 
-    &:after {
+    &::after {
       @include make-selectable-area-bigger;
       @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding);
     }
@@ -193,14 +193,14 @@ $after-button-padding-left: govuk-spacing(4);
     font-size: govuk-px-to-rem(16px);
     height: govuk-spacing(4);
 
-    &:before {
+    &::before {
       @include chevron(govuk-colour("white"), true);
     }
 
     &:hover {
       color: govuk-colour("mid-grey");
 
-      &:after {
+      &::after {
         background: govuk-colour("mid-grey");
       }
     }
@@ -216,7 +216,7 @@ $after-button-padding-left: govuk-spacing(4);
         box-shadow: none;
         color: $govuk-focus-text-colour;
 
-        &:after {
+        &::after {
           background: $govuk-focus-text-colour;
         }
       }
@@ -235,12 +235,12 @@ $after-button-padding-left: govuk-spacing(4);
       &:hover {
         color: govuk-colour("mid-grey");
 
-        &:after {
+        &::after {
           background: govuk-colour("mid-grey");
         }
       }
 
-      &:after {
+      &::after {
         background: none;
       }
     }
@@ -255,14 +255,14 @@ $after-button-padding-left: govuk-spacing(4);
       padding: 0;
       margin: 0;
 
-      &:after {
+      &::after {
         @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: 100%);
       }
     }
     // stylelint-enable max-nesting-depth
   }
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 }
@@ -299,7 +299,7 @@ $after-button-padding-left: govuk-spacing(4);
     &:hover {
       background: govuk-colour("black");
 
-      &:before {
+      &::before {
         left: 0;
         right: 0;
       }
@@ -308,12 +308,12 @@ $after-button-padding-left: govuk-spacing(4);
     &:focus {
       background: $govuk-focus-colour;
 
-      &:before {
+      &::before {
         content: none;
       }
     }
 
-    &:after {
+    &::after {
       left: 0;
       right: 0;
       width: 100%;
@@ -332,8 +332,8 @@ $after-button-padding-left: govuk-spacing(4);
         background: $govuk-focus-colour;
       }
 
-      &:after,
-      &:hover:after {
+      &::after,
+      &:hover::after {
         background: $govuk-focus-colour;
       }
     }
@@ -364,19 +364,19 @@ $after-button-padding-left: govuk-spacing(4);
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
 
-  &:after {
+  &::after {
     @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right);
   }
 
   &:hover {
     color: govuk-colour("mid-grey");
 
-    &:after {
+    &::after {
       background: govuk-colour("mid-grey");
     }
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      &:before {
+      &::before {
         border-color: govuk-colour("mid-grey");
       }
     }
@@ -411,11 +411,11 @@ $after-button-padding-left: govuk-spacing(4);
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
         color: govuk-colour("black");
 
-        &:after {
+        &::after {
           background: govuk-colour("black");
         }
 
-        &:before {
+        &::before {
           @include chevron(govuk-colour("black"), true);
         }
       }
@@ -428,22 +428,23 @@ $after-button-padding-left: govuk-spacing(4);
     box-shadow: none;
 
     &:hover {
-      &:after {
+      &::after {
         background-color: govuk-colour("black");
       }
     }
 
-    &:after {
+    &::after {
       background-color: govuk-colour("black");
     }
-
+    // stylelint-disable max-nesting-depth
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
       border-color: $govuk-focus-colour;
 
-      &:before {
+      &::before {
         @include chevron(govuk-colour("black"), true);
       }
     }
+    // stylelint-enable max-nesting-depth
   }
 
   // Undoes the :focus styles *only* for browsers that support :focus-visible.
@@ -453,16 +454,17 @@ $after-button-padding-left: govuk-spacing(4);
     box-shadow: none;
     color: govuk-colour("white");
 
+    // stylelint-disable max-nesting-depth
     &:hover {
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        &:before {
+        &::before {
           @include chevron(govuk-colour("mid-grey"), true);
         }
 
         color: govuk-colour("mid-grey");
       }
 
-      &:after {
+      &::after {
         background: govuk-colour("mid-grey");
       }
     }
@@ -471,11 +473,12 @@ $after-button-padding-left: govuk-spacing(4);
       border-color: $button-pipe-colour;
 
       @include govuk-media-query($from: 360px) {
-        &:before {
+        &::before {
           @include chevron(govuk-colour("white"), true);
         }
       }
     }
+    // stylelint-enable max-nesting-depth
   }
 
   // Open button modifier
@@ -485,7 +488,7 @@ $after-button-padding-left: govuk-spacing(4);
       @include govuk-focused-text;
       box-shadow: none;
 
-      &:after {
+      &::after {
         background-color: govuk-colour("black");
       }
 
@@ -494,7 +497,7 @@ $after-button-padding-left: govuk-spacing(4);
         border-color: $govuk-focus-colour;
 
         @include govuk-media-query($from: 360px) {
-          &:before {
+          &::before {
             @include chevron(govuk-colour("black"), true);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
@@ -505,7 +508,7 @@ $after-button-padding-left: govuk-spacing(4);
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
 
-      &:after {
+      &::after {
         background-color: $govuk-link-colour;
       }
 
@@ -514,7 +517,7 @@ $after-button-padding-left: govuk-spacing(4);
         border-color: govuk-colour("light-grey");
 
         @include govuk-media-query($from: 360px) {
-          &:before {
+          &::before {
             @include chevron($govuk-link-colour);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
@@ -533,7 +536,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding: govuk-spacing(1) govuk-spacing(4);
 
   @include govuk-media-query($from: 360px) {
-    &:before {
+    &::before {
       @include chevron(govuk-colour("white"));
     }
   }
@@ -597,11 +600,13 @@ $after-button-padding-left: govuk-spacing(4);
       box-shadow: none;
       color: $govuk-focus-colour;
 
+      // stylelint-disable max-nesting-depth
       @include govuk-media-query($from: 360px) {
-        &:before {
+        &::before {
           @include chevron($govuk-focus-colour, true);
         }
       }
+      // stylelint-enable max-nesting-depth
     }
 
     @include focus-not-focus-visible {
@@ -708,14 +713,14 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 
   @include govuk-media-query($from: "desktop") {
     padding: 0;
 
-    &:after {
+    &::after {
       @include make-selectable-area-bigger;
     }
   }
@@ -726,7 +731,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
     height: calc(100% - 20px);
   }
@@ -756,7 +761,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   padding: 0;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -63,7 +63,7 @@
   }
 
   // Extend the touch area of the button to span the heading
-  &:after {
+  &::after {
     content: "";
     position: absolute;
     top: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -89,7 +89,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   }
 
   // Create inner chevron arrow
-  &:after {
+  &::after {
     content: "";
     box-sizing: border-box;
     display: block;
@@ -128,7 +128,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
       background: govuk-colour("black");
     }
 
-    .gem-c-step-nav__chevron:after {
+    .gem-c-step-nav__chevron::after {
       color: govuk-colour("light-grey");
     }
 
@@ -145,7 +145,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
       background: govuk-colour("black");
     }
 
-    .gem-c-step-nav__chevron:after {
+    .gem-c-step-nav__chevron::after {
       color: $govuk-focus-colour;
     }
 
@@ -234,7 +234,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   list-style: none;
 
   // line down the side of a step
-  &:after {
+  &::after {
     @include step-nav-vertical-line;
     @include step-nav-line-position;
     top: govuk-em(govuk-spacing(3), 16);
@@ -244,7 +244,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     @include govuk-media-query($from: tablet) {
       padding-left: govuk-em(govuk-spacing(9), 16);
 
-      &:after { // stylelint-disable-line max-nesting-depth
+      &::after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
         top: govuk-em(govuk-spacing(6), 16);
       }
@@ -254,7 +254,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step:last-child {
   // little dash at the bottom of the line
-  &:before {
+  &::before {
     content: "";
     position: absolute;
     z-index: 6;
@@ -266,23 +266,23 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
     border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
-  &:after {
+  &::after {
     height: -webkit-calc(100% - #{govuk-spacing(3)}); // fallback for iphone 4
     height: calc(100% - #{govuk-spacing(3)});
   }
 
-  .gem-c-step-nav__help:after {
+  .gem-c-step-nav__help::after {
     height: 100%;
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      &:before {
+      &::before {
         margin-left: $number-circle-size-large / 4;
         width: $number-circle-size-large / 2;
       }
 
-      &:after {
+      &::after {
         height: calc(100% - #{govuk-spacing(6)});
       }
     }
@@ -290,10 +290,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__step--active {
-  &:last-child:before,
+  &:last-child::before,
   .gem-c-step-nav__circle--number,
-  &:after,
-  .gem-c-step-nav__help:after {
+  &::after,
+  .gem-c-step-nav__help::after {
     border-color: govuk-colour("black");
   }
 }
@@ -365,7 +365,11 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   $shadow-colour: govuk-colour("white");
 
   // to make numbers readable for users zooming text only in browsers such as Firefox
-  text-shadow: 0 -#{$shadow-offset} 0 $shadow-colour, $shadow-offset 0 0 $shadow-colour, 0 $shadow-offset 0 $shadow-colour, -#{$shadow-offset} 0 0 $shadow-colour;
+  text-shadow:
+    0 -#{$shadow-offset} 0 $shadow-colour,
+    $shadow-offset 0 0 $shadow-colour,
+    0 $shadow-offset 0 $shadow-colour,
+    -#{$shadow-offset} 0 0 $shadow-colour;
 }
 
 .gem-c-step-nav__circle-step-label,
@@ -468,13 +472,13 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   margin-left: $links-margin;
   list-style: disc;
 
-  .gem-c-step-nav__list-item--active:before {
+  .gem-c-step-nav__list-item--active::before {
     left: -(govuk-spacing(6) + govuk-spacing(3)) - $links-margin;
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      .gem-c-step-nav__list-item--active:before {
+      .gem-c-step-nav__list-item--active::before {
         left: -(govuk-spacing(9)) - $links-margin;
       }
     }
@@ -497,7 +501,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__list-item--active {
   position: relative;
 
-  &:before {
+  &::before {
     box-sizing: border-box;
     content: "";
     position: absolute;
@@ -513,7 +517,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      &:before {
+      &::before {
         left: -(govuk-spacing(9));
         margin-left: ($number-circle-size-large / 2);
       }
@@ -530,7 +534,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   font-weight: normal;
   color: govuk-colour("dark-grey", $legacy: "grey-1");
 
-  &:before {
+  &::before {
     content: " \2013\00a0"; // dash followed by  
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_table.scss

@@ -44,7 +44,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       @include govuk-focused-text;
     }
 
-    .app-table__sort-link:after {
+    .app-table__sort-link::after {
       content: "";
       position: absolute;
       top: 5px;
@@ -52,7 +52,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       @include govuk-shape-arrow($direction: up, $base: $sort-link-arrow-size-small, $display: block);
     }
 
-    .app-table__sort-link:before {
+    .app-table__sort-link::before {
       content: "";
       position: absolute;
       top: 13px;
@@ -80,12 +80,12 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       }
     }
 
-    .app-table__sort-link--ascending:before,
-    .app-table__sort-link--descending:before {
+    .app-table__sort-link--ascending::before,
+    .app-table__sort-link--descending::before {
       content: none;
     }
 
-    .app-table__sort-link--ascending:after {
+    .app-table__sort-link--ascending::after {
       content: "";
       position: absolute;
       top: $sort-link-arrow-spacing;
@@ -95,7 +95,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
       @include govuk-shape-arrow($direction: up, $base: $sort-link-arrow-size, $display: inline-block);
     }
 
-    .app-table__sort-link--descending:after {
+    .app-table__sort-link--descending::after {
       content: "";
       position: absolute;
       top: $sort-link-arrow-spacing;

data/app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss

@@ -10,7 +10,8 @@
 }
 
 // We have some styles within GOVUK (.content-block) which can leak into the list styles for this component.
-// These styles are defined in Static: https://github.com/alphagov/static/blob/a815620cada7ea1c65428c1c3b3ac4dbe28977bf/app/assets/stylesheets/helpers/_text.scss
+// These styles are defined in Static:
+// https://github.com/alphagov/static/blob/a815620cada7ea1c65428c1c3b3ac4dbe28977bf/app/assets/stylesheets/helpers/_text.scss
 // This sets more specific selectors so those unwanted styles are overidden
 ul.govuk-tabs__list { // stylelint-disable-line selector-no-qualifying-type
   margin: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -17,7 +17,8 @@
       width: 100%;
       box-sizing: border-box;
 
-      &:before {
+      // stylelint-disable max-nesting-depth
+      &::before {
         background-color: govuk-colour("black");
         border-radius: 50%;
         color: govuk-colour("white");
@@ -37,6 +38,7 @@
           content: "#{$i}";
         }
       }
+      // stylelint-enable max-nesting-depth
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -49,14 +49,14 @@
         padding-left: govuk-spacing(6);
       }
 
-      &:before {
+      &::before {
         content: "\201C";
         float: left;
         clear: both;
         margin-left: (- govuk-spacing(3));
       }
 
-      &:last-child:after {
+      &:last-child::after {
         content: "\201D";
       }
     }
@@ -78,14 +78,14 @@
         padding-left: 0;
       }
 
-      &:before {
+      &::before {
         content: "\201D";
         float: right;
         margin-right: (- govuk-spacing(3));
         margin-left: 0;
       }
 
-      &:last-child:after {
+      &:last-child::after {
         content: "\201C";
       }
     }

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_media-down.scss

@@ -10,11 +10,11 @@ $is-ie: false !default;
 @mixin media-down($size: false, $max-width: false, $min-width: false) {
   @if $is-ie == false {
     @if $size == mobile {
-      @media (max-width: 640px) {
+      @media (max-width: 640px) { // stylelint-disable-line media-feature-range-notation
         @content;
       }
     } @else if $size == tablet {
-      @media (max-width: 800px) {
+      @media (max-width: 800px) { // stylelint-disable-line media-feature-range-notation
         @content;
       }
     }

data/app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -99,7 +99,7 @@
     <% end %>
 
     <% if attachment.preview_url.present? %>
-      <%= tag.p link_to(t("components.attachment.preview_link"), attachment.preview_url, class: "govuk-link"), class: "gem-c-attachment__metadata" %>
+      <%= tag.p link_to(t("components.attachment.preview_link"), attachment.preview_url, class: "govuk-link", "aria-label": t("components.attachment.preview_aria_label", title: attachment.title)), class: "gem-c-attachment__metadata" %>
     <% end %>
 
     <% if attachment.is_official_document && !hide_order_copy_link %>

data/app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -14,9 +14,10 @@
 
   ga4_tracking ||= false
   ga4_data = {
-      event_name: "navigation",
-      type: "content",
-      section: t("components.contents_list.contents", locale: :en) || ""
+    event_name: "navigation",
+    type: "contents list",
+    section: t("components.contents_list.contents", locale: :en) || "",
+    index_total: cl_helper.get_index_total
   } if ga4_tracking
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -37,15 +38,15 @@
     <% end %>
 
     <ol class="gem-c-contents-list__list">
+      <% index_link = 1 if ga4_tracking %>
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
-             if ga4_tracking
+            if ga4_tracking
               ga4_data[:index] = {
-                  "index_link": position,
+                "index_link": index_link,
               }
-              ga4_data[:index_total] = contents.length
-             end
+            end
           %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
@@ -59,11 +60,18 @@
               ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
             }
           %>
-
+          <% index_link += 1 if ga4_tracking %>
           <% if contents_item[:items] && contents_item[:items].any? %>
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
+                  <%
+                    if ga4_tracking
+                      ga4_data[:index] = {
+                        "index_link": index_link,
+                      }
+                    end
+                  %>
                   <%= link_to_if !nested_contents_item[:active], nested_contents_item[:text], nested_contents_item[:href],
                     class: link_classes,
                     data: {
@@ -72,13 +80,15 @@
                       track_label: nested_contents_item[:href],
                       track_options: {
                         dimension29: nested_contents_item[:text]
-                      }
+                      },
+                      ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
                     }
                   %>
                 </li>
+                <% index_link += 1 if ga4_tracking %>
               <% end %>
             </ol>
-            <% end %>
+          <% end %>
         </li>
       <% end %>
     </ol>

data/app/views/govuk_publishing_components/components/_option_select.html.erb

@@ -35,7 +35,7 @@
 <% end %>
 
 <div
-  class="gem-c-option-select" data-module="option-select" data-ga4-change-category="update-filter checkbox" data-ga4-section="<%= title %>"
+  class="gem-c-option-select" data-module="option-select"
   <% if local_assigns.include?(:closed_on_load) && closed_on_load %>data-closed-on-load="true"<% end %>
   <% if local_assigns.include?(:closed_on_load_mobile) && closed_on_load_mobile %>data-closed-on-load-mobile="true"<% end %>
   <% if local_assigns.include?(:aria_controls_id) %>data-input-aria-controls="<%= aria_controls_id %>"<% end %>
@@ -43,8 +43,8 @@
 >
   <h3 class="gem-c-option-select__heading js-container-heading">
     <span class="gem-c-option-select__title js-container-button" id="<%= title_id %>"><%= title %></span>
-    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
-    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
+    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
+    <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="gem-c-option-select__icon gem-c-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
   </h3>
 
   <%= content_tag(:div, role: "group", aria: { labelledby: title_id }, class: classes, id: options_container_id, tabindex: "-1") do %>