fix accessibility issues

ONSdigital · Dec 4, 2024 · f6ab261 · f6ab261
1 parent 4ce8321
commit f6ab261
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 24 deletions.
diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss
@@ -65,24 +65,15 @@
             gap: 0.5rem 2.5rem;
 
             .ons-grid__col {
-                flex: none;
                 width: auto;
-                display: block;
             }
 
             .ons-description-list__value {
                 float: none;
-                grid-column: auto;
-            }
-
-            .ons-description-list__values {
-                display: flex;
-                flex-wrap: wrap;
             }
 
             .ons-description-list__term {
                 margin-right: 1rem;
-                grid-column: auto;
             }
         }
     }

diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -15,21 +15,20 @@
                         {{ item.term }}
                     </dt>
                 {% endif %}
-                <span class="ons-description-list__values">
-                    {% for descriptionItem in item.descriptions %}
-                        {% if descriptionItem.description | length %}
-                            <dd
-                                {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
-                                class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
-                            >
-                                {{- descriptionItem.description -}}
-                                {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%}
-                                    <span class="ons-description-list-inline-comma">, </span>
-                                {% endif %}
-                            </dd>
-                        {% endif %}
-                    {% endfor %}
-                </span>
+                {% for descriptionItem in item.descriptions %}
+                    {% if descriptionItem.description | length %}
+                        <dd
+                            {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
+                            class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
+                        >
+                            {{- descriptionItem.description -}}
+
+                            {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%}
+                                <span class="ons-description-list-inline-comma">, </span>
+                            {% endif %}
+                        </dd>
+                    {% endif %}
+                {% endfor %}
             </div>
         {% endfor %}
     </dl>