pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 13:05:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): keep focus and its ring on a spoiler after it is revealed (#1961)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:53:47 +02:00
1 parent 38e86acffe
commit b51562d0e3
2 files changed
+35 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/shared/SpoilerOverlay.tsx
+19 -1
View File
@@ -6,6 +6,7 @@ import {msg} from '@lingui/core/macro';
import {useLingui} from '@lingui/react/macro';
import {clsx} from 'clsx';
import type {FC, ReactNode} from 'react';
import {useCallback, useLayoutEffect, useRef} from 'react';
const REVEAL_SPOILER_DESCRIPTOR = msg({
message: 'Reveal spoiler',
@@ -27,9 +28,26 @@ interface SpoilerOverlayProps {
export const SpoilerOverlay: FC<SpoilerOverlayProps> = ({hidden, onReveal, children, label, inline, className}) => {
const {i18n} = useLingui();
const wrapperElementRef = useRef<HTMLDivElement | null>(null);
const pendingFocusHandoffRef = useRef(false);
const ariaLabel = label ?? i18n._(REVEAL_SPOILER_DESCRIPTOR);
const handleRevealRequest = useCallback(() => {
pendingFocusHandoffRef.current = true;
onReveal();
}, [onReveal]);
useLayoutEffect(() => {
if (hidden) {
pendingFocusHandoffRef.current = false;
return;
}
if (!pendingFocusHandoffRef.current) return;
pendingFocusHandoffRef.current = false;
wrapperElementRef.current?.focus({preventScroll: true});
}, [hidden]);
return (
<div
ref={wrapperElementRef}
tabIndex={-1}
className={clsx(styles.container, inline && styles.inline, hidden && styles.hidden, className)}
data-flx="app.spoiler-overlay.container"
>
@@ -41,7 +59,7 @@ export const SpoilerOverlay: FC<SpoilerOverlayProps> = ({hidden, onReveal, child
<button
type="button"
className={styles.overlayButton}
onClick={onReveal}
onClick={handleRevealRequest}
aria-label={ariaLabel}
data-flx="app.spoiler-overlay.overlay-button.reveal"
>
fluxer_app/src/features/messaging/components/markdown/renderers/common/FormattingElements.tsx
+16 -27
View File
@@ -93,17 +93,30 @@ export const SpoilerRenderer = observer(function SpoilerRenderer({
const wrapperClass = isBlock ? markupStyles.blockSpoilerWrapper : markupStyles.spoilerWrapper;
const spoilerClass = isBlock ? markupStyles.blockSpoiler : markupStyles.spoiler;
const shouldReveal = !hidden || autoRevealed;
const revealTriggerProps = shouldReveal
? {}
: {
onClick: handleClick,
onKeyDown: handleKeyDown,
role: 'button',
'aria-label': i18n._(CLICK_TO_REVEAL_SPOILER_DESCRIPTOR),
};
return (
<span
key={id}
className={wrapperClass}
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.span"
>
{shouldReveal ? (
<FocusRing
offset={-2}
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.focus-ring"
>
<span
className={spoilerClass}
data-revealed={shouldReveal}
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.span--2"
tabIndex={shouldReveal ? -1 : 0}
{...revealTriggerProps}
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.button.click"
>
<span
className={markupStyles.spoilerContent}
@@ -113,31 +126,7 @@ export const SpoilerRenderer = observer(function SpoilerRenderer({
{renderChildren(node.children)}
</span>
</span>
) : (
<FocusRing
offset={-2}
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.focus-ring"
>
<span
className={spoilerClass}
data-revealed={shouldReveal}
onClick={handleClick}
onKeyDown={handleKeyDown}
role="button"
tabIndex={0}
aria-label={i18n._(CLICK_TO_REVEAL_SPOILER_DESCRIPTOR)}
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.button.click"
>
<span
className={markupStyles.spoilerContent}
aria-hidden
data-flx="messaging.markdown.renderers.common.formatting-elements.spoiler-renderer.span--4"
>
{renderChildren(node.children)}
</span>
</span>
</FocusRing>
)}
</FocusRing>
</span>
);
});