From e2f68d039d35d44f88b719ec63cd096462358235 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Fri, 24 Nov 2023 12:35:15 -0800
Subject: [PATCH 1/9] feat: accessibility improvements to the donate tabs

---
 src/blocks/donate/frequency-based/index.ts    | 12 +++++++++
 src/blocks/donate/frequency-based/style.scss  | 13 ++++++++++
 ...blocks-donate-renderer-frequency-based.php | 26 +++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/src/blocks/donate/frequency-based/index.ts b/src/blocks/donate/frequency-based/index.ts
index dbed4edd7..08c9ee133 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -57,6 +57,18 @@ export const processFrequencyBasedElements = ( parentEl = document ) => {
 	elements.forEach( container => {
 		resetOtherValue( container );
 	} );
+
+
+	// Change selected elements based on "tab"
+	const tierButtonsEls = parentEl.querySelectorAll( '.tab-container a[role="tab"' );
+	// Frequency choosing interaction.
+	tierButtonsEls.forEach( buttonEl => {
+		const tiers = frequency.querySelectorAll( 'input[type="radio"]' );
+
+		buttonEl.addEventListener( 'click', () => {
+			document.getElementById( 'newspack-donate-' + buttonEl.getAttribute( 'data-tab-id' ) ).checked = true;
+		} );
+	} );
 };
 
 if ( typeof window !== 'undefined' ) {
diff --git a/src/blocks/donate/frequency-based/style.scss b/src/blocks/donate/frequency-based/style.scss
index 1133dc638..cab5b30e3 100644
--- a/src/blocks/donate/frequency-based/style.scss
+++ b/src/blocks/donate/frequency-based/style.scss
@@ -9,6 +9,7 @@
 	position: relative;
 	width: 100%;
 
+	/* Hide all absolutely */
 	input[type='radio'] {
 		left: -99999em;
 		position: absolute;
@@ -49,6 +50,12 @@
 		}
 	}
 
+	// Added:
+	[role='tabset'] .freq-label {
+		text-decoration: none;
+		text-transform: uppercase;
+	}
+
 	.thanks {
 		color: colors.$color__text-light;
 		font-size: variables.$font__size-sm;
@@ -198,7 +205,9 @@
 	padding-top: 2.65em;
 }
 
+// Doesn't need any of this:
 .wpbnbd .frequency {
+
 	.freq-label {
 		position: absolute;
 		top: 0;
@@ -261,3 +270,7 @@
 		}
 	}
 }
+
+.tab-container {
+	display: flex;
+}
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
index eaeba4d7d..cdc98866e 100644
--- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
+++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
@@ -48,6 +48,26 @@ class='wpbnbd__button freq-label'
 		return ob_get_clean();
 	}
 
+	/**
+	 * Renders the frequency selection of the donation form in accessible tabs.
+	 * TODO: add $configuration for selected state.
+	 *
+	 * @param string $frequency_slug Frequency slug.
+	 * @param string $frequency_name Frequency name.
+	 * @param number $uid Unique ID.
+	 *
+	 * @return string
+	 */
+	private static function render_frequency_tab( $frequency_slug, $frequency_name, $uid ) {
+		ob_start();
+		?>
+		<a href='#' role='tab' class='wpbnbd__button freq-label' data-tab-id="<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>" id="tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>" >
+				<?php echo esc_html( $frequency_name ); ?>
+		</a>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Renders the footer of the donation form.
 	 *
@@ -108,6 +128,12 @@ class="untiered <?php echo esc_html( $configuration['container_classnames'] ); ?
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
+						<div role='tabset' class='tab-container'>
+							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+							<?php endforeach; ?>
+						</div>
+
 						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 							<?php
 								$formatted_amount = $configuration['amounts'][ $frequency_slug ][3];

From e5e203630638016032b99f8c220eb1ff283f80ce Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Sat, 2 Dec 2023 13:20:28 -0800
Subject: [PATCH 2/9] feat: add accessible tabs to the donate block

---
 .../donate/edit/FrequencyBasedLayout.tsx      |  37 ++++-
 src/blocks/donate/frequency-based/index.ts    |  62 +++++++--
 src/blocks/donate/frequency-based/style.scss  | 112 +++++----------
 ...blocks-donate-renderer-frequency-based.php |  41 +++++-
 .../donate/styles/style-variations.scss       | 130 +++++++++++-------
 src/blocks/donate/styles/view.scss            |   3 +-
 6 files changed, 228 insertions(+), 157 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index 8d8d857d4..3a1e38143 100644
--- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx
+++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 import { RichText } from '@wordpress/block-editor';
 
@@ -68,6 +68,8 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const isRenderingStripePaymentForm =
 		window.newspack_blocks_data?.is_rendering_stripe_payment_form;
 
+	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
+
 	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
 		<>
 			<input
@@ -75,22 +77,42 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 				value={ frequencySlug }
 				id={ `newspack-donate-${ frequencySlug }-${ uid }` }
 				name="donation_frequency"
-				defaultChecked={ frequencySlug === attributes.defaultFrequency }
+				checked={ frequencySlug === selectedFrequency } // needs to update with default
+				onChange={ e => setSelectedFrequency( e.target.value ) }
 			/>
-			<label
-				htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }
-				className="wpbnbd__button freq-label"
-			>
+			<label htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }>
 				{ FREQUENCIES[ frequencySlug ] }
 			</label>
 		</>
 	);
 
