diff --git a/fluxer_app/src/features/user/components/modals/user_profile_modal/ProfileMediaHeader.tsx b/fluxer_app/src/features/user/components/modals/user_profile_modal/ProfileMediaHeader.tsx
index 3898b423c..72505b272 100644
--- a/fluxer_app/src/features/user/components/modals/user_profile_modal/ProfileMediaHeader.tsx
+++ b/fluxer_app/src/features/user/components/modals/user_profile_modal/ProfileMediaHeader.tsx
@@ -215,67 +215,55 @@ export const ProfileMediaHeader: React.FC<ProfileMediaHeaderProps> = observer(
 		);
 		return (
 			<header style={PROFILE_MODAL_GEOMETRY_STYLE} data-flx="user.user-profile-modal.profile-media-header.header">
-				{hasBannerMenu ? (
-					<FocusRing data-flx="user.user-profile-modal.profile-media-header.focus-ring">
-						<div
-							ref={mergedBannerRef}
-							className={userProfileModalStyles.bannerContainer}
-							onContextMenu={(event) => handleImageContextMenu(event, hasBannerMenu, renderBannerMenu)}
-							onKeyDown={(event) => handleImageKeyDown(event, hasBannerMenu, renderBannerMenu)}
-							role="button"
-							tabIndex={0}
-							aria-label={i18n._(OPEN_BANNER_OPTIONS_DESCRIPTOR)}
-							data-flx="user.user-profile-modal.profile-media-header.button.image-key-down"
-						>
-							{bannerContent}
-							{showGifIndicator && (
-								<GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator" />
-							)}
-						</div>
-					</FocusRing>
-				) : (
+				<FocusRing enabled={hasBannerMenu} data-flx="user.user-profile-modal.profile-media-header.focus-ring">
+					{/* biome-ignore lint/a11y/noStaticElementInteractions: the banner only takes role="button"/tabIndex when an image menu exists, and the element stays mounted either way so the banner image is never refetched. */}
+					{/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label is set only alongside role="button". */}
 					<div
 						ref={mergedBannerRef}
 						className={userProfileModalStyles.bannerContainer}
-						data-flx="user.user-profile-modal.profile-media-header.div--2"
+						onContextMenu={
+							hasBannerMenu ? (event) => handleImageContextMenu(event, hasBannerMenu, renderBannerMenu) : undefined
+						}
+						onKeyDown={
+							hasBannerMenu ? (event) => handleImageKeyDown(event, hasBannerMenu, renderBannerMenu) : undefined
+						}
+						role={hasBannerMenu ? 'button' : undefined}
+						tabIndex={hasBannerMenu ? 0 : undefined}
+						aria-label={hasBannerMenu ? i18n._(OPEN_BANNER_OPTIONS_DESCRIPTOR) : undefined}
+						data-flx="user.user-profile-modal.profile-media-header.button.image-key-down"
 					>
 						{bannerContent}
-						{showGifIndicator && (
-							<GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator--2" />
-						)}
+						{showGifIndicator && <GifIndicator data-flx="user.user-profile-modal.profile-media-header.gif-indicator" />}
 					</div>
-				)}
+				</FocusRing>
 				<div
 					className={userProfileModalStyles.headerContainer}
 					data-flx="user.user-profile-modal.profile-media-header.div--3"
 				>
-					{hasAvatarMenu ? (
-						<FocusRing
-							ringClassName={userProfileModalStyles.avatarFocusRing}
-							data-flx="user.user-profile-modal.profile-media-header.focus-ring--2"
-						>
-							<div
-								className={userProfileModalStyles.avatarContainer}
-								style={avatarContainerStyle}
-								onContextMenu={(event) => handleImageContextMenu(event, hasAvatarMenu, renderAvatarMenu)}
-								onKeyDown={(event) => handleImageKeyDown(event, hasAvatarMenu, renderAvatarMenu)}
-								role="button"
-								tabIndex={0}
-								aria-label={i18n._(OPEN_AVATAR_OPTIONS_DESCRIPTOR)}
-								data-flx="user.user-profile-modal.profile-media-header.button.image-key-down--2"
-							>
-								{avatarContent}
-							</div>
-						</FocusRing>
-					) : (
+					<FocusRing
+						enabled={hasAvatarMenu}
+						ringClassName={userProfileModalStyles.avatarFocusRing}
+						data-flx="user.user-profile-modal.profile-media-header.focus-ring--2"
+					>
+						{/* biome-ignore lint/a11y/noStaticElementInteractions: the avatar frame only takes role="button"/tabIndex when an image menu exists, and the element stays mounted either way so the avatar is never refetched. */}
+						{/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label is set only alongside role="button". */}
 						<div
 							className={userProfileModalStyles.avatarContainer}
 							style={avatarContainerStyle}
-							data-flx="user.user-profile-modal.profile-media-header.div--4"
+							onContextMenu={
+								hasAvatarMenu ? (event) => handleImageContextMenu(event, hasAvatarMenu, renderAvatarMenu) : undefined
+							}
+							onKeyDown={
+								hasAvatarMenu ? (event) => handleImageKeyDown(event, hasAvatarMenu, renderAvatarMenu) : undefined
+							}
+							role={hasAvatarMenu ? 'button' : undefined}
+							tabIndex={hasAvatarMenu ? 0 : undefined}
+							aria-label={hasAvatarMenu ? i18n._(OPEN_AVATAR_OPTIONS_DESCRIPTOR) : undefined}
+							data-flx="user.user-profile-modal.profile-media-header.button.image-key-down--2"
 						>
 							{avatarContent}
 						</div>
-					)}
+					</FocusRing>
 					<div
 						className={userProfileModalStyles.actionButtonsContainer}
 						data-flx="user.user-profile-modal.profile-media-header.div--5"