gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Merge remote-tracking branch 'parent/main' into upstream-20240128

Browse source
This commit is contained in:
KMY 2025-01-31 08:52:03 +09:00
commit bd5b417d2b
107 changed files with 795 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/javascript/mastodon/features/account/components/domain_pill.tsx
View file

@ -1,4 +1,4 @@
import { useState, useRef, useCallback } from 'react';
import { useState, useRef, useCallback, useId } from 'react';
import { FormattedMessage } from 'react-intl';
@ -16,6 +16,7 @@ export const DomainPill: React.FC<{
username: string;
isSelf: boolean;
}> = ({ domain, username, isSelf }) => {
const accessibilityId = useId();
const [open, setOpen] = useState(false);
const [expanded, setExpanded] = useState(false);
const triggerRef = useRef(null);
@ -34,6 +35,8 @@ export const DomainPill: React.FC<{
className={classNames('account__domain-pill', { active: open })}
ref={triggerRef}
onClick={handleClick}
aria-expanded={open}
aria-controls={accessibilityId}
>
{domain}
</button>
@ -48,6 +51,8 @@ export const DomainPill: React.FC<{
{({ props }) => (
<div
{...props}
role='region'
id={accessibilityId}
className='account__domain-pill__popout dropdown-animation'
>
<div className='account__domain-pill__popout__header'>

8
app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx
View file

@ -6,6 +6,7 @@ import classNames from 'classnames';
import Overlay from 'react-overlays/Overlay';
import { useSelectableClick } from '@/hooks/useSelectableClick';
import QuestionMarkIcon from '@/material-icons/400-24px/question_mark.svg?react';
import { Icon } from 'mastodon/components/icon';
@ -23,6 +24,8 @@ export const InfoButton: React.FC = () => {
setOpen(!open);
}, [open, setOpen]);
const [handleMouseDown, handleMouseUp] = useSelectableClick(handleClick);
return (
<>
<button
@ -46,10 +49,13 @@ export const InfoButton: React.FC = () => {
target={triggerRef}
>
{({ props }) => (
<div
<div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
{...props}
className='dialog-modal__popout prose dropdown-animation'
role='region'
id={accessibilityId}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
>
<FormattedMessage
id='info_button.what_is_alt_text'

5
app/javascript/mastodon/features/compose/components/compose_form.jsx
View file

@ -10,6 +10,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { missingAltTextModal } from 'mastodon/initial_state';
import AutosuggestInput from '../../../components/autosuggest_input';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import { Button } from '../../../components/button';
@ -73,6 +75,7 @@ class ComposeForm extends ImmutablePureComponent {
autoFocus: PropTypes.bool,
withoutNavigation: PropTypes.bool,
anyMedia: PropTypes.bool,
missingAltText: PropTypes.bool,
isInReply: PropTypes.bool,
singleColumn: PropTypes.bool,
lang: PropTypes.string,
@ -126,7 +129,7 @@ class ComposeForm extends ImmutablePureComponent {
return;
}
this.props.onSubmit();
this.props.onSubmit(missingAltTextModal && this.props.missingAltText);
if (e) {
e.preventDefault();

16
app/javascript/mastodon/features/compose/containers/compose_form_container.js
View file

@ -11,7 +11,9 @@ import {
insertExpirationCompose,
insertFeaturedTagCompose,
uploadCompose,
} from '../../../actions/compose';
} from 'mastodon/actions/compose';
import { openModal } from 'mastodon/actions/modal';
import ComposeForm from '../components/compose_form';
const mapStateToProps = state => ({
@ -29,6 +31,7 @@ const mapStateToProps = state => ({
isChangingUpload: state.getIn(['compose', 'is_changing_upload']),
isUploading: state.getIn(['compose', 'is_uploading']),
anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
missingAltText: state.getIn(['compose', 'media_attachments']).some(media => ['image', 'gifv'].includes(media.get('type')) && (media.get('description') ?? '').length === 0),
isInReply: state.getIn(['compose', 'in_reply_to']) !== null,
lang: state.getIn(['compose', 'language']),
circleId: state.getIn(['compose', 'circle_id']),
@ -41,8 +44,15 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(changeCompose(text));
},
onSubmit () {
dispatch(submitCompose());
onSubmit (missingAltText) {
if (missingAltText) {
dispatch(openModal({
modalType: 'CONFIRM_MISSING_ALT_TEXT',
modalProps: {},
}));
} else {
dispatch(submitCompose());
}
},
onClearSuggestions () {

2
app/javascript/mastodon/features/compose/util/language_detection.js
View file

@ -73,4 +73,4 @@ const guessLanguage = (text) => {
export const debouncedGuess = debounce((text, setGuess) => {
setGuess(guessLanguage(text));
}, 500, { leading: true, trailing: true });
}, 500, { maxWait: 1500, leading: true, trailing: true });

17
app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx
View file

@ -56,14 +56,6 @@ export const ConfirmationModal: React.FC<
<div className='safety-action-modal__bottom'>
<div className='safety-action-modal__actions'>
{secondary && (
<>
<Button onClick={handleSecondary}>{secondary}</Button>
<div className='spacer' />
</>
)}
<button onClick={handleCancel} className='link-button'>
<FormattedMessage
id='confirmation_modal.cancel'
@ -71,6 +63,15 @@ export const ConfirmationModal: React.FC<
/>
</button>
{secondary && (
<>
<div className='spacer' />
<button onClick={handleSecondary} className='link-button'>
{secondary}
</button>
</>
)}
{/* eslint-disable-next-line jsx-a11y/no-autofocus -- we are in a modal and thus autofocusing is justified */}
<Button onClick={handleClick} autoFocus>
{confirm}

1
app/javascript/mastodon/features/ui/components/confirmation_modals/index.ts
View file

@ -10,3 +10,4 @@ export { ConfirmUnfollowModal } from './unfollow';
export { ConfirmClearNotificationsModal } from './clear_notifications';
export { ConfirmLogOutModal } from './log_out';
export { ConfirmFollowToListModal } from './follow_to_list';
export { ConfirmMissingAltTextModal } from './missing_alt_text';

81
app/javascript/mastodon/features/ui/components/confirmation_modals/missing_alt_text.tsx Normal file
View file

@ -0,0 +1,81 @@
import { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { submitCompose } from 'mastodon/actions/compose';
import { openModal } from 'mastodon/actions/modal';
import type { MediaAttachment } from 'mastodon/models/media_attachment';
import { useAppDispatch, useAppSelector } from 'mastodon/store';
import type { BaseConfirmationModalProps } from './confirmation_modal';
import { ConfirmationModal } from './confirmation_modal';
const messages = defineMessages({
title: {
id: 'confirmations.missing_alt_text.title',
defaultMessage: 'Add alt text?',
},
confirm: {
id: 'confirmations.missing_alt_text.confirm',
defaultMessage: 'Add alt text',
},
message: {
id: 'confirmations.missing_alt_text.message',
defaultMessage:
'Your post contains media without alt text. Adding descriptions helps make your content accessible to more people.',
},
secondary: {
id: 'confirmations.missing_alt_text.secondary',
defaultMessage: 'Post anyway',
},
});
export const ConfirmMissingAltTextModal: React.FC<
BaseConfirmationModalProps
> = ({ onClose }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const mediaId = useAppSelector(
(state) =>
(
(state.compose as ImmutableMap<string, unknown>).get(
'media_attachments',
) as ImmutableList<MediaAttachment>
)
.find(
(media) =>
['image', 'gifv'].includes(media.get('type') as string) &&
((media.get('description') ?? '') as string).length === 0,
)
?.get('id') as string,
);
const handleConfirm = useCallback(() => {
dispatch(
openModal({
modalType: 'FOCAL_POINT',
modalProps: {
mediaId,
},
}),
);
}, [dispatch, mediaId]);
const handleSecondary = useCallback(() => {
dispatch(submitCompose());
}, [dispatch]);
return (
<ConfirmationModal
title={intl.formatMessage(messages.title)}
message={intl.formatMessage(messages.message)}
confirm={intl.formatMessage(messages.confirm)}
secondary={intl.formatMessage(messages.secondary)}
onConfirm={handleConfirm}
onSecondary={handleSecondary}
onClose={onClose}
/>
);
};

2
app/javascript/mastodon/features/ui/components/modal_root.jsx
View file

@ -43,6 +43,7 @@ import {
ConfirmClearNotificationsModal,
ConfirmLogOutModal,
ConfirmFollowToListModal,
ConfirmMissingAltTextModal,
} from './confirmation_modals';
import ImageModal from './image_modal';
import MediaModal from './media_modal';
@ -67,6 +68,7 @@ export const MODAL_COMPONENTS = {
'CONFIRM_CLEAR_NOTIFICATIONS': () => Promise.resolve({ default: ConfirmClearNotificationsModal }),
'CONFIRM_LOG_OUT': () => Promise.resolve({ default: ConfirmLogOutModal }),
'CONFIRM_FOLLOW_TO_LIST': () => Promise.resolve({ default: ConfirmFollowToListModal }),
'CONFIRM_MISSING_ALT_TEXT': () => Promise.resolve({ default: ConfirmMissingAltTextModal }),
'MUTE': MuteModal,
'BLOCK': BlockModal,
'DOMAIN_BLOCK': DomainBlockModal,