From 61ffdbc57e6fda320766d4de99f097edac9e58f7 Mon Sep 17 00:00:00 2001
From: Miguel Peixe <miguel.peixe@automattic.com>
Date: Fri, 8 Dec 2023 11:01:27 -0300
Subject: [PATCH 1/7] feat(donate): support empty value for "other" tier
 (#1604)

---
 .../donate/edit/FrequencyBasedLayout.tsx      |  7 +---
 src/blocks/donate/edit/index.tsx              | 37 +++++++++++--------
 src/blocks/donate/frequency-based/index.ts    | 22 ++++++++++-
 src/blocks/donate/frequency-based/style.scss  |  3 ++
 ...blocks-donate-renderer-frequency-based.php |  1 -
 src/blocks/donate/styles/editor.scss          |  2 +-
 6 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index 8d8d857d4..6ae184b1b 100644
--- a/src/blocks/donate/edit/FrequencyBasedLayout.tsx
+++ b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
@@ -166,12 +166,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 												</label>
 												<div className="wp-block-newspack-blocks-donate__money-input money-input">
 													<span className="currency">{ settings.currencySymbol }</span>
-													<AmountValueInput
-														{ ...props }
-														frequencySlug={ frequencySlug }
-														tierIndex={ index }
-														id={ `${ id }-other-input` }
-													/>
+													<input type="number" readOnly />
 												</div>
 											</>
 										) : null }
diff --git a/src/blocks/donate/edit/index.tsx b/src/blocks/donate/edit/index.tsx
index 3abec90ab..10f2551ba 100644
--- a/src/blocks/donate/edit/index.tsx
+++ b/src/blocks/donate/edit/index.tsx
@@ -51,7 +51,6 @@ const TIER_LABELS = [
 	__( 'Low-tier', 'newspack-blocks' ),
 	__( 'Mid-tier', 'newspack-blocks' ),
 	__( 'High-tier', 'newspack-blocks' ),
-	__( 'Other', 'newspack-blocks' ),
 ];
 
 const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
@@ -302,21 +301,27 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 																false
 															) && renderMinAmountWarning() }
 
-															{ amounts[ frequency ].map( ( suggestedAmount, tierIndex ) => (
-																<AmountValueInput
-																	ignoreMinimumAmount
-																	{ ...componentProps }
-																	key={ `amount-${ frequency }-${ tierIndex }` }
-																	frequencySlug={ frequency }
-																	tierIndex={ tierIndex }
-																	label={ TIER_LABELS[ tierIndex ] }
-																	id={ `${ frequency }-${ tierIndex }-amount` }
-																	disabled={
-																		isTierBasedLayoutEnabled &&
-																		tierIndex === DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX
-																	}
-																/>
-															) ) }
+															{ amounts[ frequency ].map( ( suggestedAmount, tierIndex ) => {
+																// The "Other" tier is no longer customizable and should always render empty for tiered layout.
+																if ( tierIndex === 3 ) {
+																	return null;
+																}
+																return (
+																	<AmountValueInput
+																		ignoreMinimumAmount
+																		{ ...componentProps }
+																		key={ `amount-${ frequency }-${ tierIndex }` }
+																		frequencySlug={ frequency }
+																		tierIndex={ tierIndex }
+																		label={ TIER_LABELS[ tierIndex ] }
+																		id={ `${ frequency }-${ tierIndex }-amount` }
+																		disabled={
+																			isTierBasedLayoutEnabled &&
+																			tierIndex === DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX
+																		}
+																	/>
+																);
+															} ) }
 														</div>
 													) }
 												</Fragment>
diff --git a/src/blocks/donate/frequency-based/index.ts b/src/blocks/donate/frequency-based/index.ts
index dbed4edd7..b6b2fc195 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -25,12 +25,13 @@ function domReady( callback: () => void ): void {
 	document.addEventListener( 'DOMContentLoaded', callback );
 }
 
