diff --git a/app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx b/app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx new file mode 100644 index 0000000000..701af2d98c --- /dev/null +++ b/app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx @@ -0,0 +1,81 @@ +import { useState, useRef, useCallback, useId } from 'react'; + +import { FormattedMessage, useIntl, defineMessages } from 'react-intl'; + +import classNames from 'classnames'; + +import Overlay from 'react-overlays/Overlay'; + +import QuestionMarkIcon from '@/material-icons/400-24px/question_mark.svg?react'; +import { Icon } from 'mastodon/components/icon'; + +const messages = defineMessages({ + help: { id: 'info_button.label', defaultMessage: 'Help' }, +}); + +export const InfoButton: React.FC = () => { + const intl = useIntl(); + const [open, setOpen] = useState(false); + const triggerRef = useRef(null); + const accessibilityId = useId(); + + const handleClick = useCallback(() => { + setOpen(!open); + }, [open, setOpen]); + + return ( + <> + + + + {({ props }) => ( +
+

{node}

, + p: (node) =>

{node}

, + ul: (node) =>
    {node}
, + li: (node) =>
  • {node}
  • , + }} + /> +
    + )} +
    + + ); +}; diff --git a/app/javascript/mastodon/features/alt_text_modal/index.tsx b/app/javascript/mastodon/features/alt_text_modal/index.tsx index 88ffb7c477..80c4f36105 100644 --- a/app/javascript/mastodon/features/alt_text_modal/index.tsx +++ b/app/javascript/mastodon/features/alt_text_modal/index.tsx @@ -36,6 +36,8 @@ import type { MediaAttachment } from 'mastodon/models/media_attachment'; import { useAppSelector, useAppDispatch } from 'mastodon/store'; import { assetHost } from 'mastodon/utils/config'; +import { InfoButton } from './components/info_button'; + const messages = defineMessages({ placeholderVisual: { id: 'alt_text_modal.describe_for_people_with_visual_impairments', @@ -504,6 +506,13 @@ export const AltTextModal = forwardRef>(
    + + +
    + - +
    diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index ac05c0f53e..a2dedd22d5 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -414,6 +414,8 @@ "ignore_notifications_modal.not_followers_title": "Ignore notifications from people not following you?", "ignore_notifications_modal.not_following_title": "Ignore notifications from people you don't follow?", "ignore_notifications_modal.private_mentions_title": "Ignore notifications from unsolicited Private Mentions?", + "info_button.label": "Help", + "info_button.what_is_alt_text": "

    What is alt text?

    Alt text provides image descriptions for people with vision impairments, low-bandwidth connections, or those seeking extra context.

    You can improve accessibility and understanding for everyone by writing clear, concise, and objective alt text.

    ", "interaction_modal.action.favourite": "To continue, you need to favorite from your account.", "interaction_modal.action.follow": "To continue, you need to follow from your account.", "interaction_modal.action.reblog": "To continue, you need to reblog from your account.", diff --git a/app/javascript/material-icons/400-24px/question_mark-fill.svg b/app/javascript/material-icons/400-24px/question_mark-fill.svg new file mode 100644 index 0000000000..9b02086c4d --- /dev/null +++ b/app/javascript/material-icons/400-24px/question_mark-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/question_mark.svg b/app/javascript/material-icons/400-24px/question_mark.svg new file mode 100644 index 0000000000..9b02086c4d --- /dev/null +++ b/app/javascript/material-icons/400-24px/question_mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ff7f1b75a4..ed23a88d41 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -50,6 +50,34 @@ } } +.help-button { + background: $ui-button-background-color; + border: 0; + color: $ui-button-color; + border-radius: 20px; + cursor: pointer; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + + &:active, + &:focus, + &:hover { + background-color: $ui-button-focus-background-color; + } + + &:focus-visible { + outline: $ui-button-icon-focus-outline; + } + + .icon { + width: 14px; + height: 14px; + } +} + .button { background-color: $ui-button-background-color; border: 10px none; @@ -6091,6 +6119,20 @@ a.status-card { } } + &__popout { + background: var(--dropdown-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--dropdown-border-color); + box-shadow: var(--dropdown-shadow); + max-width: 320px; + padding: 16px; + border-radius: 8px; + z-index: 9999 !important; + font-size: 14px; + line-height: 20px; + color: $darker-text-color; + } + .copy-paste-text { margin-bottom: 0; } diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index a8949b7100..b9f86f82a2 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -83,9 +83,12 @@ code { &__toolbar { margin-top: 16px; display: flex; - justify-content: space-between; align-items: center; gap: 16px; + + .character-counter { + flex: 0 0 auto; + } } &.hidden { @@ -565,7 +568,7 @@ code { margin-bottom: 15px; } - button:not(.button, .link-button) { + button:not(.button, .link-button, .help-button) { display: block; width: 100%; border: 0;