+	const renderTabs = ( frequencySlug: DonationFrequencySlug ) => (
+		<>
+			<button
+				role="tab"
+				className={ `wpbnbd__button freq-label${
+					frequencySlug === selectedFrequency ? ' selected' : ''
+				} ` }
+				id={ `tab-newspack-donate-${ frequencySlug }-${ uid }` }
+				onClick={ e => {
+					e.preventDefault();
+					setSelectedFrequency( frequencySlug );
+				} }
+			>
+				{ FREQUENCIES[ frequencySlug ] }
+			</button>
+		</>
+	);
+
+	// This code is fired on tab select and updates aria elements, tabindex states, and radio buttons
 	const displayAmount = ( amount: number ) => amount.toFixed( 2 ).replace( /\.?0*$/, '' );
 
 	const renderUntieredForm = () => (
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
+				<div className="tab-container">
+					{ availableFrequencies.map( frequencySlug => renderTabs( frequencySlug ) ) }
+				</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"
@@ -123,6 +145,9 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const renderTieredForm = () => (
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
+				<div className="tab-container">
+					{ availableFrequencies.map( frequencySlug => renderTabs( frequencySlug ) ) }
+				</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"
diff --git a/src/blocks/donate/frequency-based/index.ts b/src/blocks/donate/frequency-based/index.ts
index 08c9ee133..1839118b2 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -50,24 +50,62 @@ const resetOtherValue = ( container: HTMLElement ) => {
 	} );
 };
 
+const addAccessibleTabs = ( container: HTMLElement ) => {
+	// Get the block's tabs, panels, and radio buttons associated with donation frequency.
+	const tabs = container.querySelectorAll( 'div[role="tabset"] [role="tab"]' );
+	const panels = container.querySelectorAll( 'div[role="tabpanel"]' );
+	const radioButtons = container.querySelectorAll(
+		'input[type="radio"][name="donation_frequency"]'
+	);
+	// Figure out which radio button is currently selected.
+	const checkedRadioId =
+		Array.from( radioButtons ).find( ( radio: HTMLInputElement ) => radio.checked )?.id || null;
+
+	// Set the tab associated to the radio button to selected.
+	if ( checkedRadioId ) {
+		const selectedTabId = `tab-${ checkedRadioId }`;
+		document.getElementById( selectedTabId )?.setAttribute( 'aria-selected', 'true' );
+	}
+
+	// Add a click event listener to each tab.
+	tabs.forEach( tab => {
+		tab.addEventListener( 'click', function () {
+			selectTab( tab, tabs, radioButtons, panels );
+		} );
+	} );
+};
+
+const selectTab = ( tab, tabs, radioButtons, panels ) => {
+	// Deselect all tabs & panels.
+	tabs.forEach( t => t.setAttribute( 'aria-selected', 'false' ) );
+
+	// Select the clicked tab.
+	tab.setAttribute( 'aria-selected', 'true' );
+
+	// Update the underlying radio button.
+	const tabId = tab.id || '';
+	const frequencyId = tabId.replace( 'tab-', '' );
+	radioButtons.forEach( radio => {
+		radio.checked = frequencyId === radio.id;
+	} );
+
+	// Loop through the panels and set tabindex 0 on the selected panel; remove it from others.
+	panels.forEach( panel => {
+		if ( tab.getAttribute( 'aria-controls' ) === panel.id ) {
+			panel.setAttribute( 'tabindex', 0 );
+		} else {
+			panel.removeAttribute( 'tabindex' );
+		}
+	} );
+};
+
 export const processFrequencyBasedElements = ( parentEl = document ) => {
 	const elements = parentEl.querySelectorAll(
 		'.wpbnbd--frequency-based'
 	) as NodeListOf< HTMLElement >;
 	elements.forEach( container => {
 		resetOtherValue( container );
-	} );
-
-
-	// Change selected elements based on "tab"
-	const tierButtonsEls = parentEl.querySelectorAll( '.tab-container a[role="tab"' );
-	// Frequency choosing interaction.
-	tierButtonsEls.forEach( buttonEl => {
-		const tiers = frequency.querySelectorAll( 'input[type="radio"]' );
-
-		buttonEl.addEventListener( 'click', () => {
-			document.getElementById( 'newspack-donate-' + buttonEl.getAttribute( 'data-tab-id' ) ).checked = true;
-		} );
+		addAccessibleTabs( container );
 	} );
 };
 
diff --git a/src/blocks/donate/frequency-based/style.scss b/src/blocks/donate/frequency-based/style.scss
index cab5b30e3..e8a6f3b31 100644
--- a/src/blocks/donate/frequency-based/style.scss
+++ b/src/blocks/donate/frequency-based/style.scss
@@ -9,10 +9,16 @@
 	position: relative;
 	width: 100%;
 
-	/* Hide all absolutely */
+	// Hide some radio buttons absolutely.
 	input[type='radio'] {
-		left: -99999em;
 		position: absolute;
+		left: -99999em;
+
+		// And hide the ones being replaced by tabs completely.
+		&[name='donation_frequency'],
+		&[name='donation_frequency'] + label {
+			display: none;
+		}
 	}
 
 	input[readonly] {
@@ -44,18 +50,13 @@
 			margin: 0 1.5rem 1.5rem;
 		}
 	}