-const resetOtherValue = ( container: HTMLElement ) => {
+const handleOtherValue = ( container: HTMLElement ) => {
 	const frequencies = container.querySelectorAll( '.tiers' );
 	if ( ! frequencies?.length ) {
 		return;
 	}
 	const frequencyInputs = container.querySelectorAll( 'input[name="donation_frequency"]' );
+	const submitButton = container.querySelector( 'button[type="submit"]' );
 	frequencies.forEach( frequency => {
 		const tiers = frequency.querySelectorAll( 'input[type="radio"]' );
 		const input = <HTMLInputElement>frequency.querySelector( '.money-input input' );
@@ -41,11 +42,28 @@ const resetOtherValue = ( container: HTMLElement ) => {
 		const reset = () => {
 			input.value = originalValue || '';
 		};
+		const toggleSubmit = () => {
+			const checkedTier = <HTMLInputElement>(
+				frequency.querySelector( 'input[type="radio"]:checked' )
+			);
+			if ( ! checkedTier ) {
+				return;
+			}
+			if ( checkedTier.value === 'other' && ! input.value ) {
+				submitButton?.setAttribute( 'disabled', 'disabled' );
+			} else {
+				submitButton?.removeAttribute( 'disabled' );
+			}
+		};
+		input.addEventListener( 'keyup', toggleSubmit );
+		toggleSubmit();
 		tiers.forEach( tierInput => {
 			tierInput.addEventListener( 'change', reset );
+			tierInput.addEventListener( 'change', toggleSubmit );
 		} );
 		frequencyInputs.forEach( frequencyInput => {
 			frequencyInput.addEventListener( 'change', reset );
+			frequencyInput.addEventListener( 'change', toggleSubmit );
 		} );
 	} );
 };
@@ -55,7 +73,7 @@ export const processFrequencyBasedElements = ( parentEl = document ) => {
 		'.wpbnbd--frequency-based'
 	) as NodeListOf< HTMLElement >;
 	elements.forEach( container => {
-		resetOtherValue( container );
+		handleOtherValue( container );
 	} );
 };
 
diff --git a/src/blocks/donate/frequency-based/style.scss b/src/blocks/donate/frequency-based/style.scss
index 1133dc638..60867eba4 100644
--- a/src/blocks/donate/frequency-based/style.scss
+++ b/src/blocks/donate/frequency-based/style.scss
@@ -42,6 +42,9 @@
 		@include mixins.media( tablet ) {
 			margin: 0 1.5rem 1.5rem;
 		}
+		&:disabled {
+			opacity: 0.5;
+		}
 	}
 	label.wpbnbd {
 		&__button {
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..078b273c0 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
@@ -194,7 +194,6 @@ class='odl'
 														type='number'
 														min='<?php echo esc_attr( $configuration['minimumDonation'] ); ?>'
 														name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_other'
-														value='<?php echo esc_attr( $amount ); ?>'
 														id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
 													/>
 												</div>
diff --git a/src/blocks/donate/styles/editor.scss b/src/blocks/donate/styles/editor.scss
index 2975e1ef5..c60703ba9 100644
--- a/src/blocks/donate/styles/editor.scss
+++ b/src/blocks/donate/styles/editor.scss
@@ -23,7 +23,7 @@
 		span {
 			margin-bottom: 7px;
 			display: inline-block;
-			width: 48%;
+			width: 32%;
 		}
 		input {
 			max-width: 100%;

From 115e9fb95c78a13f1d87f4d086e767311dc7007d Mon Sep 17 00:00:00 2001
From: Laurel <laurel.fulford@automattic.com>
Date: Tue, 12 Dec 2023 14:24:07 -0800
Subject: [PATCH 2/7] feat: accessibility improvements to the donate block tabs
 (#1622)

---
 .../donate/edit/FrequencyBasedLayout.tsx      |  32 ++++-
 src/blocks/donate/frequency-based/index.ts    |  62 +++++++++
 src/blocks/donate/frequency-based/style.scss  |  97 +++++---------
 ...blocks-donate-renderer-frequency-based.php |  62 ++++++++-
 .../donate/styles/style-variations.scss       | 125 ++++++++++--------
 src/blocks/donate/styles/view.scss            |   3 +-
 6 files changed, 250 insertions(+), 131 deletions(-)

diff --git a/src/blocks/donate/edit/FrequencyBasedLayout.tsx b/src/blocks/donate/edit/FrequencyBasedLayout.tsx
index 6ae184b1b..cd70edc42 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,39 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 				value={ frequencySlug }
 				id={ `newspack-donate-${ frequencySlug }-${ uid }` }
 				name="donation_frequency"
-				defaultChecked={ frequencySlug === attributes.defaultFrequency }
+				checked={ frequencySlug === selectedFrequency }
+				onChange={ evt => setSelectedFrequency( evt.target.value as 'once' | 'month' | 'year' ) }
 			/>
-			<label
-				htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }
-				className="wpbnbd__button freq-label"
-			>
+			<label htmlFor={ 'newspack-donate-' + frequencySlug + '-' + uid }>
 				{ FREQUENCIES[ frequencySlug ] }
 			</label>
 		</>
 	);
 
+	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
 	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( renderTab ) }</div>
 				{ availableFrequencies.map( frequencySlug => (
 					<div
 						className="wp-block-newspack-blocks-donate__frequency frequency"
@@ -123,6 +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( renderTab ) }</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 b6b2fc195..c80aa3e3a 100644
--- a/src/blocks/donate/frequency-based/index.ts
+++ b/src/blocks/donate/frequency-based/index.ts
@@ -68,12 +68,74 @@ const handleOtherValue = ( 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 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;
+
+	// 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.
+	tabList.forEach( ( tab: HTMLElement ) => {
+		tab.addEventListener( 'click', function () {
+			selectTab( tab, tabList, radioButtons, panels );
+		} );
+	} );
+};
+
+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 ) {
+			thisTab.setAttribute( 'aria-selected', 'true' );
+			thisTab.classList.add( 'wpbnbd__button--active' );
+		} else {
+			thisTab.setAttribute( 'aria-selected', 'false' );
+			thisTab.classList.remove( 'wpbnbd__button--active' );
+		}
+	} );
+
+	// Update the underlying radio button.
+	const tabId = tab.id || '';
+	const frequencyId = tabId.replace( 'tab-', '' );
+	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: HTMLElement ) => {
+		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 => {
 		handleOtherValue( container );
+		addAccessibleTabs( container );
 	} );
 };
 
