Merge pull request #648 from City-of-Helsinki/UHF-7418_phasing_compon…

…ent_accessibility_changes UHF-7418 Phasing component accessibility changes
City-of-Helsinki · Apr 28, 2023 · fb42a77 · fb42a77
2 parents 4e093b2 + a081eb3
commit fb42a77
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/06_components/paragraphs/_phasing.scss b/src/scss/06_components/paragraphs/_phasing.scss
@@ -41,35 +41,37 @@ $-circle-size--ol-l: $spacing-triple;
     position: absolute;
   }
 
-  &::before {
+  &::after {
     background-color: $color-black;
     height: calc(100% + $-item-gap + $spacing-half); // Height of the line should overlap 16px with the one below it.
     top: 0;
     transform: translateX(calc(var(--lang-direction) * -50%));
     width: 2px;
+    z-index: 0;
   }
 
-  &:first-of-type::before {
+  &:first-of-type::after {
     height: 100%;
     top: calc($-item-padding + var(--item-title-lineheight) * 0.5);
   }
 
-  &:last-of-type::before {
+  &:last-of-type::after {
     height: calc($-item-padding + var(--item-title-lineheight) * 0.5);
   }
 
-  &:only-child::before {
+  &:only-child::after {
     display: none;
   }
 
-  &::after {
+  &::before {
     background-color: $color-white;
     border: 3px solid $color-black;
     border-radius: 50%;
     height: var(--circle-size);
     top: calc($-item-padding + var(--item-title-lineheight) * 0.5);
     transform: translate(calc(var(--lang-direction) * -50%), -50%);
     width: var(--circle-size);
+    z-index: 1;
   }
 }
 
@@ -82,7 +84,7 @@ $-circle-size--ol-l: $spacing-triple;
     --p-left: #{$-item-padding-left--ol-l};
   }
 
-  &::after {
+  &::before {
     align-items: center;
     content: counter(item);
     counter-increment: item;

diff --git a/templates/paragraphs/paragraph--phasing.html.twig b/templates/paragraphs/paragraph--phasing.html.twig
@@ -6,7 +6,7 @@
       component_title_level: phasing_title_level,
       component_description: content.field_description,
       component_content_class: 'phasing',
-      component_content_tag: 'ul',
+      component_content_tag: 'ol',
     }
   %}
     {% block component_content %}