-	label.wpbnbd {
+	.wpbnbd {
 		&__button {
+			font-size: 16px;
 			text-transform: uppercase;
 		}
 	}
 
-	// Added:
-	[role='tabset'] .freq-label {
-		text-decoration: none;
-		text-transform: uppercase;
-	}
-
 	.thanks {
 		color: colors.$color__text-light;
 		font-size: variables.$font__size-sm;
@@ -195,82 +196,35 @@
 	}
 }
 
-.wpbnbd .frequencies {
-	position: relative;
-	font-size: variables.$font__size-xs;
-	@include mixins.media( mobile ) {
-		font-size: variables.$font__size-sm;
-	}
-
-	padding-top: 2.65em;
-}
-
-// Doesn't need any of this:
-.wpbnbd .frequency {
-
-	.freq-label {
-		position: absolute;
-		top: 0;
-		left: 0;
-		border-width: 0 0 1px;
-	}
-
-	input[type='radio'] {
-		&:checked {
-			+ .freq-label {
-				color: inherit;
-				border-bottom-color: transparent;
-
-				&:hover {
-					background: colors.$color__background-body;
-				}
-			}
-
-			~ .tiers {
-				display: flex;
-			}
-		}
-
-		&:focus + .freq-label {
-			text-decoration: underline;
-			text-decoration-style: dotted;
-			text-decoration-thickness: 1px;
+.wpbnbd {
+	.frequencies {
+		position: relative;
+		font-size: variables.$font__size-xs;
+		@include mixins.media( mobile ) {
+			font-size: variables.$font__size-sm;
 		}
 	}
 
-	&:nth-of-type( 3 ) .freq-label {
-		left: 66.66%;
+	.frequency input[type='radio']:checked ~ .tiers {
+		display: flex;
 	}
-}
 
-.wpbnbd-frequencies {
-	&--2 {
-		&.wpbnbd .frequency {
-			.freq-label {
-				width: 50%;
+	.tab-container {
+		display: flex;
+		.freq-label {
+			border-radius: 0;
+			margin: 0;
+			&[aria-selected='true'],
+			&.selected {
+				color: colors.$color__text-main;
 			}
-			&:nth-of-type( 2 ) .freq-label {
-				border-left-width: 1px;
-				left: 50%;
-				top: 0;
-			}
-		}
-	}
-	&--3 {
-		&.wpbnbd .frequency {
-			.freq-label {
-				width: 33.33%;
-			}
-			&:nth-of-type( 2 ) .freq-label {
-				border-left-width: 1px;
-				border-right-width: 1px;
-				left: 33.33%;
-				top: 0;
+
+			&:focus {
+				outline: 0;
+				text-decoration: underline;
+				text-decoration-style: dotted;
+				text-decoration-thickness: 1px;
 			}
 		}
 	}
-}
-
-.tab-container {
-	display: flex;
-}
+}
\ No newline at end of file
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
index cdc98866e..ed6986b0b 100644
--- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
+++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
@@ -40,7 +40,7 @@ private static function render_frequency_selection( $frequency_slug, $frequency_
 		/>
 		<label
 			for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-			class='wpbnbd__button freq-label'
+			class=''
 		>
 			<?php echo esc_html( $frequency_name ); ?>
 		</label>
@@ -50,20 +50,28 @@ class='wpbnbd__button freq-label'
 
 	/**
 	 * Renders the frequency selection of the donation form in accessible tabs.
-	 * TODO: add $configuration for selected state.
 	 *
 	 * @param string $frequency_slug Frequency slug.
 	 * @param string $frequency_name Frequency name.
 	 * @param number $uid Unique ID.
+	 * @param array  $configuration The donations settings.
 	 *
 	 * @return string
 	 */
-	private static function render_frequency_tab( $frequency_slug, $frequency_name, $uid ) {
+	private static function render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ) {
 		ob_start();
 		?>
-		<a href='#' role='tab' class='wpbnbd__button freq-label' data-tab-id="<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>" id="tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>" >
+		<button
+			role='tab'
+			type='button'
+			aria-controls='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+			class='wpbnbd__button freq-label'
+			data-tab-id="<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
+			id="tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
+			<?php echo "aria-selected='" . ( $frequency_slug === $configuration['defaultFrequency'] ? 'true' : 'false' ) . "'"; ?>
+			>
 				<?php echo esc_html( $frequency_name ); ?>
-		</a>
+		</button>
 		<?php
 		return ob_get_clean();
 	}
@@ -128,6 +136,7 @@ class="untiered <?php echo esc_html( $configuration['container_classnames'] ); ?
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
+
 						<div role='tabset' class='tab-container'>
 							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
@@ -139,7 +148,13 @@ class="untiered <?php echo esc_html( $configuration['container_classnames'] ); ?
 								$formatted_amount = $configuration['amounts'][ $frequency_slug ][3];
 							?>
 
-							<div class='wp-block-newspack-blocks-donate__frequency frequency'>
+							<div
+								class='wp-block-newspack-blocks-donate__frequency frequency'
+								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								role='tabpanel'
+								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
+								>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 								<div class='input-container'>
 									<label
@@ -183,9 +198,21 @@ class="tiered <?php echo esc_html( $configuration['container_classnames'] ); ?>"
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
+						<div role='tabset' class='tab-container'>
+							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+							<?php endforeach; ?>
+						</div>
+
 						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 
-							<div class='wp-block-newspack-blocks-donate__frequency frequency'>
+							<div
+								class='wp-block-newspack-blocks-donate__frequency frequency'
+								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								role='tabpanel'
+								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
+								>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 								<div class='wp-block-newspack-blocks-donate__tiers tiers'>
 									<?php foreach ( $suggested_amounts[ $frequency_slug ] as $index => $amount ) : ?>
diff --git a/src/blocks/donate/styles/style-variations.scss b/src/blocks/donate/styles/style-variations.scss
index 5b416e17b..b605f26e4 100644
--- a/src/blocks/donate/styles/style-variations.scss
+++ b/src/blocks/donate/styles/style-variations.scss
@@ -8,9 +8,21 @@
 	.wpbnbd {
 		&__button {
 			padding: 0.38rem 0.76rem;
-			&:focus,
-			&:hover {
+
+			&[aria-selected='true'],
+			&.selected {
+				background: #fff;
+				border-bottom-color: transparent;
+			}
+
+			&[aria-selected='false'],
+			&:not(.selected) {
 				background: colors.$color__background-screen;
+				border-width: 0 0 1px;
+				&:focus,
+				&:hover {
+					background: colors.$color__background-screen;
+				}
 			}
 		}
 		&__tiers {
@@ -21,6 +33,16 @@
 			}
 		}
 	}
+
+	&.wpbnbd-frequencies {
+		&--2 .tab-container .freq-label:nth-of-type( 2 )  {
+			border-left-width: 1px;
+		}
+		&--3 .tab-container .freq-label:nth-of-type( 2 ) {
+			border-left-width: 1px;
+			border-right-width: 1px;
+		}
+	}
 }
 
 /* Alternate Style */
@@ -65,17 +87,12 @@
 		}
 	}
 
-	.frequencies {
-		@include mixins.media( tablet ) {
-			padding-top: calc( 1.14rem + 1.6em + 4px );
-		}
-	}
-
-	.freq-label,
+	.tab-container .freq-label,
 	.wpbnbd__tiers__selection {
 		background: colors.$color__background-screen;
 		border-color: colors.$color__background-screen;
 	}
+
 	.wpbnbd__tiers__selection {
 		width: min-content;
 		margin-left: auto;
@@ -87,32 +104,30 @@
 			padding: 0 15px;
 		}
 	}
-	.freq-label {
-		border-width: 1px;
-		padding: calc( 0.57rem + 1px ) 0.5rem;
-		@include mixins.media( mobile ) {
-			padding: calc( 0.57rem + 1px ) 0.76rem;
-		}
-	}
-
-	.wpbnbd__button {
-		border: none;
-		border: 0.19rem solid transparent;
-	}
 
 	// Tiers-based version.
 	.wpbnbd__button--active,
 	// Frequency-based version.
-	.frequency input[type='radio']:checked + .freq-label::after {
+	.tab-container .freq-label[aria-selected='true']::after,
+	.tab-container .freq-label.selected::after  {
 		background: white;
 		border-radius: 5px;
 		border: 0.19rem solid white;
 		box-shadow: 0 0 0 1px variables.$color__border;
 	}
 
-	.frequency {
-		input[type='radio']:checked {
-			+ .freq-label {
+	.tab-container {
+		.freq-label {
+			border-width: 1px;
+			padding: calc( 0.57rem + 1px ) 0.5rem;
+			position: relative;
+			@include mixins.media( mobile ) {
+				padding: calc( 0.57rem + 1px ) 0.76rem;
+			}
+
+			&[aria-selected='true'],
+			&.selected {
+				color: colors.$color__text-main;
 				&::after {
 					box-sizing: content-box;
 					content: '';
@@ -125,17 +140,24 @@
 					background: colors.$color__background-screen;
 				}
 			}
-			~ .tiers {
-				display: grid;
-				grid-gap: 0.28rem;
-				grid-template-columns: repeat( 2, 1fr );
-				margin: 1.12rem;
+		}
 
-				@include mixins.media( mobile ) {
-					grid-template-columns: repeat( 4, 1fr );
-					grid-gap: 0.56rem;
-				}
-			}
+		.wpbnbd__button {
+			border: none;
+			border: 0.19rem solid transparent;
+		}
+	}
+
+	// Show/hide the tab content.
+	.frequencies input[type='radio']:checked ~ .tiers {
+		display: grid;
+		grid-gap: 0.28rem;
+		grid-template-columns: repeat( 2, 1fr );
+		margin: 1.12rem;
+
+		@include mixins.media( mobile ) {
+			grid-template-columns: repeat( 4, 1fr );
+			grid-gap: 0.56rem;
 		}
 	}
 
@@ -264,30 +286,34 @@
 		padding-top: calc( 0.76rem + 1.6em + 4px );
 	}
 
-	.freq-label {
-		background: transparent;
-		border: none;
-		box-shadow: 0 3px 0 white, 0 4px 0 0 variables.$color__border;
-		padding: 0.38rem 0;
-		transition: none;
+	.tab-container {
+		.freq-label {
+			background: transparent;
+			border: none;
+			box-shadow: 0 3px 0 white, 0 4px 0 0 variables.$color__border;
+			padding: 0.38rem 0;
+			transition: none;
+
+			@include mixins.media( tablet ) {
+				padding-left: 0.76rem;
+				padding-right: 0.76rem;
+			}
 
-		@include mixins.media( tablet ) {
-			padding-left: 0.76rem;
-			padding-right: 0.76rem;
-		}
+			&::before {
+				border-width: 1px;
+				border-color: variables.$color__border;
+			}
+
+			&[aria-selected='true'],
+			&.selected {
+				box-shadow: 0 4px 0 currentcolor;
+			}
 
-		&::before {
-			border-width: 1px;
-			border-color: variables.$color__border;
 		}
 	}
 
 	.frequency {
 		input[type='radio']:checked {
-			+ .freq-label {
-				box-shadow: 0 4px 0 currentcolor;
-			}
-
 			~ .tiers {
 				display: flex;
 				flex-wrap: wrap;
diff --git a/src/blocks/donate/styles/view.scss b/src/blocks/donate/styles/view.scss
index 76d4a57e8..15128d607 100644
--- a/src/blocks/donate/styles/view.scss
+++ b/src/blocks/donate/styles/view.scss
@@ -4,7 +4,8 @@
 @use './style-variations';
 
 .wpbnbd {
-	&__button {
+	 &__button,
+	.tab-container .freq-label {
 		border: 0 solid variables.$color__border;
 		background: colors.$color__background-body;
 		color: colors.$color__text-light;

From d4fb795468de25424cc43d431cd25a330d9b2e27 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 5 Dec 2023 15:32:51 -0800
Subject: [PATCH 3/9] feat: make accessibility improvements to the donate block

---
 .../donate/edit/FrequencyBasedLayout.tsx      | 17 ++++++----
 src/blocks/donate/frequency-based/index.ts    | 32 ++++++++++++-------
 src/blocks/donate/frequency-based/style.scss  |  4 +--
 ...blocks-donate-renderer-frequency-based.php |  6 ++--
 .../donate/styles/style-variations.scss       | 15 +++------
 5 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index 3a1e38143..fff2d503a 100644
--- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx
+++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
@@ -68,6 +68,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const isRenderingStripePaymentForm =
 		window.newspack_blocks_data?.is_rendering_stripe_payment_form;
 
+	// Need to do something better with this!
 	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
 
 	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
@@ -77,8 +78,10 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 				value={ frequencySlug }
 				id={ `newspack-donate-${ frequencySlug }-${ uid }` }
 				name="donation_frequency"
-				checked={ frequencySlug === selectedFrequency } // needs to update with default
-				onChange={ e => setSelectedFrequency( e.target.value ) }
+				checked={ frequencySlug === selectedFrequency }
+				onChange={ evt =>
+					setSelectedFrequency( evt.target.value as "once" | "month" | "year" )
+				}
 			/>
 			<label htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }>
 				{ FREQUENCIES[ frequencySlug ] }
@@ -90,12 +93,12 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		<>
 			<button
 				role="tab"
-				className={ `wpbnbd__button freq-label${
-					frequencySlug === selectedFrequency ? ' selected' : ''
-				} ` }
+				className={ classNames( 'wpbnbd__button freq-label', {
+					'wpbnbd__button--active': frequencySlug === selectedFrequency,
+				} ) }
 				id={ `tab-newspack-donate-${ frequencySlug }-${ uid }` }
-				onClick={ e => {
-					e.preventDefault();
+				onClick={ evt => {
+					evt.preventDefault();
 					setSelectedFrequency( frequencySlug );
 				} }
 			>
diff --git a/src/blocks/donate/frequency-based/index.ts b/src/blocks/donate/frequency-based/index.ts
index 1839118b2..c82edd5d5 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -52,11 +52,11 @@ const resetOtherValue = ( container: HTMLElement ) => {
 
 const addAccessibleTabs = ( container: HTMLElement ) => {
 	// Get the block's tabs, panels, and radio buttons associated with donation frequency.
-	const tabs = container.querySelectorAll( 'div[role="tabset"] [role="tab"]' );
-	const panels = container.querySelectorAll( 'div[role="tabpanel"]' );
+	const tabList = container.querySelectorAll( 'div[role="tablist"] [role="tab"]' ) as NodeListOf< HTMLElement >;
+	const panels = container.querySelectorAll( 'div[role="tabpanel"]' ) as NodeListOf< HTMLElement >;
 	const radioButtons = container.querySelectorAll(
 		'input[type="radio"][name="donation_frequency"]'
-	);
+	) as NodeListOf< HTMLInputElement >;
 	// Figure out which radio button is currently selected.
 	const checkedRadioId =
 		Array.from( radioButtons ).find( ( radio: HTMLInputElement ) => radio.checked )?.id || null;
@@ -68,31 +68,41 @@ const addAccessibleTabs = ( container: HTMLElement ) => {
 	}
 
 	// Add a click event listener to each tab.
-	tabs.forEach( tab => {
+	tabList.forEach( ( tab: HTMLElement ) => {
 		tab.addEventListener( 'click', function () {
-			selectTab( tab, tabs, radioButtons, panels );
+			selectTab( tab, tabList, radioButtons, panels );
 		} );
 	} );
 };
 
-const selectTab = ( tab, tabs, radioButtons, panels ) => {
+const selectTab = ( tab: HTMLElement, tabList: NodeListOf< HTMLElement >, radioButtons: NodeListOf< HTMLInputElement >, panels: NodeListOf< HTMLElement > ) => {
 	// Deselect all tabs & panels.
-	tabs.forEach( t => t.setAttribute( 'aria-selected', 'false' ) );
+	console.log( tab );
+
+	tabList.forEach( ( thisTab: HTMLElement ) => {
+		if ( tab === thisTab ) {
+			thisTab.setAttribute( 'aria-selected', 'true' );
+			thisTab.classList.add( 'wpbnbd__button--active' );
+		} else {
+			thisTab.setAttribute( 'aria-selected', 'false' );
+			thisTab.classList.remove( 'wpbnbd__button--active' );
+		}
+	} );
 
 	// Select the clicked tab.
-	tab.setAttribute( 'aria-selected', 'true' );
+	//tab.setAttribute( 'aria-selected', 'true' );
 
 	// Update the underlying radio button.
 	const tabId = tab.id || '';
 	const frequencyId = tabId.replace( 'tab-', '' );
-	radioButtons.forEach( radio => {
+	radioButtons.forEach( ( radio: HTMLInputElement ) => {
 		radio.checked = frequencyId === radio.id;
 	} );
 
 	// Loop through the panels and set tabindex 0 on the selected panel; remove it from others.
-	panels.forEach( panel => {
+	panels.forEach( ( panel: HTMLElement ) => {
 		if ( tab.getAttribute( 'aria-controls' ) === panel.id ) {
-			panel.setAttribute( 'tabindex', 0 );
+			panel.setAttribute( 'tabindex', '0' );
 		} else {
 			panel.removeAttribute( 'tabindex' );
 		}
diff --git a/src/blocks/donate/frequency-based/style.scss b/src/blocks/donate/frequency-based/style.scss
index e8a6f3b31..ff4c5ffd2 100644
--- a/src/blocks/donate/frequency-based/style.scss
+++ b/src/blocks/donate/frequency-based/style.scss
@@ -214,8 +214,8 @@
 		.freq-label {
 			border-radius: 0;
 			margin: 0;
-			&[aria-selected='true'],
-			&.selected {
+
+			&.wpbnbd__button--active {
 				color: colors.$color__text-main;
 			}
 
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
index ed6986b0b..b59be7a18 100644
--- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
+++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
@@ -65,7 +65,7 @@ private static function render_frequency_tab( $frequency_slug, $frequency_name,
 			role='tab'
 			type='button'
 			aria-controls='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-			class='wpbnbd__button freq-label'
+			class="wpbnbd__button freq-label<?php echo esc_attr( $frequency_slug === $configuration['defaultFrequency'] ? ' wpbnbd__button--active' : '' ); ?>"
 			data-tab-id="<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
 			id="tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
 			<?php echo "aria-selected='" . ( $frequency_slug === $configuration['defaultFrequency'] ? 'true' : 'false' ) . "'"; ?>
@@ -137,7 +137,7 @@ class="untiered <?php echo esc_html( $configuration['container_classnames'] ); ?
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
 
-						<div role='tabset' class='tab-container'>
+						<div role='tablist' class='tab-container'>
 							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 							<?php endforeach; ?>
@@ -198,7 +198,7 @@ class="tiered <?php echo esc_html( $configuration['container_classnames'] ); ?>"
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
-						<div role='tabset' class='tab-container'>
+						<div role='tablist' class='tab-container'>
 							<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 								<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 							<?php endforeach; ?>
diff --git a/src/blocks/donate/styles/style-variations.scss b/src/blocks/donate/styles/style-variations.scss
index b605f26e4..ddf724df6 100644
--- a/src/blocks/donate/styles/style-variations.scss
+++ b/src/blocks/donate/styles/style-variations.scss
@@ -9,14 +9,12 @@
 		&__button {
 			padding: 0.38rem 0.76rem;
 
-			&[aria-selected='true'],
-			&.selected {
+			&.wpbnbd__button--active {
 				background: #fff;
 				border-bottom-color: transparent;
 			}
 
-			&[aria-selected='false'],
-			&:not(.selected) {
+			&:not(.wpbnbd__button--active) {
 				background: colors.$color__background-screen;
 				border-width: 0 0 1px;
 				&:focus,
@@ -108,8 +106,7 @@
 	// Tiers-based version.
 	.wpbnbd__button--active,
 	// Frequency-based version.
-	.tab-container .freq-label[aria-selected='true']::after,
-	.tab-container .freq-label.selected::after  {
+	.tab-container .freq-label.wpbnbd__button--active::after  {
 		background: white;
 		border-radius: 5px;
 		border: 0.19rem solid white;
@@ -125,8 +122,7 @@
 				padding: calc( 0.57rem + 1px ) 0.76rem;
 			}
 
-			&[aria-selected='true'],
-			&.selected {
+			&.wpbnbd__button--active {
 				color: colors.$color__text-main;
 				&::after {
 					box-sizing: content-box;
@@ -304,8 +300,7 @@
 				border-color: variables.$color__border;
 			}
 
-			&[aria-selected='true'],
-			&.selected {
+			&.wpbnbd__button--active {
 				box-shadow: 0 4px 0 currentcolor;
 			}
 

From 428f63fa39d35e72e3d1070dd1f652b9d2f7f7bf Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 5 Dec 2023 15:40:19 -0800
Subject: [PATCH 4/9] feat: fix linting errors

---
 src/blocks/donate/frequency-based/index.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/blocks/donate/frequency-based/index.ts b/src/blocks/donate/frequency-based/index.ts
index c82edd5d5..5e54cd16e 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -52,7 +52,9 @@ const resetOtherValue = ( container: HTMLElement ) => {
 
 const addAccessibleTabs = ( container: HTMLElement ) => {
 	// Get the block's tabs, panels, and radio buttons associated with donation frequency.
-	const tabList = container.querySelectorAll( 'div[role="tablist"] [role="tab"]' ) as NodeListOf< HTMLElement >;
+	const tabList = container.querySelectorAll(
+		'div[role="tablist"] [role="tab"]'
+	) as NodeListOf< HTMLElement >;
 	const panels = container.querySelectorAll( 'div[role="tabpanel"]' ) as NodeListOf< HTMLElement >;
 	const radioButtons = container.querySelectorAll(
 		'input[type="radio"][name="donation_frequency"]'
@@ -76,9 +78,7 @@ const addAccessibleTabs = ( container: HTMLElement ) => {
 };
 
 const selectTab = ( tab: HTMLElement, tabList: NodeListOf< HTMLElement >, radioButtons: NodeListOf< HTMLInputElement >, panels: NodeListOf< HTMLElement > ) => {
-	// Deselect all tabs & panels.
-	console.log( tab );
-
+	// Loop through tabs and set them as selected or not selected:
 	tabList.forEach( ( thisTab: HTMLElement ) => {
 		if ( tab === thisTab ) {
 			thisTab.setAttribute( 'aria-selected', 'true' );
@@ -89,9 +89,6 @@ const selectTab = ( tab: HTMLElement, tabList: NodeListOf< HTMLElement >, radioB
 		}
 	} );
 
-	// Select the clicked tab.
-	//tab.setAttribute( 'aria-selected', 'true' );
-
 	// Update the underlying radio button.
 	const tabId = tab.id || '';
 	const frequencyId = tabId.replace( 'tab-', '' );

From 970db95097f10f3565723b54d3e85637f2748c6b Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 5 Dec 2023 16:16:06 -0800
Subject: [PATCH 5/9] feat: fix linting errors

---
 src/blocks/donate/edit/FrequencyBasedLayout.tsx | 4 +---
 src/blocks/donate/frequency-based/index.ts      | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index fff2d503a..89d6d78c9 100644
--- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx
+++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
@@ -79,9 +79,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 				id={ `newspack-donate-${ frequencySlug }-${ uid }` }
 				name="donation_frequency"
 				checked={ frequencySlug === selectedFrequency }
-				onChange={ evt =>
-					setSelectedFrequency( evt.target.value as "once" | "month" | "year" )
-				}
+				onChange={ evt => setSelectedFrequency( evt.target.value as 'once' | 'month' | 'year' ) }
 			/>
 			<label htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }>
 				{ FREQUENCIES[ frequencySlug ] }
diff --git a/src/blocks/donate/frequency-based/index.ts b/src/blocks/donate/frequency-based/index.ts
index 5e54cd16e..4364e9982 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -77,7 +77,12 @@ const addAccessibleTabs = ( container: HTMLElement ) => {
 	} );
 };
 
-const selectTab = ( tab: HTMLElement, tabList: NodeListOf< HTMLElement >, radioButtons: NodeListOf< HTMLInputElement >, panels: NodeListOf< HTMLElement > ) => {
+const selectTab = (
+	tab: HTMLElement,
+	tabList: NodeListOf< HTMLElement >,
+	radioButtons: NodeListOf< HTMLInputElement >,
+	panels: NodeListOf< HTMLElement >
+) => {
 	// Loop through tabs and set them as selected or not selected:
 	tabList.forEach( ( thisTab: HTMLElement ) => {
 		if ( tab === thisTab ) {

From 393664e00649ea303578a02f0729e9919738cc78 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 5 Dec 2023 16:56:23 -0800
Subject: [PATCH 6/9] feat: tweaking alternate styles

---
 .../donate/styles/style-variations.scss       | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/blocks/donate/styles/style-variations.scss b/src/blocks/donate/styles/style-variations.scss
index ddf724df6..27b3c05ff 100644
--- a/src/blocks/donate/styles/style-variations.scss
+++ b/src/blocks/donate/styles/style-variations.scss
@@ -104,12 +104,19 @@
 	}
 
 	// Tiers-based version.
-	.wpbnbd__button--active,
+	.wpbnbd__tiers .wpbnbd__button {
+		border: 0.19rem solid transparent;
+
+		&--active {
+			border-color: white;
+		}
+	}
+
+	.wpbnbd__tiers .wpbnbd__button--active,
 	// Frequency-based version.
 	.tab-container .freq-label.wpbnbd__button--active::after  {
 		background: white;
 		border-radius: 5px;
-		border: 0.19rem solid white;
 		box-shadow: 0 0 0 1px variables.$color__border;
 	}
 
@@ -137,11 +144,6 @@
 				}
 			}
 		}
-
-		.wpbnbd__button {
-			border: none;
-			border: 0.19rem solid transparent;
-		}
 	}
 
 	// Show/hide the tab content.
@@ -278,10 +280,6 @@
 		}
 	}
 
-	.frequencies {
-		padding-top: calc( 0.76rem + 1.6em + 4px );
-	}
-
 	.tab-container {
 		.freq-label {
 			background: transparent;

From d8fb67fc8596f3ff71847074ea8dfaacbfa1b44e Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Wed, 6 Dec 2023 10:03:57 -0800
Subject: [PATCH 7/9] feat: fix selected tab state styles

---
 .../donate/styles/style-variations.scss       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/blocks/donate/styles/style-variations.scss b/src/blocks/donate/styles/style-variations.scss
index 27b3c05ff..494ae75d0 100644
--- a/src/blocks/donate/styles/style-variations.scss
+++ b/src/blocks/donate/styles/style-variations.scss
@@ -8,19 +8,9 @@
 	.wpbnbd {
 		&__button {
 			padding: 0.38rem 0.76rem;
-
-			&.wpbnbd__button--active {
-				background: #fff;
-				border-bottom-color: transparent;
-			}
-
-			&:not(.wpbnbd__button--active) {
+			&:focus,
+			&:hover {
 				background: colors.$color__background-screen;
-				border-width: 0 0 1px;
-				&:focus,
-				&:hover {
-					background: colors.$color__background-screen;
-				}
 			}
 		}
 		&__tiers {
@@ -32,6 +22,16 @@
 		}
 	}
 
+	&.wpbnbd--frequency-based {
+		.wpbnbd__button {
+			border-width: 0 0 1px;
+			&--active {
+				background: #fff;
+				border-bottom: 0;
+			}
+		}
+	}
+
 	&.wpbnbd-frequencies {
 		&--2 .tab-container .freq-label:nth-of-type( 2 )  {
 			border-left-width: 1px;

From 60d7bca3099c81040ed3ede41e01f9b738a97358 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Wed, 6 Dec 2023 10:36:41 -0800
Subject: [PATCH 8/9] fix: code corrections and improvements

---
 .../donate/edit/FrequencyBasedLayout.tsx      | 36 +++++++++----------
 ...blocks-donate-renderer-frequency-based.php |  5 +--
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index 89d6d78c9..df6d6b617 100644
--- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx
+++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
@@ -68,7 +68,6 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const isRenderingStripePaymentForm =
 		window.newspack_blocks_data?.is_rendering_stripe_payment_form;
 
-	// Need to do something better with this!
 	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
 
 	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
@@ -87,22 +86,21 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		</>
 	);
 
-	const renderTabs = ( frequencySlug: DonationFrequencySlug ) => (
-		<>
-			<button
-				role="tab"
-				className={ classNames( 'wpbnbd__button freq-label', {
-					'wpbnbd__button--active': frequencySlug === selectedFrequency,
-				} ) }
-				id={ `tab-newspack-donate-${ frequencySlug }-${ uid }` }
-				onClick={ evt => {
-					evt.preventDefault();
-					setSelectedFrequency( frequencySlug );
-				} }
-			>
-				{ FREQUENCIES[ frequencySlug ] }
-			</button>
-		</>
+	const renderTab = ( frequencySlug: DonationFrequencySlug ) => (
+		<button
+			key={ frequencySlug }
+			role="tab"
+			className={ classNames( 'wpbnbd__button freq-label', {
+				'wpbnbd__button--active': frequencySlug === selectedFrequency,
+			} ) }
+			id={ `tab-newspack-donate-${ frequencySlug }-${ uid }` }
+			onClick={ evt => {
+				evt.preventDefault();
+				setSelectedFrequency( frequencySlug );
+			} }
+		>
+			{ FREQUENCIES[ frequencySlug ] }
+		</button>
 	);
 
 	// This code is fired on tab select and updates aria elements, tabindex states, and radio buttons
@@ -112,7 +110,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
 				<div className="tab-container">
-					{ availableFrequencies.map( frequencySlug => renderTabs( frequencySlug ) ) }
+					{ availableFrequencies.map( renderTab ) }
 				</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
@@ -147,7 +145,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
 				<div className="tab-container">
-					{ availableFrequencies.map( frequencySlug => renderTabs( frequencySlug ) ) }
+					{ availableFrequencies.map( frequencySlug => renderTab( frequencySlug ) ) }
 				</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
index b59be7a18..065002d2a 100644
--- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
+++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php
@@ -38,10 +38,7 @@ private static function render_frequency_selection( $frequency_slug, $frequency_
 			);
 			?>
 		/>
-		<label
-			for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-			class=''
-		>
+		<label for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'>
 			<?php echo esc_html( $frequency_name ); ?>
 		</label>
 		<?php

From 243cf42eebef7df0bf4e00c95e3dcb3f92f7a0ac Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Wed, 6 Dec 2023 10:44:57 -0800
Subject: [PATCH 9/9] fix: fixing linting errors

---
 src/blocks/donate/edit/FrequencyBasedLayout.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index df6d6b617..85df94eda 100644
--- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx
+++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
@@ -109,9 +109,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const renderUntieredForm = () => (
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
-				<div className="tab-container">
-					{ availableFrequencies.map( renderTab ) }
-				</div>
+				<div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"
@@ -144,9 +142,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 	const renderTieredForm = () => (
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
-				<div className="tab-container">
-					{ availableFrequencies.map( frequencySlug => renderTab( frequencySlug ) ) }
-				</div>
+				<div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"