diff --git a/src/blocks/donate/frequency-based/style.scss b/src/blocks/donate/frequency-based/style.scss
index 60867eba4..d63aa993e 100644
--- a/src/blocks/donate/frequency-based/style.scss
+++ b/src/blocks/donate/frequency-based/style.scss
@@ -9,9 +9,16 @@
 	position: relative;
 	width: 100%;
 
+	// 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] {
@@ -46,8 +53,9 @@
 			opacity: 0.5;
 		}
 	}
-	label.wpbnbd {
+	.wpbnbd {
 		&__button {
+			font-size: 16px;
 			text-transform: uppercase;
 		}
 	}
@@ -191,76 +199,35 @@
 	}
 }
 
-.wpbnbd .frequencies {
-	position: relative;
-	font-size: variables.$font__size-xs;
-	@include mixins.media( mobile ) {
-		font-size: variables.$font__size-sm;
+.wpbnbd {
+	.frequencies {
+		position: relative;
+		font-size: variables.$font__size-xs;
+		@include mixins.media( mobile ) {
+			font-size: variables.$font__size-sm;
+		}
 	}
 
-	padding-top: 2.65em;
-}
-
-.wpbnbd .frequency {
-	.freq-label {
-		position: absolute;
-		top: 0;
-		left: 0;
-		border-width: 0 0 1px;
+	.frequency input[type='radio']:checked ~ .tiers {
+		display: flex;
 	}
 
-	input[type='radio'] {
-		&:checked {
-			+ .freq-label {
-				color: inherit;
-				border-bottom-color: transparent;
-
-				&:hover {
-					background: colors.$color__background-body;
-				}
-			}
+	.tab-container {
+		display: flex;
+		.freq-label {
+			border-radius: 0;
+			margin: 0;
 
-			~ .tiers {
-				display: flex;
+			&.wpbnbd__button--active {
+				color: colors.$color__text-main;
 			}
-		}
-
-		&:focus + .freq-label {
-			text-decoration: underline;
-			text-decoration-style: dotted;
-			text-decoration-thickness: 1px;
-		}
-	}
-
-	&:nth-of-type( 3 ) .freq-label {
-		left: 66.66%;
-	}
-}
 
-.wpbnbd-frequencies {
-	&--2 {
-		&.wpbnbd .frequency {
-			.freq-label {
-				width: 50%;
-			}
-			&:nth-of-type( 2 ) .freq-label {
-				border-left-width: 1px;
-				left: 50%;
-				top: 0;
+			&:focus {
+				outline: 0;
+				text-decoration: underline;
+				text-decoration-style: dotted;
+				text-decoration-thickness: 1px;
 			}
 		}
 	}
-	&--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;
-			}
-		}
-	}
-}
+}
\ 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 078b273c0..17c5608a5 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,16 +38,41 @@ 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'
-		>
+		<label for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'>
 			<?php echo esc_html( $frequency_name ); ?>
 		</label>
 		<?php
 		return ob_get_clean();
 	}
 
+	/**
+	 * Renders the frequency selection of the donation form in accessible tabs.
+	 *
+	 * @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, $configuration ) {
+		ob_start();
+		?>
+		<button
+			role='tab'
+			type='button'
+			aria-controls='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+			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' ) . "'"; ?>
+			>
+				<?php echo esc_html( $frequency_name ); ?>
+		</button>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Renders the footer of the donation form.
 	 *
@@ -108,12 +133,25 @@ 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='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; ?>
+						</div>
+
 						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
 							<?php
 								$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
@@ -157,9 +195,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='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; ?>
+						</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..494ae75d0 100644
--- a/src/blocks/donate/styles/style-variations.scss
+++ b/src/blocks/donate/styles/style-variations.scss
@@ -21,6 +21,26 @@
 			}
 		}
 	}
+
+	&.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;
+		}
+		&--3 .tab-container .freq-label:nth-of-type( 2 ) {
+			border-left-width: 1px;
+			border-right-width: 1px;
+		}
+	}
 }
 
 /* Alternate Style */
@@ -65,17 +85,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 +102,35 @@
 			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;
+	// Tiers-based version.
+	.wpbnbd__tiers .wpbnbd__button {
 		border: 0.19rem solid transparent;
+
+		&--active {
+			border-color: white;
+		}
 	}
 
-	// Tiers-based version.
-	.wpbnbd__button--active,
+	.wpbnbd__tiers .wpbnbd__button--active,
 	// Frequency-based version.
-	.frequency input[type='radio']:checked + .freq-label::after {
+	.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;
 	}
 
-	.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;
+			}
+
+			&.wpbnbd__button--active {
+				color: colors.$color__text-main;
 				&::after {
 					box-sizing: content-box;
 					content: '';
@@ -125,17 +143,19 @@
 					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;
-				}
-			}
+	// 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;
 		}
 	}
 
