fix: call-to-action, accordion, tags, and filter list state styling

src/assets/styles/components/_accordion.scss

@@ -44,20 +44,28 @@
 .accordion__control {
 	@extend %interactive;
 
-	--border-width: #{rem(2)};
+	--border-width: #{rem(1)};
 	--color: var(--blue-500);
 	--background-color: transparent;
 	--hover-color: var(--blue-400);
 	--hover-background-color: var(--background-color);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
-	--focus-background-color: var(--blue-500);
+	--outline-color: var(--parent-background-color);
+	--active-color: var(--off-white);
+	--active-background-color: var(--blue-500);
+	--active-border-color: var(--blue-500);
+	--focus-background-color: var(--parent-background-color);
+	--focus-color: var(--blue-500);
+
 	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--outline-color),
-		0 0 0 calc(2 * var(--border-width)) var(--focus-background-color);
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
+
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
 
 	border: 0;
-	border-top: solid var(--border-width) var(--color);
+	border-top: solid calc(2 * var(--border-width)) var(--color);
 	display: block;
 	font-family: $font-family-sans;
 	font-size: rem(20);
@@ -78,9 +86,12 @@
 	--background-color: transparent;
 	--outline-color: var(--dark-mint-500);
 	--hover-color: var(--off-white);
-	--active-color: var(--blue-200);
-	--focus-color: var(--dark-mint-500);
-	--focus-background-color: var(--blue-200);
+	--active-color: var(--parent-background-color);
+	--active-background-color: var(--blue-200);
+	--active-border-color: var(--blue-200);
+	--focus-background-color: var(--parent-background-color);
+	--focus-border-color: var(--blue-200);
+	--focus-color: var(--off-white);
 }
 
 .accordion__control svg {
@@ -95,15 +106,20 @@
 }
 
 .accordion__control:hover {
-	border-top: solid var(--border-width) var(--blue-300);
+	border-top: solid calc(2 * var(--border-width)) var(--blue-300);
 
 	svg {
 		color: var(--blue-300);
 	}
 }
 
 .accordion__control:active {
-	border-top-color: var(--active-color);
+	border-top-color: var(--active-background-color);
+	margin-left: rem(-16);
+	margin-right: rem(-16);
+	padding-left: rem(16);
+	padding-right: rem(16);
+	width: calc(100% + #{rem(32)});
 
 	svg {
 		color: inherit;
@@ -127,17 +143,12 @@
 }
 
 .accordion__control:focus:hover {
-	border-top-color: transparent;
+	border-top-color: var(--parent-background-color);
 }
 
 .accordion__control:focus:active,
 .accordion__control:focus:hover:active {
-	border-top-color: var(--active-color);
-	margin-left: 0;
-	margin-right: 0;
-	padding-left: 0;
-	padding-right: 0;
-	width: 100%;
+	border-top-color: var(--active-background-color);
 }
 
 .accordion__control[aria-expanded="true"] {
@@ -148,9 +159,10 @@
 	--background-color: var(--expanded-background-color);
 	--active-background-color: var(--expanded-background-color);
 	--color: var(--expanded-color);
+	--focus-color: var(--off-white);
 
 	border-top-color: transparent;
-	box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--expanded-background-color);
+	box-shadow: 0 0 0 calc(4 * var(--border-width)) var(--expanded-background-color);
 	margin-left: rem(-16);
 	margin-right: rem(-16);
 	padding-left: rem(16);
@@ -175,7 +187,13 @@
 	}
 }
 
+.accordion__control[aria-expanded="true"]:active,
+.accordion__control[aria-expanded="true"]:focus {
+	border-top-color: var(--background-color);
+}
+
 .accordion__control[aria-expanded="true"]:focus {
+	--outline-color: var(--active-color);
 	box-shadow: var(--focus-box-shadow);
 }
 

src/assets/styles/components/_call-to-action.scss

@@ -1,9 +1,6 @@
 .cta {
 	@extend %interactive;
-
-	--visited-color: var(--off-white);
-	--visited-background-color: var(--blue-600);
-
+
 	border-radius: rem(3);
 	display: block;
 	font-family: $font-family-sans;
@@ -24,11 +21,6 @@
 		margin-left: 0.25em;
 	}
 
-	&:visited {
-		background-color: var(--visited-background);
-		color: var(--visited-color);
-	}
-
 	&:hover,
 	&:active,
 	&:focus {
@@ -43,9 +35,19 @@
 	--color: var(--blue-500);
 	--outline-color: var(--blue-500);
 	--background-color: var(--off-white);
+	--hover-color: var(--color);
 	--hover-background-color: var(--blue-50);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
+	--active-color: var(--off-white);
+	--active-background-color: var(--parent-background-color);
+	--active-border-color: var(--off-white);
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--active-border-color) inset,
+		0 0 0 calc(1 * var(--border-width)) var(--active-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--active-border-color);
 	--focus-background-color: var(--background-color);
 	--focus-color: var(--blue-500);
+	--focus-border-color: var(--background-color);
+	--focus-box-shadow:
+		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--focus-border-color);
 }

src/assets/styles/components/_filter-sort.scss

