pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-18 21:45:31 +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/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>
);
});