@@ -260,34 +280,33 @@
 		}
 	}
 
-	.frequencies {
-		padding-top: calc( 0.76rem + 1.6em + 4px );
-	}
+	.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;
+			}
 
-	.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;
+			&::before {
+				border-width: 1px;
+				border-color: variables.$color__border;
+			}
 
-		@include mixins.media( tablet ) {
-			padding-left: 0.76rem;
-			padding-right: 0.76rem;
-		}
+			&.wpbnbd__button--active {
+				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 e4cee822d8fd029fd893aedab27d23834c197ba3 Mon Sep 17 00:00:00 2001
From: matticbot <semantic-release-bot@martynus.net>
Date: Fri, 15 Dec 2023 19:58:58 +0000
Subject: [PATCH 3/7] chore(release): 2.5.0-alpha.1 [skip ci]

# [2.5.0-alpha.1](https://github.com/Automattic/newspack-blocks/compare/v2.4.0...v2.5.0-alpha.1) (2023-12-15)

### Features

* accessibility improvements to the donate block tabs ([#1622](https://github.com/Automattic/newspack-blocks/issues/1622)) ([115e9fb](https://github.com/Automattic/newspack-blocks/commit/115e9fb95c78a13f1d87f4d086e767311dc7007d))
* **donate:** support empty value for "other" tier ([#1604](https://github.com/Automattic/newspack-blocks/issues/1604)) ([61ffdbc](https://github.com/Automattic/newspack-blocks/commit/61ffdbc57e6fda320766d4de99f097edac9e58f7))
---
 CHANGELOG.md        | 8 ++++++++
 newspack-blocks.php | 4 ++--
 package-lock.json   | 4 ++--
 package.json        | 2 +-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b217d603..5793f2ccc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# [2.5.0-alpha.1](https://github.com/Automattic/newspack-blocks/compare/v2.4.0...v2.5.0-alpha.1) (2023-12-15)
+
+
+### Features
+
+* accessibility improvements to the donate block tabs ([#1622](https://github.com/Automattic/newspack-blocks/issues/1622)) ([115e9fb](https://github.com/Automattic/newspack-blocks/commit/115e9fb95c78a13f1d87f4d086e767311dc7007d))
+* **donate:** support empty value for "other" tier ([#1604](https://github.com/Automattic/newspack-blocks/issues/1604)) ([61ffdbc](https://github.com/Automattic/newspack-blocks/commit/61ffdbc57e6fda320766d4de99f097edac9e58f7))
+
 # [2.4.0](https://github.com/Automattic/newspack-blocks/compare/v2.3.0...v2.4.0) (2023-12-11)
 
 
diff --git a/newspack-blocks.php b/newspack-blocks.php
index 25e843806..7d16871b0 100755
--- a/newspack-blocks.php
+++ b/newspack-blocks.php
@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         2.4.0
+ * Version:         2.5.0-alpha.1
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '2.4.0' );
+define( 'NEWSPACK_BLOCKS__VERSION', '2.5.0-alpha.1' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';
diff --git a/package-lock.json b/package-lock.json
index 0272bbe04..8b0f3a639 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "2.4.0",
+	"version": "2.5.0-alpha.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@automattic/newspack-blocks",
-			"version": "2.4.0",
+			"version": "2.5.0-alpha.1",
 			"hasInstallScript": true,
 			"license": "GPL-3.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index 09c981200..742d0b9b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "2.4.0",
+	"version": "2.5.0-alpha.1",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.5.1",

From a0040b43a3f97c889e5bb5b5b96f07777b52a670 Mon Sep 17 00:00:00 2001
From: Miguel Peixe <miguel.peixe@automattic.com>
Date: Mon, 18 Dec 2023 13:47:36 -0300
Subject: [PATCH 4/7] feat(modal-checkout): allow anonymous purchase for
 registered email (#1615)

Co-authored-by: leogermani <leogermani@automattic.com>
---
 includes/class-modal-checkout.php | 48 +++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php
index 64e915744..896ab2816 100644
--- a/includes/class-modal-checkout.php
+++ b/includes/class-modal-checkout.php
@@ -52,6 +52,10 @@ public static function init() {
 		add_filter( 'woocommerce_order_button_text', [ __CLASS__, 'order_button_text' ] );
 		add_filter( 'option_woocommerce_subscriptions_order_button_text', [ __CLASS__, 'order_button_text' ] );
 
+		/** Custom handling for registered users. */
+		add_filter( 'woocommerce_checkout_customer_id', [ __CLASS__, 'associate_existing_user' ] );
+		add_filter( 'woocommerce_checkout_posted_data', [ __CLASS__, 'skip_account_creation' ], 11 );
+
 		// Remove some stuff from the modal checkout page. It's displayed in an iframe, so it should not be treated as a separate page.
 		add_action( 'wp_enqueue_scripts', [ __CLASS__, 'dequeue_scripts' ], 11 );
 		add_filter( 'newspack_reader_activation_should_render_auth', [ __CLASS__, 'is_not_modal_checkout_filter' ] );
@@ -973,6 +977,50 @@ public static function order_button_text( $text ) {
 		return $text;
 	}
 
+	/**
+	 * If a reader tries to make a purchase with an email address that
+	 * has been previously registered, automatically associate the transaction
+	 * with the user.
+	 *
+	 * @param int $customer_id Current customer ID.
+	 *
+	 * @return int Modified $customer_id
+	 */
+	public static function associate_existing_user( $customer_id ) {
+		if ( ! self::is_modal_checkout() ) {
+			return $customer_id;
+		}
+		$billing_email = filter_input( INPUT_POST, 'billing_email', FILTER_SANITIZE_EMAIL );
+		if ( $billing_email ) {
+			$customer = \get_user_by( 'email', $billing_email );
+			if ( $customer ) {
+				$customer_id = $customer->ID;
+			}
+		}
+		return $customer_id;
+	}
+
+	/**
+	 * Don't force account registration/login on Woo purchases for existing users.
+	 *
+	 * @param array $data Array of Woo checkout data.
+	 *
+	 * @return array Modified $data.
+	 */
+	public static function skip_account_creation( $data ) {
+		if ( ! self::is_modal_checkout() ) {
+			return $data;
+		}
+		$email    = $data['billing_email'];
+		$customer = \get_user_by( 'email', $email );
+		if ( $customer ) {
+			$data['createaccount'] = 0;
+			\add_filter( 'woocommerce_checkout_registration_required', '__return_false', 9999 );
+		}
+
+		return $data;
+	}
+
 	/**
 	 * Filter the a value dependent on the page not being modal checkout.
 	 *

From 608979c1e9cb63a7098da27c69c337ec233b7429 Mon Sep 17 00:00:00 2001
From: leogermani <leogermani@automattic.com>
Date: Fri, 22 Dec 2023 12:20:35 -0300
Subject: [PATCH 5/7] fix: avoid duplicity with linked guest authors (#1632)

---
 ...ass-wp-rest-newspack-authors-controller.php | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/blocks/author-profile/class-wp-rest-newspack-authors-controller.php b/src/blocks/author-profile/class-wp-rest-newspack-authors-controller.php
index 003bd9bf6..4c88efd10 100644
--- a/src/blocks/author-profile/class-wp-rest-newspack-authors-controller.php
+++ b/src/blocks/author-profile/class-wp-rest-newspack-authors-controller.php
@@ -84,6 +84,8 @@ public function get_authors( $request ) {
 		// Total number of users and guest authors.
 		$guest_author_total = 0;
 		$user_total         = 0;
+		$guest_authors = [];
+		$linked_guest_authors = [];
 
 		// Get Co-authors guest authors.
 		if ( $is_guest_author ) {
@@ -108,6 +110,14 @@ public function get_authors( $request ) {
 			$guest_author_total = count( $guest_authors );
 		}
 
+		foreach ( $guest_authors as $ga ) {
+			$linked_guest_author = get_post_meta( $ga->ID, 'cap-linked_account', true );
+
+			if ( $linked_guest_author ) {
+				$linked_guest_authors[] = $linked_guest_author;
+			}
+		}
+
 		$users = [];
 
 		// If passed an author ID.
@@ -187,8 +197,14 @@ function( $acc, $guest_author ) use ( $fields, $avatar_hide_default ) {
 			),
 			array_reduce(
 				$users,
-				function( $acc, $user ) use ( $fields, $avatar_hide_default ) {
+				function( $acc, $user ) use ( $fields, $avatar_hide_default, $linked_guest_authors ) {
 					if ( $user ) {
+
+						// This user is linked to a guest author already returned in the query, so skip it.
+						if ( in_array( $user->data->user_login, $linked_guest_authors, true ) ) {
+							return $acc;
+						}
+
 						$user_data = [
 							'id'         => intval( $user->data->ID ),
 							'registered' => $user->data->user_registered,

From 07c0642e77a075750c6f436f12af99cd3e2ef360 Mon Sep 17 00:00:00 2001
From: Miguel Peixe <miguel.peixe@automattic.com>
Date: Fri, 22 Dec 2023 15:45:03 -0300
Subject: [PATCH 6/7] fix(modal-checkout): show order details table with fees
 (#1633)

---
 includes/class-modal-checkout.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php
index 896ab2816..bec59c382 100644
--- a/includes/class-modal-checkout.php
+++ b/includes/class-modal-checkout.php
@@ -701,6 +701,9 @@ public static function should_show_order_details() {
 		if ( 1 < $cart->get_cart_contents_count() ) {
 			return true;
 		}
+		if ( ! empty( $cart->get_fees() ) ) {
+			return true;
+		}
 		return false;
 	}
 

From 6a2045e3abe9f317b214bf0c16f76d51712b5b4b Mon Sep 17 00:00:00 2001
From: matticbot <semantic-release-bot@martynus.net>
Date: Fri, 22 Dec 2023 21:19:59 +0000
Subject: [PATCH 7/7] chore(release): 2.5.0-alpha.2 [skip ci]

# [2.5.0-alpha.2](https://github.com/Automattic/newspack-blocks/compare/v2.5.0-alpha.1...v2.5.0-alpha.2) (2023-12-22)

### Bug Fixes

* avoid duplicity with linked guest authors ([#1632](https://github.com/Automattic/newspack-blocks/issues/1632)) ([608979c](https://github.com/Automattic/newspack-blocks/commit/608979c1e9cb63a7098da27c69c337ec233b7429))
* **modal-checkout:** show order details table with fees ([#1633](https://github.com/Automattic/newspack-blocks/issues/1633)) ([07c0642](https://github.com/Automattic/newspack-blocks/commit/07c0642e77a075750c6f436f12af99cd3e2ef360))

### Features

* **modal-checkout:** allow anonymous purchase for registered email ([#1615](https://github.com/Automattic/newspack-blocks/issues/1615)) ([a0040b4](https://github.com/Automattic/newspack-blocks/commit/a0040b43a3f97c889e5bb5b5b96f07777b52a670))
---
 CHANGELOG.md        | 13 +++++++++++++
 newspack-blocks.php |  4 ++--
 package-lock.json   |  4 ++--
 package.json        |  2 +-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5793f2ccc..8729ab80b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# [2.5.0-alpha.2](https://github.com/Automattic/newspack-blocks/compare/v2.5.0-alpha.1...v2.5.0-alpha.2) (2023-12-22)
+
+
+### Bug Fixes
+
+* avoid duplicity with linked guest authors ([#1632](https://github.com/Automattic/newspack-blocks/issues/1632)) ([608979c](https://github.com/Automattic/newspack-blocks/commit/608979c1e9cb63a7098da27c69c337ec233b7429))
+* **modal-checkout:** show order details table with fees ([#1633](https://github.com/Automattic/newspack-blocks/issues/1633)) ([07c0642](https://github.com/Automattic/newspack-blocks/commit/07c0642e77a075750c6f436f12af99cd3e2ef360))
+
+
+### Features
+
+* **modal-checkout:** allow anonymous purchase for registered email ([#1615](https://github.com/Automattic/newspack-blocks/issues/1615)) ([a0040b4](https://github.com/Automattic/newspack-blocks/commit/a0040b43a3f97c889e5bb5b5b96f07777b52a670))
+
 # [2.5.0-alpha.1](https://github.com/Automattic/newspack-blocks/compare/v2.4.0...v2.5.0-alpha.1) (2023-12-15)
 
 
diff --git a/newspack-blocks.php b/newspack-blocks.php
index 7d16871b0..871852dbf 100755
--- a/newspack-blocks.php
+++ b/newspack-blocks.php
@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         2.5.0-alpha.1
+ * Version:         2.5.0-alpha.2
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '2.5.0-alpha.1' );
+define( 'NEWSPACK_BLOCKS__VERSION', '2.5.0-alpha.2' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';
diff --git a/package-lock.json b/package-lock.json
index 8b0f3a639..1f741972a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "2.5.0-alpha.1",
+	"version": "2.5.0-alpha.2",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@automattic/newspack-blocks",
-			"version": "2.5.0-alpha.1",
+			"version": "2.5.0-alpha.2",
 			"hasInstallScript": true,
 			"license": "GPL-3.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index 742d0b9b1..9ceeaa927 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "2.5.0-alpha.1",
+	"version": "2.5.0-alpha.2",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.5.1",