From 429648172f60b67055d9909ecce389f60d5c4105 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Fri, 3 Jun 2022 12:42:37 -0400
Subject: [PATCH] LG-6485: Update line height value for accordion component
 (#316)

* LGDS: Update line height value for accordion component

**Why**: To improve readability when the accordion heading spans multiple lines of text.

* Sync banner accordion button to text

Decrease from 1.5 to 1.2 to match

See: https://github.com/18F/identity-style-guide/pull/316#issuecomment-1146101243
---
 CHANGELOG.md                         | 6 ++++++
 src/scss/components/_accordions.scss | 1 +
 src/scss/components/_banner.scss     | 1 +
 3 files changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2b92ec1..795b7233 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Improvements
+
+- Increase line-height for accordion heading content to improve readability. ([#316](https://github.com/18F/identity-style-guide/pull/316))
+
 ## 6.4.2
 
 ### Dependencies
diff --git a/src/scss/components/_accordions.scss b/src/scss/components/_accordions.scss
index a3663175..95daa637 100644
--- a/src/scss/components/_accordions.scss
+++ b/src/scss/components/_accordions.scss
@@ -6,6 +6,7 @@
   background-color: color('transparent');
   background-size: units(2);
   color: color('primary');
+  line-height: line-height($theme-body-font-family, $theme-body-line-height);
 
   &:hover {
     background-color: color('primary-lightest');
diff --git a/src/scss/components/_banner.scss b/src/scss/components/_banner.scss
index 59ec1b76..4f70f8bd 100644
--- a/src/scss/components/_banner.scss
+++ b/src/scss/components/_banner.scss
@@ -19,6 +19,7 @@
   // Reset default accordion button border styling for banner button.
   @include u-border(0);
   @include u-radius(0);
+  line-height: line-height($theme-banner-font-family, 2);
 }
 
 .usa-accordion__button.usa-banner__button,