diff --git a/app/javascript/flavours/glitch/components/content_warning.tsx b/app/javascript/flavours/glitch/components/content_warning.tsx index a261719d2d..2312d69c27 100644 --- a/app/javascript/flavours/glitch/components/content_warning.tsx +++ b/app/javascript/flavours/glitch/components/content_warning.tsx @@ -20,6 +20,6 @@ export const ContentWarning: React.FC<{ key={`icon-${icon}`} /> ))} -

+ ); diff --git a/app/javascript/flavours/glitch/components/filter_warning.tsx b/app/javascript/flavours/glitch/components/filter_warning.tsx index 5eaaac4ba3..9e984a90f4 100644 --- a/app/javascript/flavours/glitch/components/filter_warning.tsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/status_banner.tsx b/app/javascript/flavours/glitch/components/status_banner.tsx index d25c05d6db..61aede567c 100644 --- a/app/javascript/flavours/glitch/components/status_banner.tsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index bba243ef47..428214c92e 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/components/status_content.jsx @@ -349,7 +349,7 @@ class StatusContent extends PureComponent { if (this.props.onClick) { return ( <> -
+
{poll} @@ -361,7 +361,7 @@ class StatusContent extends PureComponent { ); } else { return ( -
+
{poll}