@@ -33,6 +33,10 @@
 }
 
 .filters {
+	label {
+		font-weight: $font-weight-normal;
+	}
+
 	@include breakpoint-down(md) {
 		display: none;
 
@@ -82,10 +86,13 @@
 			--border-width: #{rem(1)};
 			--color: var(--off-white);
 			--hover-color: var(--off-white);
-			--active-color: var(--white);
-			--focus-background-color: var(--blue-600);
-			--focus-box-shadow: none;
-			--focus-color: var(--color);
+			--hover-underline-color: var(--blue-300);
+			--active-color: var(--parent-background-color);
+			--active-background-color: var(--blue-200);
+			--active-border-color: var(--blue-200);
+			--focus-background-color: var(--parent-background-color);
+			--focus-border-color: var(--blue-200);
+			--focus-color: var(--off-white);
 
 			border-top-color: var(--dark-mint-500);
 			height: rem(69);
@@ -95,19 +102,51 @@
 			padding-right: $gutter;
 			width: calc(100% + 2 * #{$gutter});
 
+			--focus-box-shadow:
+				0 0 0 calc(3 * var(--border-width)) var(--focus-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--focus-border-color) inset;
+
+			--active-box-shadow:
+				0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--active-border-color) inset,
+				0 0 0 calc(7 * var(--border-width)) var(--parent-background-color) inset;
+
 			svg {
 				margin-right: rem(7);
 			}
 
+			&:active,
+			&:focus {
+				border-top-color: var(--parent-background-color);
+			}
+
 			&:hover {
-				border-top-color: var(--dark-mint-500);
+				border-top-color: var(--hover-underline-color);
 
 				svg {
 					color: inherit;
 				}
+
+				&:active,
+				&:focus {
+					border-top-color: var(--parent-background-color);
+				}
 			}
 		}
 
+		.accordion__control[aria-expanded="true"]:active {
+			box-shadow: var(--active-box-shadow);
+		}
+
+		.accordion__control[aria-expanded="true"]:active:focus {
+			border-top-color: var(--parent-background-color);
+			margin-left: (-1 * $gutter);
+			margin-right: 0;
+			padding-left: $gutter;
+			padding-right: $gutter;
+			width: calc(100% + 2 * #{$gutter});
+		}
+
 		.accordion__control[aria-expanded="true"] + .accordion__content {
 			background: var(--blue-600);
 			color: var(--white);
@@ -250,6 +289,7 @@
 }
 
 @include breakpoint-down(md) {
+	.filters,
 	.filters .form {
 		--text-border-color-default: var(--grey-500);
 		--text-border-color-disabled: var(--grey-500);

src/assets/styles/components/_link-list.scss

@@ -57,25 +57,25 @@
 		border-bottom: solid rem(3) var(--hover-underline-color);
 	}
 
-	a:active,
-	a:active:hover,
-	a:active:focus {
-		background-color: var(--active-background-color);
+	a:focus {
+		background-color: var(--focus-background-color);
 		border-bottom: 0;
-		color: var(--active-color);
 		margin-left: rem(-16);
 		margin-right: rem(-16);
 		padding-left: rem(16);
 		padding-right: rem(16);
-		text-decoration: none;
 	}
 
-	a:focus {
-		background-color: var(--focus-background-color);
+	a:active,
+	a:active:hover,
+	a:active:focus {
+		background-color: var(--active-background-color);
 		border-bottom: 0;
+		color: var(--active-color);
 		margin-left: rem(-16);
 		margin-right: rem(-16);
 		padding-left: rem(16);
 		padding-right: rem(16);
+		text-decoration: none;
 	}
 }

src/assets/styles/components/_tag.scss

@@ -23,14 +23,18 @@
 	--outline-color: var(--white);
 	--hover-background-color: var(--grey-200);
 	--hover-color: var(--blue-500);
-	--active-background-color: var(--blue-50);
-	--active-color: var(--blue-500);
+	--active-background-color: var(--blue-700);
+	--active-border-color: var(--blue-700);
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
+	--active-color: var(--white);
 	--focus-background-color: var(--grey-200);
 	--focus-border-color: var(--blue-500);
 	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--blue-500) inset,
+		0 0 0 calc(2 * var(--border-width)) var(--focus-border-color) inset,
 		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
-		0 0 0 calc(4 * var(--border-width)) var(--blue-500);
+		0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
 	--focus-color: var(--blue-500);
 
 	border-radius: rem(15);

src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk

@@ -1,7 +1,7 @@
 <ul class="input-group checkbox{{ ' ' + className if className }}">
 	{% for checkbox in checkboxes %}
 	<li>
-		{% render '@' + component, checkbox, true %}
+		{% render '@' + component, checkbox %}
 	</li>
 	{% endfor %}
 </ul>

src/components/20-molecules/71-filter-list/filter-list.config.js

@@ -1,6 +1,10 @@
 const slugify = require( 'slugify' );
 
 const terms = [
+	{label:'Bangladesh'},
+	{label:'Brazil'},
+	{label:'Canada'},
+	{label:'France'},
 	{
 		label: 'Cooperative essentials',
 		children: [
@@ -69,13 +73,15 @@ const terms = [
 
 terms.forEach( term => {
 	const name = slugify( term.label, { lower: true } );
-	term.children = term.children.map( child => {
-		return {
-			value: slugify( child, { lower: true } ),
-			label: child,
-			name
-		};
-	} );
+	if (term.children) {
+		term.children = term.children.map( child => {
+			return {
+				value: slugify( child, { lower: true } ),
+				label: child,
+				name
+			};
+		} );
+	}
 } );
 
 module.exports = {

src/components/20-molecules/71-filter-list/filter-list.njk

@@ -20,7 +20,7 @@
 							<span class="supplementary-label" hidden> (and {{ count }} subtopics)</span>
 							{% render '@checkboxes', {checkboxes: term.children, className: 'input-group__descendant'}, true %}
 						{% else %}
-							<input type="checkbox" name="{{ label | slugify }}[]" id="{{ label | slugify }}-{{ term.label | slugify }}" value="{{ term.label | slugify }}"><label for="{{ label | slugify }}-{{ term.label | slugify }}">{{ term.label }}</label>
+							{% render '@checkbox', {label: term.label, value: term.label | slugify, name: term.label | slugify, standAlone: false}, true %}
 						{% endif %}
 					</li>
 					{% endfor %}