diff --git a/app/javascript/mastodon/components/content_warning.tsx b/app/javascript/mastodon/components/content_warning.tsx index c1c879b55..6bcae1d6f 100644 --- a/app/javascript/mastodon/components/content_warning.tsx +++ b/app/javascript/mastodon/components/content_warning.tsx @@ -10,6 +10,6 @@ export const ContentWarning: React.FC<{ onClick={onClick} variant={BannerVariant.Warning} > -

+ ); diff --git a/app/javascript/mastodon/components/filter_warning.tsx b/app/javascript/mastodon/components/filter_warning.tsx index 5eaaac4ba..9e984a90f 100644 --- a/app/javascript/mastodon/components/filter_warning.tsx +++ b/app/javascript/mastodon/components/filter_warning.tsx @@ -12,15 +12,13 @@ export const FilterWarning: React.FC<{ onClick={onClick} variant={BannerVariant.Filter} > -

- {chunks}, - }} - /> -

+ {chunks}, + }} + /> ); diff --git a/app/javascript/mastodon/components/status_banner.tsx b/app/javascript/mastodon/components/status_banner.tsx index d25c05d6d..61aede567 100644 --- a/app/javascript/mastodon/components/status_banner.tsx +++ b/app/javascript/mastodon/components/status_banner.tsx @@ -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 }) => ( - -); + const buttonRef = useRef(null); + const forwardClick = useCallback((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 +
+

{children}

+ + +
+ ); +}; diff --git a/app/javascript/mastodon/components/status_content.jsx b/app/javascript/mastodon/components/status_content.jsx index 275fea5f0..0628e0791 100644 --- a/app/javascript/mastodon/components/status_content.jsx +++ b/app/javascript/mastodon/components/status_content.jsx @@ -252,7 +252,7 @@ class StatusContent extends PureComponent { if (this.props.onClick) { return ( <> -
+
{poll} @@ -264,7 +264,7 @@ class StatusContent extends PureComponent { ); } else { return ( -
+
{poll}