Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-11 14:30:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] fix: Remove redundant focus stop within status

Browse Source 
Port ed4788a342 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-13 18:47:02 +02:00
committed by Claire
parent 2c751a6a19
commit 19aa68897b
4 changed files with 62 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/components/content_warning.tsx
View File

@@ -20,6 +20,6 @@ export const ContentWarning: React.FC<{
key={`icon-${icon}`}
/>
))}
<p dangerouslySetInnerHTML={{ __html: text }} />
<span dangerouslySetInnerHTML={{ __html: text }} />
</StatusBanner>
);

18
app/javascript/flavours/glitch/components/filter_warning.tsx
View File

@@ -12,15 +12,13 @@ export const FilterWarning: React.FC<{
onClick={onClick}
variant={BannerVariant.Filter}
>
<p>
<FormattedMessage
id='filter_warning.matches_filter'
defaultMessage='Matches filter “<span>{title}</span>”'
values={{
title,
span: (chunks) => <span className='filter-name'>{chunks}</span>,
}}
/>
</p>
<FormattedMessage
id='filter_warning.matches_filter'
defaultMessage='Matches filter “<span>{title}</span>”'
values={{
title,
span: (chunks) => <span className='filter-name'>{chunks}</span>,
}}
/>
</StatusBanner>
);

80
app/javascript/flavours/glitch/components/status_banner.tsx
View File

@@ -1,3 +1,6 @@
import type { MouseEventHandler } from 'react';
import { useCallback, useRef, useId } from 'react';
import { FormattedMessage } from 'react-intl';
export enum BannerVariant {
@@ -10,33 +13,52 @@ export const StatusBanner: React.FC<{
variant: BannerVariant;
expanded?: boolean;
onClick?: () => void;
}> = ({ children, variant, expanded, onClick }) => (
<label
className={
variant === BannerVariant.Warning
? 'content-warning'
: 'content-warning content-warning--filter'
}
>
{children}
}> = ({ children, variant, expanded, onClick }) => {
const descriptionId = useId();
<button className='link-button' onClick={onClick}>
{expanded ? (
<FormattedMessage
id='content_warning.hide'
defaultMessage='Hide post'
/>
) : variant === BannerVariant.Warning ? (
<FormattedMessage
id='content_warning.show_more'
defaultMessage='Show more'
/>
) : (
<FormattedMessage
id='content_warning.show'
defaultMessage='Show anyway'
/>
)}
</button>
</label>
);
const buttonRef = useRef<HTMLButtonElement>(null);
const forwardClick = useCallback<MouseEventHandler>((e) => {
if (buttonRef.current && e.target !== buttonRef.current) {
buttonRef.current.click();
}
}, []);
return (
// Element clicks are passed on to button
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div
className={
variant === BannerVariant.Warning
? 'content-warning'
: 'content-warning content-warning--filter'
}
onClick={forwardClick}
>
<p id={descriptionId}>{children}</p>
<button
ref={buttonRef}
className='link-button'
onClick={onClick}
aria-describedby={descriptionId}
>
{expanded ? (
<FormattedMessage
id='content_warning.hide'
defaultMessage='Hide post'
/>
) : variant === BannerVariant.Warning ? (
<FormattedMessage
id='content_warning.show_more'
defaultMessage='Show more'
/>
) : (
<FormattedMessage
id='content_warning.show'
defaultMessage='Show anyway'
/>
)}
</button>
</div>
);
};

4
app/javascript/flavours/glitch/components/status_content.jsx
View File

@@ -349,7 +349,7 @@ class StatusContent extends PureComponent {
if (this.props.onClick) {
return (
<>
<div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} tabIndex={0} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='status__content__text status__content__text--visible translate' lang={language} dangerouslySetInnerHTML={content} />
{poll}
@@ -361,7 +361,7 @@ class StatusContent extends PureComponent {
);
} else {
return (
<div className={classNames} ref={this.setRef} tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className={classNames} ref={this.setRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='status__content__text status__content__text--visible translate' lang={language} dangerouslySetInnerHTML={content} />
{poll}