tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3527 from glitch-soc/glitch-soc/merge-upstream

Browse Source 
Merge upstream changes up to 9e0a3aaf08e7d4fc700f7f19d61f5f8fee346b6a
This commit is contained in:
Claire 2026-06-10 19:39:54 +02:00 committed by GitHub
commit 42bdcc70d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
177 changed files with 1455 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -210,7 +210,7 @@ FROM media-build AS libvips
# libvips version to compile, change with [--build-arg VIPS_VERSION="8.15.2"]
# renovate: datasource=github-releases depName=libvips packageName=libvips/libvips
ARG VIPS_VERSION=8.18.2
ARG VIPS_VERSION=8.18.3
# libvips download URL, change with [--build-arg VIPS_URL="https://github.com/libvips/libvips/releases/download"]
ARG VIPS_URL=https://github.com/libvips/libvips/releases/download

6
app/controllers/collections_controller.rb
View File

@ -10,6 +10,7 @@ class CollectionsController < ApplicationController
before_action :require_account_signature!, only: :show, if: -> { request.format == :json && authorized_fetch_mode? }
before_action :set_collection
before_action :redirect_to_canonical_url
skip_around_action :set_locale, if: -> { request.format == :json }
skip_before_action :require_functional!, only: :show, unless: :limited_federation_mode?
@ -18,7 +19,6 @@ class CollectionsController < ApplicationController
respond_to do |format|
format.html do
expires_in expiration_duration, public: true unless user_signed_in?
render template: 'home/index'
end
format.json do
@ -46,6 +46,10 @@ class CollectionsController < ApplicationController
not_found
end
def redirect_to_canonical_url
redirect_to collection_path(@collection) if request.format.html? && request.path.starts_with?('/ap/')
end
def expiration_duration
recently_updated = @collection.updated_at > 15.minutes.ago
recently_updated ? 30.seconds : 5.minutes

12
app/javascript/flavours/glitch/actions/compose.js
View File

@ -98,7 +98,7 @@ const messages = defineMessages({
export const ensureComposeIsVisible = (getState) => {
if (!getState().getIn(['compose', 'mounted'])) {
browserHistory.push('/publish');
browserHistory.push('/publish', { focusTarget: false });
}
};
@ -318,7 +318,10 @@ export function submitCompose(overridePrivacy = null, successCallback = undefine
message: statusId === null ? messages.published : messages.saved,
action: messages.open,
dismissAfter: 10000,
onClick: () => browserHistory.push(`/@${response.data.account.username}/${response.data.id}`),
onClick: () => browserHistory.push(
`/@${response.data.account.username}/${response.data.id}`,
{ focusTarget: 'detailed-status' }
),
}));
}
}).catch(function (error) {
@ -373,11 +376,6 @@ export function uploadCompose(files) {
return;
}
if (getState().getIn(['compose', 'poll'])) {
dispatch(showAlert({ message: messages.uploadErrorPoll }));
return;
}
dispatch(uploadComposeRequest());
for (const [i, file] of Array.from(files).entries()) {

2
app/javascript/flavours/glitch/actions/importer/emoji.ts
View File

@ -18,7 +18,7 @@ export async function importCustomEmoji(emojis: ApiCustomEmojiJSON[]) {
);
// If there's a mismatch, re-import all custom emojis.
if (existingEmojis.length < emojis.length) {
if (existingEmojis.length > 0 && existingEmojis.length < emojis.length) {
await clearCache('custom');
await loadCustomEmoji();

1
app/javascript/flavours/glitch/actions/modal.ts
View File

@ -10,6 +10,7 @@ interface OpenModalPayload {
modalType: ModalType;
modalProps: ModalProps;
previousModalProps?: ModalProps;
ignoreFocus?: boolean;
}
export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');

5
app/javascript/flavours/glitch/components/account_header/name.tsx
View File

@ -19,6 +19,7 @@ import { FollowsYouBadge } from '../badge';
import { CopyButton } from '../copy_button';
import { DisplayName } from '../display_name';
import { Icon } from '../icon';
import { NavigationFocusTarget } from '../navigation_focus_target';
import { AccountBadges } from './badges';
import classes from './styles.module.scss';
@ -56,9 +57,9 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
return (
<div className={classes.nameWrapper}>
<div className={classes.name}>
<h1>
<NavigationFocusTarget as='h1'>
<DisplayName account={account} variant='simple' />
</h1>
</NavigationFocusTarget>
{relationship?.followed_by && <FollowsYouBadge />}
</div>

1
app/javascript/flavours/glitch/components/callout/styles.module.css
View File

@ -62,6 +62,7 @@
background: none;
border: none;
color: inherit;
font: inherit;
font-weight: 500;
padding: 0;
text-wrap: nowrap;

10
app/javascript/flavours/glitch/components/column_header.tsx
View File

@ -19,6 +19,7 @@ import { useIdentity } from 'flavours/glitch/identity_context';
import { useColumnIndexContext } from '../features/ui/components/columns_area';
import { getColumnSkipLinkId } from '../features/ui/components/skip_links';
import { NavigationFocusTarget } from './navigation_focus_target';
import { useAppHistory } from './router';
export const messages = defineMessages({
@ -272,7 +273,7 @@ export const ColumnHeader: React.FC<Props> = ({
{!backButton && hasIcon && (
<Icon id={icon} icon={iconComponent} className='column-header__icon' />
)}
{title}
<span className='column-header__text'>{title}</span>
</>
);
@ -285,7 +286,10 @@ export const ColumnHeader: React.FC<Props> = ({
<div className={headingClassName}>
{backButton}
{hasTitle && (
<h1 className='column-header__title-wrapper'>
<NavigationFocusTarget
as='h1'
className='column-header__title-wrapper'
>
{onClick ? (
<button
onClick={handleTitleClick}
@ -304,7 +308,7 @@ export const ColumnHeader: React.FC<Props> = ({
{titleContents}
</span>
)}
</h1>
</NavigationFocusTarget>
)}
<div className='column-header__buttons'>

12
app/javascript/flavours/glitch/components/modal_root.jsx
View File

@ -7,6 +7,7 @@ import { multiply } from 'color-blend';
import { createBrowserHistory } from 'history';
import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
import { IGNORE_FOCUS_ON_OPEN } from '../reducers/modal';
class ModalRoot extends PureComponent {
@ -22,7 +23,10 @@ class ModalRoot extends PureComponent {
}),
]),
noEsc: PropTypes.bool,
ignoreFocus: PropTypes.bool,
ignoreFocus: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string, // 'on-open', see IGNORE_FOCUS_ON_OPEN
]),
...WithOptionalRouterPropTypes,
};
@ -123,7 +127,11 @@ class ModalRoot extends PureComponent {
_ensureHistoryBuffer () {
const { pathname, search, hash, state } = this.history.location;
if (!state || state.mastodonModalKey !== this._modalHistoryKey) {
this.history.push({ pathname, search, hash }, { ...state, mastodonModalKey: this._modalHistoryKey });
this.history.push({ pathname, search, hash }, {
...state,
focusTarget: this.props.ignoreFocus !== IGNORE_FOCUS_ON_OPEN,
mastodonModalKey: this._modalHistoryKey,
});
}
}

145
app/javascript/flavours/glitch/components/navigation_focus_target/index.tsx Normal file
View File

@ -0,0 +1,145 @@
import {
createContext,
useContext,
useRef,
useLayoutEffect,
useCallback,
} from 'react';
import { useLocation } from 'react-router-dom';
import { polymorphicForwardRef } from '@/types/polymorphic';
import type { MastodonLocation } from '../router';
export const FOCUS_TARGET = {
POST: 'detailed-status',
} as const;
export type FocusTarget =
| boolean
| (typeof FOCUS_TARGET)[keyof typeof FOCUS_TARGET];
const FocusTargetContext =
createContext<React.MutableRefObject<FocusTarget> | null>(null);
/**
* `FocusTargetProvider` keeps track of whether focus should be
* set after a navigation. By default, any navigation will set the
* current value of `focusTargetRef` to `true`, which will cause
* the `NavigationFocusTarget` component to focus itself when it mounts.
*
* To disable this behaviour for a navigation, the focus target can be
* set to `false` using location state, for example:
* ```
* location.push(url, { focusTarget: false });
* ```
*
* If the target page contains multiple `NavigationFocusTarget` components
* (e.g. a main heading and a post that should be focused), give the more
* specific `NavigationFocusTarget` instance a name, and pass the same name
* via location state:
* ```
* location.push(url, { focusTarget: 'detailed-status' });
* ```
*/
export const FocusTargetProvider: React.FC<{
children: React.ReactNode;
}> = ({ children }) => {
const focusTargetRef = useRef<FocusTarget>(false);
const previousLocationRef = useRef<
| (Pick<MastodonLocation, 'pathname' | 'search'> & {
focusTarget?: FocusTarget;
})
| null
>(null);
const {
pathname,
search,
state = {},
} = useLocation<{ focusTarget?: FocusTarget } | undefined>();
const { focusTarget } = state;
useLayoutEffect(() => {
// We never want to set focus on page load, so we keep
// track of whether a manual navigation has occurred by comparing
// our current with the previous location:
const previous = previousLocationRef.current;
// Bail out on the first render, populate previousLocationRef
if (previous === null) {
previousLocationRef.current = { pathname, search, focusTarget };
return;
}
// Bail out if location hasn't changed
if (
previous.pathname === pathname &&
previous.search === search &&
previous.focusTarget === focusTarget
) {
return;
}
// Location has changed:
// - Set focusTarget
// – Store current location as previous
// (We store `focusTarget` as `false` to allow overriding it.)
previousLocationRef.current = { pathname, search, focusTarget: false };
focusTargetRef.current = focusTarget ?? true;
}, [pathname, search, focusTarget]);
return (
<FocusTargetContext.Provider value={focusTargetRef}>
{children}
</FocusTargetContext.Provider>
);
};
export function useFocusOnNavigation(targetName?: string) {
const focusTargetRef = useContext(FocusTargetContext);
if (focusTargetRef === null) {
throw Error(
'useFocusTargetContext must be used inside of a FocusTargetProvider',
);
}
return useCallback(
(element: HTMLElement | null) => {
const focusTarget = focusTargetRef.current;
// Bail out if focusTarget was set to `false`
if (!element || !focusTarget) {
return;
}
if (focusTarget === true || focusTarget === targetName) {
setTimeout(() => {
element.focus({ preventScroll: true });
}, 0);
}
},
[focusTargetRef, targetName],
);
}
interface FocusTargetElementProps extends React.ComponentPropsWithoutRef<'h1'> {
focusTargetName?: string;
}
export const NavigationFocusTarget = polymorphicForwardRef<
'h1',
FocusTargetElementProps
>(({ as: Component = 'h1', focusTargetName, children, ...otherProps }) => {
const focusOnNavigation = useFocusOnNavigation(focusTargetName);
return (
<Component ref={focusOnNavigation} tabIndex={-1} {...otherProps}>
{children}
</Component>
);
});

5
app/javascript/flavours/glitch/components/router.tsx
View File

@ -14,9 +14,14 @@ import { createBrowserHistory } from 'history';
import { layoutFromWindow } from 'flavours/glitch/is_mobile';
import { isDevelopment } from 'flavours/glitch/utils/environment';
import type { FocusTarget } from './navigation_focus_target';
interface MastodonLocationState {
fromMastodon?: boolean;
mastodonModalKey?: string;
// Controls which element is focused after a navigation.
// Set to `false` to prevent navigation focus.
focusTarget?: FocusTarget;
// Prevent the rightmost column in advanced UI from scrolling
// into view on location changes
preventMultiColumnAutoScroll?: string;

5
app/javascript/flavours/glitch/components/status.jsx
View File

@ -32,6 +32,7 @@ import StatusIcons from './status_icons';
import StatusPrepend from './status_prepend';
import { CollectionPreviewCard } from '../features/collections/components/collection_preview_card';
import { compareUrls } from '../utils/compare_urls';
import { FOCUS_TARGET } from './navigation_focus_target';
const domParser = new DOMParser();
@ -392,9 +393,9 @@ class Status extends ImmutablePureComponent {
window.open(path, '_blank', 'noopener');
} else {
if (history.location.pathname.replace('/deck/', '/') === path) {
history.replace(path);
history.replace(path, {focusTarget: FOCUS_TARGET.POST});
} else {
history.push(path);
history.push(path, {focusTarget: FOCUS_TARGET.POST});
}
}
};

5
app/javascript/flavours/glitch/containers/mastodon.jsx
View File

@ -9,6 +9,7 @@ import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_sett
import { hydrateStore } from 'flavours/glitch/actions/store';
import { connectUserStream } from 'flavours/glitch/actions/streaming';
import ErrorBoundary from 'flavours/glitch/components/error_boundary';
import { FocusTargetProvider } from '@/flavours/glitch/components/navigation_focus_target';
import { Router } from 'flavours/glitch/components/router';
import UI from 'flavours/glitch/features/ui';
import { IdentityContext, createIdentityContext } from 'flavours/glitch/identity_context';
@ -53,7 +54,9 @@ export default class Mastodon extends PureComponent {
<ErrorBoundary>
<Router>
<ScrollContext>
<Route path='/' component={UI} />
<FocusTargetProvider>
<Route path='/' component={UI} />
</FocusTargetProvider>
</ScrollContext>
<BodyScrollLock />
</Router>

7
app/javascript/flavours/glitch/features/about/index.jsx
View File

@ -8,10 +8,13 @@ import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { domain } from 'flavours/glitch/initial_state';
import { injectIntl } from '@/flavours/glitch/components/intl';
import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
import { Account } from 'flavours/glitch/components/account';
import Column from 'flavours/glitch/components/column';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import { LinkFooter} from 'flavours/glitch/features/ui/components/link_footer';
@ -91,7 +94,9 @@ class About extends PureComponent {
srcSet={Object.keys(server.item?.thumbnail.versions ?? {}).map((key) => `${server.item?.thumbnail.versions && server.item.thumbnail.versions[key]} ${key.replace('@', '')}`).join(', ')}
className='about__header__hero'
/>
<h1>{isLoading ? <Skeleton width='10ch' /> : server.domain}</h1>
<NavigationFocusTarget as='h1'>
{isLoading ? <Skeleton width='10ch' /> : domain}
</NavigationFocusTarget>
<p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank' rel='noopener'>Mastodon</a> }} /></p>
</div>

1
app/javascript/flavours/glitch/features/account_edit/components/field_actions.tsx
View File

@ -26,6 +26,7 @@ export const AccountFieldActions: FC<{ id: string }> = ({ id }) => {
openModal({
modalType: 'ACCOUNT_EDIT_FIELD_EDIT',
modalProps: { fieldKey: id },
ignoreFocus: true,
}),
);
}, [dispatch, id]);

20
app/javascript/flavours/glitch/features/account_edit/index.tsx
View File

@ -137,16 +137,28 @@ export const AccountEdit: FC = () => {
);
const handleOpenModal = useCallback(
(type: ModalType, props?: Record<string, unknown>) => {
dispatch(openModal({ modalType: type, modalProps: props ?? {} }));
(
type: ModalType,
{
modalProps = {},
ignoreFocus = false,
}: { modalProps?: Record<string, unknown>; ignoreFocus?: boolean } = {},
) => {
dispatch(
openModal({
modalType: type,
modalProps,
ignoreFocus,
}),
);
},
[dispatch],
);
const handleNameEdit = useCallback(() => {
handleOpenModal('ACCOUNT_EDIT_NAME');
handleOpenModal('ACCOUNT_EDIT_NAME', { ignoreFocus: true });
}, [handleOpenModal]);
const handleBioEdit = useCallback(() => {
handleOpenModal('ACCOUNT_EDIT_BIO');
handleOpenModal('ACCOUNT_EDIT_BIO', { ignoreFocus: true });
}, [handleOpenModal]);
const handleCustomFieldAdd = useCallback(() => {
handleOpenModal('ACCOUNT_EDIT_FIELD_EDIT');

15
app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
View File

@ -10,6 +10,7 @@ import {
ModalShellActions,
ModalShellBody,
} from '@/flavours/glitch/components/modal_shell';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { useFieldHtml } from '../hooks/useFieldHtml';
@ -24,12 +25,14 @@ export const AccountFieldModal: FC<{
return (
<ModalShell>
<ModalShellBody>
<EmojiHTML
as='h2'
htmlString={field.name_emojified}
onElement={handleLabelElement}
className={classes.fieldName}
/>
<NavigationFocusTarget as='h1'>
<EmojiHTML
as='span'
htmlString={field.name_emojified}
onElement={handleLabelElement}
className={classes.fieldName}
/>
</NavigationFocusTarget>
<EmojiHTML
as='p'
htmlString={field.value_emojified}

12
app/javascript/flavours/glitch/features/alt_text_modal/__tests__/index-test.tsx
View File

@ -7,6 +7,8 @@ import { List, Map } from 'immutable';
import { render } from '@testing-library/react';
import { vi } from 'vitest';
import { FocusTargetProvider } from '@/flavours/glitch/components/navigation_focus_target';
import { Router } from '@/flavours/glitch/components/router';
import type { RootState } from 'flavours/glitch/store';
import { useAppSelector } from 'flavours/glitch/store';
@ -27,9 +29,13 @@ describe('<AltTextModal />', () => {
const renderComponent = () => {
return render(
<IntlProvider locale='en' messages={{}}>
<AltTextModal mediaId={mediaId} onClose={handleClose} />
</IntlProvider>,
<Router>
<FocusTargetProvider>
<IntlProvider locale='en' messages={{}}>
<AltTextModal mediaId={mediaId} onClose={handleClose} />
</IntlProvider>
</FocusTargetProvider>
</Router>,
);
};

8
app/javascript/flavours/glitch/features/alt_text_modal/index.tsx
View File

@ -22,6 +22,7 @@ import { changeUploadCompose } from 'flavours/glitch/actions/compose_typed';
import { Button } from 'flavours/glitch/components/button';
import { GIFV } from 'flavours/glitch/components/gifv';
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import { Audio } from 'flavours/glitch/features/audio';
import { CharacterCounter } from 'flavours/glitch/features/compose/components/character_counter';
@ -412,12 +413,15 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
)}
</Button>
<span className='dialog-modal__header__title'>
<NavigationFocusTarget
as='h1'
className='dialog-modal__header__title'
>
<FormattedMessage
id='alt_text_modal.add_alt_text'
defaultMessage='Add alt text'
/>
</span>
</NavigationFocusTarget>
<Button secondary onClick={onClose}>
<FormattedMessage

5
app/javascript/flavours/glitch/features/annual_report/index.tsx
View File

@ -10,6 +10,7 @@ import classNames from 'classnames/bind';
import { closeModal } from '@/flavours/glitch/actions/modal';
import { IconButton } from '@/flavours/glitch/components/icon_button';
import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { getReport } from '@/flavours/glitch/reducers/slices/annual_report';
import {
createAppSelector,
@ -83,7 +84,9 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
return (
<div className={styles.wrapper} data-color-scheme='dark'>
<div className={styles.header}>
<h1>Wrapstodon {report.year}</h1>
<NavigationFocusTarget as='h1'>
Wrapstodon {report.year}
</NavigationFocusTarget>
{account && <p>@{account.acct}</p>}
{context === 'modal' && (
<IconButton

9
app/javascript/flavours/glitch/features/closed_registrations_modal/index.jsx
View File

@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import { fetchServer } from 'flavours/glitch/actions/server';
import { domain } from 'flavours/glitch/initial_state';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
const mapStateToProps = state => ({
message: state.getIn(['server', 'server', 'item', 'registrations', 'message']),
@ -42,7 +43,9 @@ class ClosedRegistrationsModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal interaction-modal'>
<div className='interaction-modal__lead'>
<h3><FormattedMessage id='closed_registrations_modal.title' defaultMessage='Signing up on Mastodon' /></h3>
<NavigationFocusTarget as='h1'>
<FormattedMessage id='closed_registrations_modal.title' defaultMessage='Signing up on Mastodon' />
</NavigationFocusTarget>
<p>
<FormattedMessage
id='closed_registrations_modal.preamble'
@ -53,12 +56,12 @@ class ClosedRegistrationsModal extends ImmutablePureComponent {
<div className='interaction-modal__choices'>
<div className='interaction-modal__choices__choice'>
<h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
<h2><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h2>
{closedRegistrationsMessage}
</div>
<div className='interaction-modal__choices__choice'>
<h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3>
<h2><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h2>
<p className='prose'>
<FormattedMessage
id='closed_registrations.other_server_instructions'

9
app/javascript/flavours/glitch/features/collection_adder/index.tsx
View File

@ -4,6 +4,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import type { ApiCollectionJSON } from '@/flavours/glitch/api_types/collections';
import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
import type { Account } from '@/flavours/glitch/models/account';
import {
@ -114,13 +115,17 @@ export const CollectionAdder: React.FC<{
onClick={onClose}
/>
<span className='dialog-modal__header__title' id={titleId}>
<NavigationFocusTarget
as='h1'
id={titleId}
className='dialog-modal__header__title'
>
<FormattedMessage
id='collections.add_to_collection'
defaultMessage='Add {name} to collections'
values={{ name: <strong>@{account?.acct}</strong> }}
/>
</span>
</NavigationFocusTarget>
</div>
<div className='dialog-modal__content'>

5
app/javascript/flavours/glitch/features/collections/components/share_modal.tsx
View File

@ -4,6 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useLocation } from 'react-router';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { me } from '@/flavours/glitch/initial_state';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { changeCompose, focusCompose } from 'flavours/glitch/actions/compose';
@ -66,7 +67,7 @@ export const CollectionShareModal: React.FC<{
return (
<ModalShell>
<ModalShellBody>
<h1 className={classes.heading}>
<NavigationFocusTarget as='h1' className={classes.heading}>
{isNew ? (
<FormattedMessage
id='collection.share_modal.title_new'
@ -78,7 +79,7 @@ export const CollectionShareModal: React.FC<{
defaultMessage='Share collection'
/>
)}
</h1>
</NavigationFocusTarget>
<IconButton
title={intl.formatMessage({

5
app/javascript/flavours/glitch/features/collections/index.tsx
View File

@ -4,6 +4,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { Column } from 'flavours/glitch/components/column';
import { ColumnHeader } from 'flavours/glitch/components/column_header';
import { DisplayNameSimple } from 'flavours/glitch/components/display_name/simple';
@ -74,7 +75,9 @@ export const Collections: React.FC<{
<Scrollable>
<header className={classes.header}>
<h1 className={classes.heading}>{pageTitleHtml}</h1>
<NavigationFocusTarget as='h1' className={classes.heading}>
{pageTitleHtml}
</NavigationFocusTarget>
<TabList plain>
<TabLink exact to={`/@${account?.acct}/collections`}>
{intl.formatMessage(createdByTabMessage, {

4
app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
View File

@ -242,7 +242,9 @@ class ComposeForm extends ImmutablePureComponent {
} else if(prevProps.isSubmitting && !this.props.isSubmitting) {
this.textareaRef.current.focus();
} else if (this.props.spoiler !== prevProps.spoiler) {
if (this.props.spoiler) {
const mediaJustAdded = this.props.anyMedia && !prevProps.anyMedia;
if (this.props.spoiler && !mediaJustAdded) {
this.spoilerText.input.focus();
} else if (prevProps.spoiler) {
this.textareaRef.current.focus();

4
app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js
View File

@ -4,12 +4,10 @@ import { addPoll, removePoll } from '../../../actions/compose';
import PollButton from '../components/poll_button';
const mapStateToProps = state => {
const readyAttachmentsSize = state.compose.get('media_attachments').size ?? 0;
const hasAttachments = readyAttachmentsSize > 0 || !!state.compose.get('is_uploading');
const hasQuote = !!state.compose.get('quoted_status_id');
return ({
disabled: hasAttachments || hasQuote,
disabled: hasQuote,
active: state.getIn(['compose', 'poll']) !== null,
});
};

3
app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
View File

@ -5,7 +5,6 @@ import { openModal } from '../../../actions/modal';
import UploadButton from '../components/upload_button';
const mapStateToProps = state => {
const isPoll = state.getIn(['compose', 'poll']) !== null;
const isUploading = state.getIn(['compose', 'is_uploading']);
const readyAttachmentsSize = state.getIn(['compose', 'media_attachments']).size ?? 0;
const pendingAttachmentsSize = state.getIn(['compose', 'pending_media_attachments']).size ?? 0;
@ -15,7 +14,7 @@ const mapStateToProps = state => {
const hasQuote = !!state.compose.get('quoted_status_id');
return {
disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio || hasQuote,
disabled: isUploading || isOverLimit || hasVideoOrAudio || hasQuote,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
};
};

5
app/javascript/flavours/glitch/features/custom_homepage/index.tsx
View File

@ -6,6 +6,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { fetchServer } from 'flavours/glitch/actions/server';
import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';
import { TabLink, TabList } from 'flavours/glitch/components/tab_list';
@ -40,7 +41,9 @@ export const CustomHomepage: React.FC = () => {
/>
<div className={classes.topSection}>
<h1>{server.item?.domain}</h1>
<NavigationFocusTarget as='h1'>
{server.item?.domain}
</NavigationFocusTarget>
<p>{server.item?.description}</p>
</div>

4
app/javascript/flavours/glitch/features/emoji/database.test.ts
View File

@ -22,6 +22,10 @@ function rawEmojiFactory(data: Partial<CompactEmoji> = {}): CompactEmoji {
}
describe('emoji database', () => {
beforeEach(async () => {
await testGet(); // Loads the database schema.
});
afterEach(() => {
testClear();
indexedDB = new IDBFactory();

39
app/javascript/flavours/glitch/features/emoji/database.ts
View File

@ -143,7 +143,28 @@ export async function search({
return intersection;
})
.values(),
).toSorted((a, b) => a.score - b.score);
);
// If there are no results, try a cursor-based custom emoji search instead.
if (results.length === 0) {
const trx = db.transaction('custom', 'readonly');
const foundEmojis = new Set<string>();
for await (const cursor of trx.store) {
const emoji = cursor.value;
const score = getScoreForEmoji(emoji, query, false);
if (score === null || foundEmojis.has(emoji.shortcode)) {
continue;
}
results.push({ ...emoji, score });
foundEmojis.add(emoji.shortcode);
}
log('cursor search found %d results for "%s"', foundEmojis.size, query);
await trx.done;
}
// Sort by score, descending.
results.sort((a, b) => a.score - b.score);
const time = performance.measure('emoji-search-end', 'emoji-search-start');
log(
@ -159,14 +180,19 @@ export async function search({
return results;
}
function getScoreForEmoji(emoji: AnyEmojiData, query: string) {
function getScoreForEmoji(
emoji: AnyEmojiData,
query: string,
checkTokens = true,
) {
const id = 'shortcode' in emoji ? emoji.shortcode : emoji.label;
if (id === query) {
return 0;
}
let index = 1;
for (const token of [id, ...emoji.tokens]) {
const searchTokens = checkTokens ? [id, ...emoji.tokens] : [id];
for (const token of searchTokens) {
const tokenIndex = token.indexOf(query);
if (tokenIndex !== -1) {
return index + tokenIndex / token.length;
@ -246,6 +272,13 @@ export async function clearCache(key: CacheKey) {
log('Cleared cache for %s', key);
}
export async function resetDatabase() {
const db = await loadDB();
const storeNames = [...db.objectStoreNames];
await Promise.all(storeNames.map((storeName) => db.clear(storeName)));
log(storeNames, 'Reset emoji database stores:');
}
export async function loadEmojiByHexcode(
hexcode: string,
localeString: string,

5
app/javascript/flavours/glitch/features/emoji/db-schema.ts
View File

@ -10,6 +10,7 @@ import type {
StoreNames,
} from 'idb';
import { resetDatabase } from './database';
import type { CustomEmojiData, CacheKey, UnicodeEmojiData } from './types';
import { emojiLogger } from './utils';
@ -57,7 +58,7 @@ type Transaction<Mode extends IDBTransactionMode = 'versionchange'> =
export type Database = IDBPDatabase<EmojiDB>;
const SCHEMA_VERSION = 3;
const SCHEMA_VERSION = 4;
export async function openEmojiDB() {
const db = await openDB<EmojiDB>('mastodon-emoji', SCHEMA_VERSION, {
@ -98,6 +99,8 @@ export async function openEmojiDB() {
});
deleteOldIndexes(shortcodeTable, ['hexcode']);
void resetDatabase();
log(
'Upgraded emoji database from version %d to %d',
oldVersion,

2
app/javascript/flavours/glitch/features/emoji/emoji_picker.tsx
View File

@ -57,6 +57,8 @@ export const Emoji: FC<EmojiProps> = ({
const { mode } = useEmojiAppState();
return (
<EmojiRaw
// eslint-disable-next-line @typescript-eslint/no-deprecated -- In React props are frozen, but the library we use is old so doesn't respect that.
{...(EmojiRaw.defaultProps ?? {})}
data={EmojiData}
set={set}
sheetSize={sheetSize}

68
app/javascript/flavours/glitch/features/emoji/index.ts
View File

@ -1,9 +1,8 @@
import { initialState } from '@/flavours/glitch/initial_state';
import type { EMOJI_DB_NAME_SHORTCODES } from './constants';
import { toSupportedLocale } from './locale';
import { reloadCustomEmojis } from './picker';
import type { LocaleOrCustom } from './types';
import type { EmojiWorkerMessage } from './types';
import { emojiLogger } from './utils';
const userLocale = toSupportedLocale(initialState?.meta.locale ?? 'en');
@ -11,9 +10,10 @@ const userLocale = toSupportedLocale(initialState?.meta.locale ?? 'en');
let worker: Worker | null = null;
const log = emojiLogger('index');
const workerLog = emojiLogger('worker');
// This is too short, but better to fallback quickly than wait.
const WORKER_TIMEOUT = 1_000;
const WORKER_TIMEOUT = 2_000;
export async function initializeEmoji() {
log('initializing emojis');
@ -43,43 +43,44 @@ export async function initializeEmoji() {
const { data: message } = event;
worker ??= tempWorker;
clearTimeout(timeoutId);
if (message === 'ready') {
log('worker ready, loading data');
clearTimeout(timeoutId);
messageWorker('shortcodes');
void loadCustomEmoji();
void loadEmojiLocale(userLocale);
} else {
log('got worker message: %s', message);
if (message !== 'ready') {
workerLog(message);
return;
}
const debugValue = localStorage.getItem('debug');
if (debugValue) {
messageWorker({ type: 'debug', debugValue });
}
workerLog('loading data');
messageWorker(userLocale);
messageWorker('custom');
messageWorker('shortcodes');
});
}
async function fallbackLoad() {
log('falling back to main thread for loading');
await loadCustomEmoji();
const { importLegacyShortcodes } = await import('./loader');
const { importCustomEmojiData, importLegacyShortcodes, importEmojiData } =
await import('./loader');
const customEmojis = await importCustomEmojiData();
if (customEmojis && customEmojis.length > 0) {
log('loaded %d custom emojis', customEmojis.length);
await reloadCustomEmojis();
}
const shortcodes = await importLegacyShortcodes();
if (shortcodes?.length) {
log('loaded %d legacy shortcodes', shortcodes.length);
}
await loadEmojiLocale(userLocale);
}
async function loadEmojiLocale(localeString: string) {
const locale = toSupportedLocale(localeString);
const { importEmojiData } = await import('./loader');
if (worker) {
log('asking worker to load locale %s', locale);
messageWorker(locale);
} else {
const emojis = await importEmojiData(locale);
if (emojis) {
log('loaded %d emojis to locale %s', emojis.length, locale);
}
const emojis = await importEmojiData(userLocale);
if (emojis) {
log('loaded %d emojis to locale %s', emojis.length, userLocale);
}
}
@ -96,11 +97,16 @@ export async function loadCustomEmoji() {
}
}
function messageWorker(
locale: LocaleOrCustom | typeof EMOJI_DB_NAME_SHORTCODES,
) {
function messageWorker(data: EmojiWorkerMessage | string) {
if (!worker) {
return;
}
worker.postMessage({ locale });
if (typeof data === 'string') {
worker.postMessage({
type: 'load',
storeName: data,
} satisfies EmojiWorkerMessage);
} else {
worker.postMessage(data);
}
}

31
app/javascript/flavours/glitch/features/emoji/normalize.test.ts
View File

@ -4,7 +4,7 @@ import { basename, resolve } from 'path';
import { flattenEmojiData } from 'emojibase';
import unicodeRawEmojis from 'emojibase-data/en/data.json';
import { unicodeToTwemojiHex } from './normalize';
import { extractTokens, unicodeToTwemojiHex } from './normalize';
const emojiSVGFiles = await readdir(
// This assumes tests are run from project root
@ -33,3 +33,32 @@ describe('unicodeToTwemojiHex', () => {
expect(svgFileNamesWithoutBorder).toContain(result);
});
});
describe('extractTokens', () => {
test('returns an empty array for blank input', () => {
expect(extractTokens(' ', null)).toEqual([]);
});
test('check token word breaking with Intl.Segmenter', () => {
const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
expect(
extractTokens('thumbs_up smiling-face camelCase', segmenter),
).toEqual(['thumbs', 'up', 'smiling', 'face', 'camel', 'case']);
});
test('check token word breaking with regex', () => {
expect(extractTokens('Smile_face joy-test A ok 7 z', null)).toEqual([
'smile',
'face',
'joy',
'test',
'ok',
]);
});
test('ensure +1 and -1 are preserved', () => {
expect(extractTokens('+1', null)).toEqual(['+1']);
expect(extractTokens('-1', null)).toEqual(['-1']);
});
});

5
app/javascript/flavours/glitch/features/emoji/normalize.ts
View File

@ -214,6 +214,11 @@ export function extractTokens(
}
const tokens: string[] = [];
// Handle the edge case of thumbs up and down emoticons.
if (input === '+1' || input === '-1') {
return [input];
}
// Prefer to use Intl.Segmenter if available for better locale support.
if (segmenter) {
for (const { isWordLike, segment } of segmenter.segment(

17
app/javascript/flavours/glitch/features/emoji/picker.ts
View File

@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
import type { CategoryName, CustomEmoji } from 'emoji-mart';
import { autoPlayGif } from '@/flavours/glitch/initial_state';
import { createLimitedCache } from '@/flavours/glitch/utils/cache';
import { emojiLogger } from './utils';
@ -21,6 +22,8 @@ let customCategories = [
'flags',
] as CategoryName[];
const searchCache = createLimitedCache<LegacyEmoji[]>({ maxSize: 10, log });
export async function fetchCustomEmojiData() {
if (customEmojis !== null) {
return customEmojis;
@ -89,6 +92,7 @@ export async function reloadCustomEmojis() {
await import('@/flavours/glitch/hooks/useCustomEmojis');
await Promise.all([fetchCustomEmojiData(), loadEmojisIntoCache()]);
searchCache.clear();
}
// Replicates the old legacy search function.
@ -102,16 +106,25 @@ export async function emojiMartSearch(
return [];
}
const cacheKey = `${query}|${locale}|${limit}`;
const cachedResult = searchCache.get(cacheKey);
if (cachedResult) {
return cachedResult;
}
const { search } = await import('./database');
const results = await search({ query, locale, limit });
return results.map((emoji) =>
const legacyResults = results.map((emoji) =>
'shortcode' in emoji
? { id: emoji.shortcode, custom: true }
? ({ id: emoji.shortcode, custom: true } as const)
: {
id: emoji.label.replaceAll(' ', '_').toLowerCase(),
native: emoji.unicode,
},
);
searchCache.set(cacheKey, legacyResults);
return legacyResults;
}
export function usePickerEmojis() {

10
app/javascript/flavours/glitch/features/emoji/types.ts
View File

@ -80,3 +80,13 @@ export type ExtraCustomEmojiMap = Record<
string,
Pick<CustomEmojiData, 'shortcode' | 'static_url' | 'url'>
>;
export type EmojiWorkerMessage =
| {
type: 'load';
storeName: string;
}
| {
type: 'debug';
debugValue: string;
};

3
app/javascript/flavours/glitch/features/emoji/utils.ts
View File

@ -5,6 +5,9 @@ import { emojiRegexPolyfill } from '@/flavours/glitch/polyfills';
import { VARIATION_SELECTOR_CODE } from './constants';
export function emojiLogger(segment: string) {
if (typeof window === 'undefined') {
return debug(`emojis:worker:${segment}`);
}
return debug(`emojis:${segment}`);
}

25
app/javascript/flavours/glitch/features/emoji/worker.ts
View File

@ -1,31 +1,36 @@
import debug from 'debug';
import { EMOJI_DB_NAME_SHORTCODES, EMOJI_TYPE_CUSTOM } from './constants';
import {
importCustomEmojiData,
importEmojiData,
importLegacyShortcodes,
} from './loader';
import type { EmojiWorkerMessage } from './types';
addEventListener('message', handleMessage);
self.postMessage('ready'); // After the worker is ready, notify the main thread
function handleMessage(event: MessageEvent<{ locale: string }>) {
const {
data: { locale },
} = event;
void loadData(locale);
function handleMessage(event: MessageEvent<EmojiWorkerMessage>) {
const { data } = event;
if (data.type === 'debug') {
debug.enable(data.debugValue);
} else {
void loadData(data.storeName);
}
}
async function loadData(locale: string) {
async function loadData(storeName: string) {
let importCount: number | undefined;
if (locale === EMOJI_TYPE_CUSTOM) {
if (storeName === EMOJI_TYPE_CUSTOM) {
importCount = (await importCustomEmojiData())?.length;
} else if (locale === EMOJI_DB_NAME_SHORTCODES) {
} else if (storeName === EMOJI_DB_NAME_SHORTCODES) {
importCount = (await importLegacyShortcodes())?.length;
} else {
importCount = (await importEmojiData(locale))?.length;
importCount = (await importEmojiData(storeName))?.length;
}
if (importCount) {
self.postMessage(`loaded ${importCount} emojis into ${locale}`);
self.postMessage(`loaded ${importCount} emojis into ${storeName}`);
}
}

5
app/javascript/flavours/glitch/features/filters/added_to_filter.jsx
View File

@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { Button } from 'flavours/glitch/components/button';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { toServerSideType } from 'flavours/glitch/utils/filters';
const mapStateToProps = (state, { filterId }) => ({
@ -71,7 +72,9 @@ class AddedToFilter extends PureComponent {
return (
<>
<h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' /></h3>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
<FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' />
</NavigationFocusTarget>
<p className='report-dialog-modal__lead'>
<FormattedMessage
id='filter_modal.added.short_explanation'

5
app/javascript/flavours/glitch/features/filters/select_filter.jsx
View File

@ -10,6 +10,7 @@ import fuzzysort from 'fuzzysort';
import AddIcon from '@/material-icons/400-24px/add.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { injectIntl } from '@/flavours/glitch/components/intl';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { toServerSideType } from 'flavours/glitch/utils/filters';
import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons';
@ -176,7 +177,9 @@ class SelectFilter extends PureComponent {
return (
<>
<h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
<FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' />
</NavigationFocusTarget>
<p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p>
<div className='emoji-mart-search'>

5
app/javascript/flavours/glitch/features/interaction_modal/index.tsx
View File

@ -8,6 +8,7 @@ import { escapeRegExp } from 'lodash';
import { useDebouncedCallback } from 'use-debounce';
import { DisplayName } from '@/flavours/glitch/components/display_name';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { openModal, closeModal } from 'flavours/glitch/actions/modal';
import { apiRequest } from 'flavours/glitch/api';
import { Button } from 'flavours/glitch/components/button';
@ -474,12 +475,12 @@ const InteractionModal: React.FC<{
return (
<div className='modal-root__modal interaction-modal'>
<div className='interaction-modal__lead'>
<h3>
<NavigationFocusTarget as='h1'>
<FormattedMessage
id='interaction_modal.title'
defaultMessage='Sign in to continue'
/>
</h3>
</NavigationFocusTarget>
<p>
{intent === 'follow' ? (
<FormattedMessage

5
app/javascript/flavours/glitch/features/list_adder/index.tsx
View File

@ -18,6 +18,7 @@ import type { ApiListJSON } from 'flavours/glitch/api_types/lists';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { getOrderedLists } from 'flavours/glitch/selectors/lists';
import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
@ -182,13 +183,13 @@ const ListAdder: React.FC<{
onClick={onClose}
/>
<span className='dialog-modal__header__title'>
<NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
<FormattedMessage
id='lists.add_to_lists'
defaultMessage='Add {name} to lists'
values={{ name: <strong>@{account?.acct}</strong> }}
/>
</span>
</NavigationFocusTarget>
</div>
<div className='dialog-modal__content'>

3
app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx
View File

@ -8,6 +8,7 @@ import type { List as ImmutableList, RecordOf } from 'immutable';
import type { ApiMentionJSON } from '@/flavours/glitch/api_types/statuses';
import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
import { FOCUS_TARGET } from '@/flavours/glitch/components/navigation_focus_target';
import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
import { toggleStatusSpoilers } from 'flavours/glitch/actions/statuses';
@ -67,7 +68,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
const path = `/@${account.acct}/${statusId}`;
if (button === 0 && !(ctrlKey || metaKey)) {
history.push(path);
history.push(path, { focusTarget: FOCUS_TARGET.POST });
} else if (button === 1 || (button === 0 && (ctrlKey || metaKey))) {
window.open(path, '_blank', 'noopener');
}

7
app/javascript/flavours/glitch/features/privacy_policy/index.tsx
View File

@ -4,12 +4,15 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import { Helmet } from '@unhead/react/helmet';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { apiGetPrivacyPolicy } from 'flavours/glitch/api/instance';
import type { ApiPrivacyPolicyJSON } from 'flavours/glitch/api_types/instance';
import { Column } from 'flavours/glitch/components/column';
import { FormattedDateWrapper } from 'flavours/glitch/components/formatted_date';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import { getColumnSkipLinkId } from '../ui/components/skip_links';
const messages = defineMessages({
title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
});
@ -40,12 +43,12 @@ const PrivacyPolicy: React.FC<{
>
<div className='scrollable privacy-policy'>
<div className='column-title'>
<h3>
<NavigationFocusTarget as='h1' id={getColumnSkipLinkId(1)}>
<FormattedMessage
id='privacy_policy.title'
defaultMessage='Privacy Policy'
/>
</h3>
</NavigationFocusTarget>
<p>
<FormattedMessage
id='privacy_policy.last_updated'

7
app/javascript/flavours/glitch/features/report/category.jsx
View File

@ -3,11 +3,10 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import { List as ImmutableList } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { Button } from 'flavours/glitch/components/button';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { injectIntl } from '@/flavours/glitch/components/intl';
import Option from './components/option';
@ -78,7 +77,9 @@ class Category extends PureComponent {
return (
<>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} /></h3>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
<FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} />
</NavigationFocusTarget>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.category.subtitle' defaultMessage='Choose the best match' /></p>
<div>

9
app/javascript/flavours/glitch/features/report/comment.tsx
View File

@ -7,6 +7,7 @@ import { OrderedSet } from 'immutable';
import { shallowEqual } from 'react-redux';
import { Toggle } from '@/flavours/glitch/components/form_fields/toggle_field';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { fetchAccount } from 'flavours/glitch/actions/accounts';
import { Button } from 'flavours/glitch/components/button';
import type { Status } from 'flavours/glitch/models/status';
@ -148,14 +149,18 @@ const Comment: React.FC<Props> = ({
return (
<>
<h3 className='report-dialog-modal__title' id={titleId}>
<NavigationFocusTarget
as='h1'
id={titleId}
className='report-dialog-modal__title'
>
{modalTitle ?? (
<FormattedMessage
id='report.comment.title'
defaultMessage='Is there anything else you think we should know?'
/>
)}
</h3>
</NavigationFocusTarget>
<textarea
className='report-dialog-modal__textarea'

5
app/javascript/flavours/glitch/features/report/rules.jsx
View File

@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { Button } from 'flavours/glitch/components/button';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import Option from './components/option';
@ -40,7 +41,9 @@ class Rules extends PureComponent {
return (
<>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' /></h3>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
<FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' />
</NavigationFocusTarget>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.rules.subtitle' defaultMessage='Select all that apply' /></p>
<div>

5
app/javascript/flavours/glitch/features/report/statuses.jsx
View File

@ -10,6 +10,7 @@ import { connect } from 'react-redux';
import { Button } from 'flavours/glitch/components/button';
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import StatusCheckBox from 'flavours/glitch/features/report/containers/status_check_box_container';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
const mapStateToProps = (state, { accountId }) => ({
availableStatusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])),
@ -37,7 +38,9 @@ class Statuses extends PureComponent {
return (
<>
<h3 className='report-dialog-modal__title'><FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' /></h3>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
<FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' />
</NavigationFocusTarget>
<p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p>
<div className='report-dialog-modal__statuses'>

5
app/javascript/flavours/glitch/features/report/thanks.jsx
View File

@ -12,6 +12,7 @@ import {
blockAccount,
} from 'flavours/glitch/actions/accounts';
import { Button } from 'flavours/glitch/components/button';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
const mapStateToProps = () => ({});
@ -52,7 +53,9 @@ class Thanks extends PureComponent {
return (
<>
<h3 className='report-dialog-modal__title'>{submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}</h3>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
{submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}
</NavigationFocusTarget>
<p className='report-dialog-modal__lead'>{submitted ? <FormattedMessage id='report.thanks.take_action_actionable' defaultMessage='While we review this, you can take action against @{name}:' values={{ name: account.get('username') }} /> : <FormattedMessage id='report.thanks.take_action' defaultMessage='Here are your options for controlling what you see on Mastodon:' />}</p>
{account.getIn(['relationship', 'following']) && (

11
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -66,6 +66,7 @@ import ActionBar from './components/action_bar';
import { DetailedStatus } from './components/detailed_status';
import { RefreshController } from './components/refresh_controller';
import { quoteComposeById } from '@/flavours/glitch/actions/compose_typed';
import { FOCUS_TARGET, NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
const messages = defineMessages({
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
@ -630,7 +631,13 @@ class Status extends ImmutablePureComponent {
{ancestors}
<Hotkeys handlers={handlers}>
<div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader({intl, status, expanded: isExpanded})} ref={this.setStatusRef}>
<NavigationFocusTarget
as='div'
focusTargetName={FOCUS_TARGET.POST}
className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)}
tabIndex={0}
aria-label={textForScreenReader({intl, status, expanded: isExpanded})} ref={this.setStatusRef}
>
<DetailedStatus
key={`details-${status.get('id')}`}
status={status}
@ -669,7 +676,7 @@ class Status extends ImmutablePureComponent {
onPin={this.handlePin}
onEmbed={this.handleEmbed}
/>
</div>
</NavigationFocusTarget>
</Hotkeys>
{descendants}

7
app/javascript/flavours/glitch/features/terms_of_service/index.tsx
View File

@ -11,11 +11,14 @@ import { Link, useParams } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { apiGetTermsOfService } from 'flavours/glitch/api/instance';
import type { ApiTermsOfServiceJSON } from 'flavours/glitch/api_types/instance';
import { Column } from 'flavours/glitch/components/column';
import { BundleColumnError } from 'flavours/glitch/features/ui/components/bundle_column_error';
import { getColumnSkipLinkId } from '../ui/components/skip_links';
const messages = defineMessages({
title: { id: 'terms_of_service.title', defaultMessage: 'Terms of Service' },
});
@ -55,12 +58,12 @@ const TermsOfService: React.FC<{
>
<div className='scrollable privacy-policy'>
<div className='column-title'>
<h3>
<NavigationFocusTarget as='h1' id={getColumnSkipLinkId(1)}>
<FormattedMessage
id='terms_of_service.title'
defaultMessage='Terms of Service'
/>
</h3>
</NavigationFocusTarget>
<p className='prose'>
{response?.effective ? (
<FormattedMessage

5
app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
View File

@ -15,6 +15,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
import { blockAccount } from 'flavours/glitch/actions/accounts';
import { closeModal } from 'flavours/glitch/actions/modal';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
@ -46,7 +47,9 @@ export const BlockModal = ({ accountId, acct }) => {
</div>
<div>
<h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
<NavigationFocusTarget as='h1'>
<FormattedMessage id='block_modal.title' defaultMessage='Block user?' />
</NavigationFocusTarget>
<p>@{acct}</p>
</div>
</div>

5
app/javascript/flavours/glitch/features/ui/components/boost_modal.tsx
View File

@ -7,6 +7,7 @@ import classNames from 'classnames';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown';
import { EmbeddedStatus } from 'flavours/glitch/features/notifications_v2/components/embedded_status';
import type { Status, StatusVisibility } from 'flavours/glitch/models/status';
@ -69,7 +70,7 @@ export const BoostModal: React.FC<{
</div>
<div>
<h1>
<NavigationFocusTarget as='h1'>
{status.get('reblogged') ? (
<FormattedMessage
id='boost_modal.undo_reblog'
@ -81,7 +82,7 @@ export const BoostModal: React.FC<{
defaultMessage='Boost post?'
/>
)}
</h1>
</NavigationFocusTarget>
<div>
{missingMediaDescription ? (
<FormattedMessage

9
app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
View File

@ -2,6 +2,7 @@ import { useCallback } from 'react';
import { FormattedMessage, defineMessages } from 'react-intl';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { Button } from 'flavours/glitch/components/button';
import {
ModalShell,
@ -75,7 +76,13 @@ export const ConfirmationModal: React.FC<
return (
<ModalShell onSubmit={handleClick}>
<ModalShellBody className={className}>
<h1 id={titleId}>{title}</h1>
{noFocusButton ? (
<NavigationFocusTarget as='h1' id={titleId}>
{title}
</NavigationFocusTarget>
) : (
<h1>{title}</h1>
)}
{message && <p>{message}</p>}
{extraContent ?? children}

5
app/javascript/flavours/glitch/features/ui/components/dialog_modal.tsx
View File

@ -6,6 +6,7 @@ import classNames from 'classnames';
import { Button } from '@/flavours/glitch/components/button';
import { IconButton } from '@/flavours/glitch/components/icon_button';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
export type { BaseConfirmationModalProps as DialogModalProps } from './confirmation_modals/confirmation_modal';
@ -47,7 +48,9 @@ export const DialogModal: FC<DialogModalProps> = ({
onClick={onClose}
/>
<h1 className='dialog-modal__header__title'>{title}</h1>
<NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
{title}
</NavigationFocusTarget>
</div>
<div className='dialog-modal__content'>

5
app/javascript/flavours/glitch/features/ui/components/domain_block_modal.tsx
View File

@ -15,6 +15,7 @@ import { apiRequest } from 'flavours/glitch/api';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { ShortNumber } from 'flavours/glitch/components/short_number';
import { useAppDispatch } from 'flavours/glitch/store';
@ -77,12 +78,12 @@ export const DomainBlockModal: React.FC<{
</div>
<div>
<h1>
<NavigationFocusTarget as='h1'>
<FormattedMessage
id='domain_block_modal.title'
defaultMessage='Block domain?'
/>
</h1>
</NavigationFocusTarget>
<p>{domain}</p>
</div>
</div>

5
app/javascript/flavours/glitch/features/ui/components/embed_modal.tsx
View File

@ -6,6 +6,7 @@ import { showAlertForError } from 'flavours/glitch/actions/alerts';
import api from 'flavours/glitch/api';
import { Button } from 'flavours/glitch/components/button';
import { CopyPasteText } from 'flavours/glitch/components/copy_paste_text';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { useAppDispatch } from 'flavours/glitch/store';
interface OEmbedResponse {
@ -76,9 +77,9 @@ const EmbedModal: React.FC<{
<Button onClick={onClose}>
<FormattedMessage id='report.close' defaultMessage='Done' />
</Button>
<span className='dialog-modal__header__title'>
<NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
<FormattedMessage id='status.embed' defaultMessage='Get embed code' />
</span>
</NavigationFocusTarget>
<Button secondary onClick={onClose}>
<FormattedMessage
id='confirmation_modal.cancel'

3
app/javascript/flavours/glitch/features/ui/components/ignore_notifications_modal.jsx
View File

@ -12,6 +12,7 @@ import { closeModal } from 'flavours/glitch/actions/modal';
import { updateNotificationsPolicy } from 'flavours/glitch/actions/notification_policies';
import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
export const IgnoreNotificationsModal = ({ filterType }) => {
const dispatch = useDispatch();
@ -57,7 +58,7 @@ export const IgnoreNotificationsModal = ({ filterType }) => {
<div className='modal-root__modal safety-action-modal'>
<div className='safety-action-modal__top'>
<div className='safety-action-modal__header'>
<h1>{title}</h1>
<NavigationFocusTarget as='h1'>{title}</NavigationFocusTarget>
</div>
<ul className='safety-action-modal__bullet-points'>

5
app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
View File

@ -18,6 +18,7 @@ import { closeModal } from 'flavours/glitch/actions/modal';
import { Button } from 'flavours/glitch/components/button';
import { CheckBox } from 'flavours/glitch/components/check_box';
import { Icon } from 'flavours/glitch/components/icon';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { RadioButton } from 'flavours/glitch/components/radio_button';
const messages = defineMessages({
@ -84,7 +85,9 @@ export const MuteModal = ({ accountId, acct }) => {
</div>
<div>
<h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1>
<NavigationFocusTarget as='h1'>
<FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' />
</NavigationFocusTarget>
<p>@{acct}</p>
</div>
</div>

5
app/javascript/flavours/glitch/features/ui/components/report_collection_modal.tsx
View File

@ -9,6 +9,7 @@ import { fetchServer } from 'flavours/glitch/actions/server';
import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
import { Button } from 'flavours/glitch/components/button';
import { IconButton } from 'flavours/glitch/components/icon_button';
import { NavigationFocusTarget } from 'flavours/glitch/components/navigation_focus_target';
import { useAccount } from 'flavours/glitch/hooks/useAccount';
import { useAppDispatch } from 'flavours/glitch/store';
@ -23,12 +24,12 @@ const CollectionThanks: React.FC<{
}> = ({ onClose }) => {
return (
<>
<h3 className='report-dialog-modal__title'>
<NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
<FormattedMessage
id='report.thanks.title_actionable'
defaultMessage="Thanks for reporting, we'll look into this."
/>
</h3>
</NavigationFocusTarget>
<div className='flex-spacer' />

16
app/javascript/flavours/glitch/features/ui/components/visibility_modal.tsx
View File

@ -13,6 +13,7 @@ import { Button } from '@/flavours/glitch/components/button';
import { Dropdown } from '@/flavours/glitch/components/dropdown';
import type { SelectItem } from '@/flavours/glitch/components/dropdown_selector';
import { IconButton } from '@/flavours/glitch/components/icon_button';
import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
import { messages as privacyMessages } from '@/flavours/glitch/features/compose/components/privacy_dropdown';
import { createAppSelector, useAppSelector } from '@/flavours/glitch/store';
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
@ -217,14 +218,15 @@ export const VisibilityModal: FC<VisibilityModalProps> = forwardRef(
iconComponent={CloseIcon}
onClick={onClose}
/>
<FormattedMessage
id='visibility_modal.header'
defaultMessage='Visibility and interaction'
<NavigationFocusTarget
as='h1'
className='dialog-modal__header__title'
>
{(chunks) => (
<span className='dialog-modal__header__title'>{chunks}</span>
)}
</FormattedMessage>
<FormattedMessage
id='visibility_modal.header'
defaultMessage='Visibility and interaction'
/>
</NavigationFocusTarget>
</div>
<div className='dialog-modal__content'>
<div className='dialog-modal__content__description'>

2
app/javascript/flavours/glitch/features/ui/index.jsx
View File

@ -195,7 +195,7 @@ class SwitchingColumnsArea extends PureComponent {
<ColumnsContextProvider multiColumn={!singleColumn}>
<ColumnsArea ref={this.setRef} singleColumn={singleColumn} domain={domain} minimalShell={!signedIn && landingPage === 'overview'}>
<WrappedSwitch>
<Redirect from='/' to={{pathname: rootRedirect, state: this.props.location.state}} exact />
<Redirect from='/' to={{pathname: rootRedirect, state: {...this.props.location.state, focusTarget: false}}} exact />
{singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
{singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={{...this.props.location, pathname: pathName.slice(5)}} /> : null}

10
app/javascript/flavours/glitch/reducers/compose.js
View File

@ -237,6 +237,10 @@ function appendMedia(state, media, file) {
if (prevSize === 0 && (state.get('default_sensitive') || state.get('spoiler'))) {
map.set('sensitive', true);
if (state.get('default_sensitive')) {
map.set('spoiler', true);
}
}
});
}
@ -483,7 +487,7 @@ export const composeReducer = (state = initialState, action) => {
map.set('spoiler', !state.get('spoiler'));
map.set('idempotencyKey', uuid());
if (state.get('media_attachments').size >= 1 && !state.get('default_sensitive')) {
if (state.get('media_attachments').size >= 1) {
map.set('sensitive', !state.get('spoiler'));
}
});
@ -665,7 +669,7 @@ export const composeReducer = (state = initialState, action) => {
map.set('sensitive', true);
}
} else {
map.set('spoiler', false);
map.set('spoiler', action.status.get('sensitive') && action.status.get('media_attachments').size > 0);
map.set('spoiler_text', '');
}
@ -704,7 +708,7 @@ export const composeReducer = (state = initialState, action) => {
map.set('spoiler', true);
map.set('spoiler_text', action.spoiler_text);
} else {
map.set('spoiler', false);
map.set('spoiler', action.status.get('sensitive') && action.status.get('media_attachments').size > 0);
map.set('spoiler_text', '');
}

8
app/javascript/flavours/glitch/reducers/modal.ts
View File

@ -17,8 +17,10 @@ const Modal = ImmutableRecord<Modal>({
modalProps: ImmutableRecord({})(),
});
export const IGNORE_FOCUS_ON_OPEN = 'on-open';
interface ModalState {
ignoreFocus: boolean;
ignoreFocus: boolean | typeof IGNORE_FOCUS_ON_OPEN;
stack: Stack<ImmutableRecord<Modal>>;
}
@ -53,9 +55,10 @@ const pushModal = (
modalType: ModalType,
modalProps: ModalProps,
previousModalProps?: ModalProps,
ignoreFocusOnOpen = false,
): State => {
return state.withMutations((record) => {
record.set('ignoreFocus', false);
record.set('ignoreFocus', ignoreFocusOnOpen ? IGNORE_FOCUS_ON_OPEN : false);
record.update('stack', (stack) => {
let tmp = stack;
@ -92,6 +95,7 @@ export const modalReducer: Reducer<State> = (state = initialState, action) => {
action.payload.modalType,
action.payload.modalProps,
action.payload.previousModalProps,
action.payload.ignoreFocus,
);
else if (closeModal.match(action)) return popModal(state, action.payload);
// TODO: type those actions

19
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -3656,6 +3656,8 @@ a.account__display-name {
text-align: center;
padding-bottom: 32px;
h1,
h2,
h3 {
font-size: 24px;
line-height: 1.5;
@ -4730,6 +4732,7 @@ a.status-card {
&__title-wrapper {
display: flex;
flex-grow: 1;
min-width: 0;
}
&__title {
@ -4745,9 +4748,7 @@ a.status-card {
background: transparent;
font: inherit;
text-align: start;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
min-width: 0;
&--with-back-button {
padding-inline-start: 0;
@ -4762,6 +4763,12 @@ a.status-card {
}
}
&__text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.column-header__back-button {
flex: 1;
color: var(--color-text-brand);
@ -9482,6 +9489,8 @@ noscript {
padding-bottom: 32px;
}
h1,
h2,
h3 {
font-size: 22px;
line-height: 33px;
@ -9512,6 +9521,8 @@ noscript {
&__lead {
margin-bottom: 20px;
h1,
h2,
h3 {
margin-bottom: 15px;
}
@ -9587,6 +9598,8 @@ noscript {
flex: 1;
box-sizing: border-box;
h1,
h2,
h3 {
margin-bottom: 20px;
}

8
app/javascript/flavours/glitch/utils/__tests__/cache.test.ts
View File

@ -40,11 +40,13 @@ describe('createCache', () => {
});
test('removes oldest item cached if it exceeds a set size', () => {
const cache = createLimitedCache({ maxSize: 1 });
const cache = createLimitedCache({ maxSize: 2 });
cache.set('test1', 1);
cache.set('test2', 2);
cache.set('test3', 3);
expect(cache.get('test1')).toBeUndefined();
expect(cache.get('test2')).toBe(2);
expect(cache.get('test3')).toBe(3);
});
test('retrieving a value bumps up last access', () => {
@ -63,13 +65,13 @@ describe('createCache', () => {
const cache = createLimitedCache({ maxSize: 1, log });
cache.set('test1', 1);
expect(log).toHaveBeenLastCalledWith(
'Added %s to cache, now size %d',
'Added %o to cache, now size %d',
'test1',
1,
);
cache.set('test2', 1);
expect(log).toHaveBeenLastCalledWith(
'Added %s and deleted %s from cache, now size %d',
'Added %o and deleted %o from cache, now size %d',
'test2',
'test1',
1,

4
app/javascript/flavours/glitch/utils/cache.ts
View File

@ -43,13 +43,13 @@ export function createLimitedCache<CacheValue, CacheKey = string>({
cacheMap.delete(lastKey);
cacheKeys.delete(lastKey);
log(
'Added %s and deleted %s from cache, now size %d',
'Added %o and deleted %o from cache, now size %d',
key,
lastKey,
cacheMap.size,
);
} else {
log('Added %s to cache, now size %d', key, cacheMap.size);
log('Added %o to cache, now size %d', key, cacheMap.size);
}
},
clear: () => {

12
app/javascript/mastodon/actions/compose.js
View File

@ -93,7 +93,7 @@ const messages = defineMessages({
export const ensureComposeIsVisible = (getState) => {
if (!getState().getIn(['compose', 'mounted'])) {
browserHistory.push('/publish');
browserHistory.push('/publish', { focusTarget: false });
}
};
@ -294,7 +294,10 @@ export function submitCompose(successCallback) {
message: statusId === null ? messages.published : messages.saved,
action: messages.open,
dismissAfter: 10000,
onClick: () => browserHistory.push(`/@${response.data.account.username}/${response.data.id}`),
onClick: () => browserHistory.push(
`/@${response.data.account.username}/${response.data.id}`,
{ focusTarget: 'detailed-status' }
),
}));
}).catch(function (error) {
dispatch(submitComposeFail(error));
@ -341,11 +344,6 @@ export function uploadCompose(files) {
return;
}
if (getState().getIn(['compose', 'poll'])) {
dispatch(showAlert({ message: messages.uploadErrorPoll }));
return;
}
dispatch(uploadComposeRequest());
for (const [i, file] of Array.from(files).entries()) {

2
app/javascript/mastodon/actions/importer/emoji.ts
View File

@ -18,7 +18,7 @@ export async function importCustomEmoji(emojis: ApiCustomEmojiJSON[]) {
);
// If there's a mismatch, re-import all custom emojis.
if (existingEmojis.length < emojis.length) {
if (existingEmojis.length > 0 && existingEmojis.length < emojis.length) {
await clearCache('custom');
await loadCustomEmoji();

1
app/javascript/mastodon/actions/modal.ts
View File

@ -10,6 +10,7 @@ interface OpenModalPayload {
modalType: ModalType;
modalProps: ModalProps;
previousModalProps?: ModalProps;
ignoreFocus?: boolean;
}
export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');

5
app/javascript/mastodon/components/account_header/name.tsx
View File

@ -19,6 +19,7 @@ import { FollowsYouBadge } from '../badge';
import { CopyButton } from '../copy_button';
import { DisplayName } from '../display_name';
import { Icon } from '../icon';
import { NavigationFocusTarget } from '../navigation_focus_target';
import { AccountBadges } from './badges';
import classes from './styles.module.scss';
@ -56,9 +57,9 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
return (
<div className={classes.nameWrapper}>
<div className={classes.name}>
<h1>
<NavigationFocusTarget as='h1'>
<DisplayName account={account} variant='simple' />
</h1>
</NavigationFocusTarget>
{relationship?.followed_by && <FollowsYouBadge />}
</div>

1
app/javascript/mastodon/components/callout/styles.module.css
View File

@ -62,6 +62,7 @@
background: none;
border: none;
color: inherit;
font: inherit;
font-weight: 500;
padding: 0;
text-wrap: nowrap;

10
app/javascript/mastodon/components/column_header.tsx
View File

@ -19,6 +19,7 @@ import { useIdentity } from 'mastodon/identity_context';
import { useColumnIndexContext } from '../features/ui/components/columns_area';
import { getColumnSkipLinkId } from '../features/ui/components/skip_links';
import { NavigationFocusTarget } from './navigation_focus_target';
import { useAppHistory } from './router';
export const messages = defineMessages({
@ -272,7 +273,7 @@ export const ColumnHeader: React.FC<Props> = ({
{!backButton && hasIcon && (
<Icon id={icon} icon={iconComponent} className='column-header__icon' />
)}
{title}
<span className='column-header__text'>{title}</span>
</>
);
@ -285,7 +286,10 @@ export const ColumnHeader: React.FC<Props> = ({
<div className={headingClassName}>
{backButton}
{hasTitle && (
<h1 className='column-header__title-wrapper'>
<NavigationFocusTarget
as='h1'
className='column-header__title-wrapper'
>
{onClick ? (
<button
onClick={handleTitleClick}
@ -304,7 +308,7 @@ export const ColumnHeader: React.FC<Props> = ({
{titleContents}
</span>
)}
</h1>
</NavigationFocusTarget>
)}
<div className='column-header__buttons'>

12
app/javascript/mastodon/components/modal_root.jsx
View File

@ -7,6 +7,7 @@ import { multiply } from 'color-blend';
import { createBrowserHistory } from 'history';
import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
import { IGNORE_FOCUS_ON_OPEN } from '../reducers/modal';
class ModalRoot extends PureComponent {
@ -21,7 +22,10 @@ class ModalRoot extends PureComponent {
b: PropTypes.number,
}),
]),
ignoreFocus: PropTypes.bool,
ignoreFocus: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string, // 'on-open', see IGNORE_FOCUS_ON_OPEN
]),
...WithOptionalRouterPropTypes,
};
@ -118,7 +122,11 @@ class ModalRoot extends PureComponent {
_ensureHistoryBuffer () {
const { pathname, search, hash, state } = this.history.location;
if (!state || state.mastodonModalKey !== this._modalHistoryKey) {
this.history.push({ pathname, search, hash }, { ...state, mastodonModalKey: this._modalHistoryKey });
this.history.push({ pathname, search, hash }, {
...state,
focusTarget: this.props.ignoreFocus !== IGNORE_FOCUS_ON_OPEN,
mastodonModalKey: this._modalHistoryKey,
});
}
}

145
app/javascript/mastodon/components/navigation_focus_target/index.tsx Normal file
View File

@ -0,0 +1,145 @@
import {
createContext,
useContext,
useRef,
useLayoutEffect,
useCallback,
} from 'react';
import { useLocation } from 'react-router-dom';
import { polymorphicForwardRef } from '@/types/polymorphic';
import type { MastodonLocation } from '../router';
export const FOCUS_TARGET = {
POST: 'detailed-status',
} as const;
export type FocusTarget =
| boolean
| (typeof FOCUS_TARGET)[keyof typeof FOCUS_TARGET];
const FocusTargetContext =
createContext<React.MutableRefObject<FocusTarget> | null>(null);
/**
* `FocusTargetProvider` keeps track of whether focus should be
* set after a navigation. By default, any navigation will set the
* current value of `focusTargetRef` to `true`, which will cause
* the `NavigationFocusTarget` component to focus itself when it mounts.
*
* To disable this behaviour for a navigation, the focus target can be
* set to `false` using location state, for example:
* ```
* location.push(url, { focusTarget: false });
* ```
*
* If the target page contains multiple `NavigationFocusTarget` components
* (e.g. a main heading and a post that should be focused), give the more
* specific `NavigationFocusTarget` instance a name, and pass the same name
* via location state:
* ```
* location.push(url, { focusTarget: 'detailed-status' });
* ```
*/
export const FocusTargetProvider: React.FC<{
children: React.ReactNode;
}> = ({ children }) => {
const focusTargetRef = useRef<FocusTarget>(false);
const previousLocationRef = useRef<
| (Pick<MastodonLocation, 'pathname' | 'search'> & {
focusTarget?: FocusTarget;
})
| null
>(null);
const {
pathname,
search,
state = {},
} = useLocation<{ focusTarget?: FocusTarget } | undefined>();
const { focusTarget } = state;
useLayoutEffect(() => {
// We never want to set focus on page load, so we keep
// track of whether a manual navigation has occurred by comparing
// our current with the previous location:
const previous = previousLocationRef.current;
// Bail out on the first render, populate previousLocationRef
if (previous === null) {
previousLocationRef.current = { pathname, search, focusTarget };
return;
}
// Bail out if location hasn't changed
if (
previous.pathname === pathname &&
previous.search === search &&
previous.focusTarget === focusTarget
) {
return;
}
// Location has changed:
// - Set focusTarget
// – Store current location as previous
// (We store `focusTarget` as `false` to allow overriding it.)
previousLocationRef.current = { pathname, search, focusTarget: false };
focusTargetRef.current = focusTarget ?? true;
}, [pathname, search, focusTarget]);
return (
<FocusTargetContext.Provider value={focusTargetRef}>
{children}
</FocusTargetContext.Provider>
);
};
export function useFocusOnNavigation(targetName?: string) {
const focusTargetRef = useContext(FocusTargetContext);
if (focusTargetRef === null) {
throw Error(
'useFocusTargetContext must be used inside of a FocusTargetProvider',
);
}
return useCallback(
(element: HTMLElement | null) => {
const focusTarget = focusTargetRef.current;
// Bail out if focusTarget was set to `false`
if (!element || !focusTarget) {
return;
}
if (focusTarget === true || focusTarget === targetName) {
setTimeout(() => {
element.focus({ preventScroll: true });
}, 0);
}
},
[focusTargetRef, targetName],
);
}
interface FocusTargetElementProps extends React.ComponentPropsWithoutRef<'h1'> {
focusTargetName?: string;
}
export const NavigationFocusTarget = polymorphicForwardRef<
'h1',
FocusTargetElementProps
>(({ as: Component = 'h1', focusTargetName, children, ...otherProps }) => {
const focusOnNavigation = useFocusOnNavigation(focusTargetName);
return (
<Component ref={focusOnNavigation} tabIndex={-1} {...otherProps}>
{children}
</Component>
);
});

5
app/javascript/mastodon/components/router.tsx
View File

@ -14,9 +14,14 @@ import { createBrowserHistory } from 'history';
import { layoutFromWindow } from 'mastodon/is_mobile';
import { isDevelopment } from 'mastodon/utils/environment';
import type { FocusTarget } from './navigation_focus_target';
interface MastodonLocationState {
fromMastodon?: boolean;
mastodonModalKey?: string;
// Controls which element is focused after a navigation.
// Set to `false` to prevent navigation focus.
focusTarget?: FocusTarget;
// Prevent the rightmost column in advanced UI from scrolling
// into view on location changes
preventMultiColumnAutoScroll?: string;

5
app/javascript/mastodon/components/status.jsx
View File

@ -33,6 +33,7 @@ import StatusContent from './status_content';
import { StatusThreadLabel } from './status_thread_label';
import { CollectionPreviewCard } from '../features/collections/components/collection_preview_card';
import { compareUrls } from '../utils/compare_urls';
import { FOCUS_TARGET } from './navigation_focus_target';
const domParser = new DOMParser();
@ -311,9 +312,9 @@ class Status extends ImmutablePureComponent {
window.open(path, '_blank', 'noopener');
} else {
if (history.location.pathname.replace('/deck/', '/') === path) {
history.replace(path);
history.replace(path, {focusTarget: FOCUS_TARGET.POST});
} else {
history.push(path);
history.push(path, {focusTarget: FOCUS_TARGET.POST});
}
}
};

5
app/javascript/mastodon/containers/mastodon.jsx
View File

@ -8,6 +8,7 @@ import { Provider as ReduxProvider } from 'react-redux';
import { hydrateStore } from 'mastodon/actions/store';
import { connectUserStream } from 'mastodon/actions/streaming';
import ErrorBoundary from 'mastodon/components/error_boundary';
import { FocusTargetProvider } from '@/mastodon/components/navigation_focus_target';
import { Router } from 'mastodon/components/router';
import UI from 'mastodon/features/ui';
import { IdentityContext, createIdentityContext } from 'mastodon/identity_context';
@ -49,7 +50,9 @@ export default class Mastodon extends PureComponent {
<ErrorBoundary>
<Router>
<ScrollContext>
<Route path='/' component={UI} />
<FocusTargetProvider>
<Route path='/' component={UI} />
</FocusTargetProvider>
</ScrollContext>
<BodyScrollLock />
</Router>

7
app/javascript/mastodon/features/about/index.jsx
View File

@ -8,10 +8,13 @@ import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { domain } from 'mastodon/initial_state';
import { injectIntl } from '@/mastodon/components/intl';
import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server';
import { Account } from 'mastodon/components/account';
import Column from 'mastodon/components/column';
import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
import { ServerHeroImage } from 'mastodon/components/server_hero_image';
import { Skeleton } from 'mastodon/components/skeleton';
import { LinkFooter} from 'mastodon/features/ui/components/link_footer';
@ -91,7 +94,9 @@ class About extends PureComponent {
srcSet={Object.keys(server.item?.thumbnail.versions ?? {}).map((key) => `${server.item?.thumbnail.versions && server.item.thumbnail.versions[key]} ${key.replace('@', '')}`).join(', ')}
className='about__header__hero'
/>
<h1>{isLoading ? <Skeleton width='10ch' /> : server.domain}</h1>
<NavigationFocusTarget as='h1'>
{isLoading ? <Skeleton width='10ch' /> : domain}
</NavigationFocusTarget>
<p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank' rel='noopener'>Mastodon</a> }} /></p>
</div>

1
app/javascript/mastodon/features/account_edit/components/field_actions.tsx
View File

@ -26,6 +26,7 @@ export const AccountFieldActions: FC<{ id: string }> = ({ id }) => {
openModal({
modalType: 'ACCOUNT_EDIT_FIELD_EDIT',
modalProps: { fieldKey: id },
ignoreFocus: true,
}),
);
}, [dispatch, id]);

20
app/javascript/mastodon/features/account_edit/index.tsx
View File

@ -137,16 +137,28 @@ export const AccountEdit: FC = () => {
);
const handleOpenModal = useCallback(
(type: ModalType, props?: Record<string, unknown>) => {
dispatch(openModal({ modalType: type, modalProps: props ?? {} }));
(
type: ModalType,
{
modalProps = {},
ignoreFocus = false,
}: { modalProps?: Record<string, unknown>; ignoreFocus?: boolean } = {},
) => {
dispatch(
openModal({
modalType: type,
modalProps,
ignoreFocus,
}),
);
},
[dispatch],
);
const handleNameEdit = useCallback(() => {
handleOpenModal('ACCOUNT_EDIT_NAME');
handleOpenModal('ACCOUNT_EDIT_NAME', { ignoreFocus: true });
}, [handleOpenModal]);
const handleBioEdit = useCallback(() => {
handleOpenModal('ACCOUNT_EDIT_BIO');
handleOpenModal('ACCOUNT_EDIT_BIO', { ignoreFocus: true });
}, [handleOpenModal]);
const handleCustomFieldAdd = useCallback(() => {
handleOpenModal('ACCOUNT_EDIT_FIELD_EDIT');

15
app/javascript/mastodon/features/account_timeline/modals/field_modal.tsx
View File

@ -10,6 +10,7 @@ import {
ModalShellActions,
ModalShellBody,
} from '@/mastodon/components/modal_shell';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { useFieldHtml } from '../hooks/useFieldHtml';
@ -24,12 +25,14 @@ export const AccountFieldModal: FC<{
return (
<ModalShell>
<ModalShellBody>
<EmojiHTML
as='h2'
htmlString={field.name_emojified}
onElement={handleLabelElement}
className={classes.fieldName}
/>
<NavigationFocusTarget as='h1'>
<EmojiHTML
as='span'
htmlString={field.name_emojified}
onElement={handleLabelElement}
className={classes.fieldName}
/>
</NavigationFocusTarget>
<EmojiHTML
as='p'
htmlString={field.value_emojified}

12
app/javascript/mastodon/features/alt_text_modal/__tests__/index-test.tsx
View File

@ -7,6 +7,8 @@ import { List, Map } from 'immutable';
import { render } from '@testing-library/react';
import { vi } from 'vitest';
import { FocusTargetProvider } from '@/mastodon/components/navigation_focus_target';
import { Router } from '@/mastodon/components/router';
import type { RootState } from 'mastodon/store';
import { useAppSelector } from 'mastodon/store';
@ -27,9 +29,13 @@ describe('<AltTextModal />', () => {
const renderComponent = () => {
return render(
<IntlProvider locale='en' messages={{}}>
<AltTextModal mediaId={mediaId} onClose={handleClose} />
</IntlProvider>,
<Router>
<FocusTargetProvider>
<IntlProvider locale='en' messages={{}}>
<AltTextModal mediaId={mediaId} onClose={handleClose} />
</IntlProvider>
</FocusTargetProvider>
</Router>,
);
};

8
app/javascript/mastodon/features/alt_text_modal/index.tsx
View File

@ -22,6 +22,7 @@ import { changeUploadCompose } from 'mastodon/actions/compose_typed';
import { Button } from 'mastodon/components/button';
import { GIFV } from 'mastodon/components/gifv';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
import { Skeleton } from 'mastodon/components/skeleton';
import { Audio } from 'mastodon/features/audio';
import { CharacterCounter } from 'mastodon/features/compose/components/character_counter';
@ -412,12 +413,15 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
)}
</Button>
<span className='dialog-modal__header__title'>
<NavigationFocusTarget
as='h1'
className='dialog-modal__header__title'
>
<FormattedMessage
id='alt_text_modal.add_alt_text'
defaultMessage='Add alt text'
/>
</span>
</NavigationFocusTarget>
<Button secondary onClick={onClose}>
<FormattedMessage

5
app/javascript/mastodon/features/annual_report/index.tsx
View File

@ -10,6 +10,7 @@ import classNames from 'classnames/bind';
import { closeModal } from '@/mastodon/actions/modal';
import { IconButton } from '@/mastodon/components/icon_button';
import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { getReport } from '@/mastodon/reducers/slices/annual_report';
import {
createAppSelector,
@ -83,7 +84,9 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
return (
<div className={styles.wrapper} data-color-scheme='dark'>
<div className={styles.header}>
<h1>Wrapstodon {report.year}</h1>
<NavigationFocusTarget as='h1'>
Wrapstodon {report.year}
</NavigationFocusTarget>
{account && <p>@{account.acct}</p>}
{context === 'modal' && (
<IconButton

9
app/javascript/mastodon/features/closed_registrations_modal/index.jsx
View File

@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import { fetchServer } from 'mastodon/actions/server';
import { domain } from 'mastodon/initial_state';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
const mapStateToProps = state => ({
message: state.getIn(['server', 'server', 'item', 'registrations', 'message']),
@ -42,7 +43,9 @@ class ClosedRegistrationsModal extends ImmutablePureComponent {
return (
<div className='modal-root__modal interaction-modal'>
<div className='interaction-modal__lead'>
<h3><FormattedMessage id='closed_registrations_modal.title' defaultMessage='Signing up on Mastodon' /></h3>
<NavigationFocusTarget as='h1'>
<FormattedMessage id='closed_registrations_modal.title' defaultMessage='Signing up on Mastodon' />
</NavigationFocusTarget>
<p>
<FormattedMessage
id='closed_registrations_modal.preamble'
@ -53,12 +56,12 @@ class ClosedRegistrationsModal extends ImmutablePureComponent {
<div className='interaction-modal__choices'>
<div className='interaction-modal__choices__choice'>
<h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
<h2><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h2>
{closedRegistrationsMessage}
</div>
<div className='interaction-modal__choices__choice'>
<h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3>
<h2><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h2>
<p className='prose'>
<FormattedMessage
id='closed_registrations.other_server_instructions'

9
app/javascript/mastodon/features/collection_adder/index.tsx
View File

@ -4,6 +4,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import type { ApiCollectionJSON } from '@/mastodon/api_types/collections';
import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
import type { Account } from '@/mastodon/models/account';
import {
@ -114,13 +115,17 @@ export const CollectionAdder: React.FC<{
onClick={onClose}
/>
<span className='dialog-modal__header__title' id={titleId}>
<NavigationFocusTarget
as='h1'
id={titleId}
className='dialog-modal__header__title'
>
<FormattedMessage
id='collections.add_to_collection'
defaultMessage='Add {name} to collections'
values={{ name: <strong>@{account?.acct}</strong> }}
/>
</span>
</NavigationFocusTarget>
</div>
<div className='dialog-modal__content'>

5
app/javascript/mastodon/features/collections/components/share_modal.tsx
View File

@ -4,6 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useLocation } from 'react-router';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { me } from '@/mastodon/initial_state';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { changeCompose, focusCompose } from 'mastodon/actions/compose';
@ -66,7 +67,7 @@ export const CollectionShareModal: React.FC<{
return (
<ModalShell>
<ModalShellBody>
<h1 className={classes.heading}>
<NavigationFocusTarget as='h1' className={classes.heading}>
{isNew ? (
<FormattedMessage
id='collection.share_modal.title_new'
@ -78,7 +79,7 @@ export const CollectionShareModal: React.FC<{
defaultMessage='Share collection'
/>
)}
</h1>
</NavigationFocusTarget>
<IconButton
title={intl.formatMessage({

5
app/javascript/mastodon/features/collections/index.tsx
View File

@ -4,6 +4,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { Column } from 'mastodon/components/column';
import { ColumnHeader } from 'mastodon/components/column_header';
import { DisplayNameSimple } from 'mastodon/components/display_name/simple';
@ -71,7 +72,9 @@ export const Collections: React.FC<{
<Scrollable>
<header className={classes.header}>
<h1 className={classes.heading}>{pageTitleHtml}</h1>
<NavigationFocusTarget as='h1' className={classes.heading}>
{pageTitleHtml}
</NavigationFocusTarget>
<TabList plain>
<TabLink exact to={`/@${account?.acct}/collections`}>
{intl.formatMessage(createdByTabMessage, {

4
app/javascript/mastodon/features/compose/components/compose_form.jsx
View File

@ -220,7 +220,9 @@ class ComposeForm extends ImmutablePureComponent {
} else if(prevProps.isSubmitting && !this.props.isSubmitting) {
this.textareaRef.current.focus();
} else if (this.props.spoiler !== prevProps.spoiler) {
if (this.props.spoiler) {
const mediaJustAdded = this.props.anyMedia && !prevProps.anyMedia;
if (this.props.spoiler && !mediaJustAdded) {
this.spoilerText.input.focus();
} else if (prevProps.spoiler) {
this.textareaRef.current.focus();

4
app/javascript/mastodon/features/compose/containers/poll_button_container.js
View File

@ -4,12 +4,10 @@ import { addPoll, removePoll } from '../../../actions/compose';
import PollButton from '../components/poll_button';
const mapStateToProps = state => {
const readyAttachmentsSize = state.compose.get('media_attachments').size ?? 0;
const hasAttachments = readyAttachmentsSize > 0 || !!state.compose.get('is_uploading');
const hasQuote = !!state.compose.get('quoted_status_id');
return ({
disabled: hasAttachments || hasQuote,
disabled: hasQuote,
active: state.getIn(['compose', 'poll']) !== null,
});
};

3
app/javascript/mastodon/features/compose/containers/upload_button_container.js
View File

@ -4,7 +4,6 @@ import { uploadCompose } from '../../../actions/compose';
import UploadButton from '../components/upload_button';
const mapStateToProps = state => {
const isPoll = state.getIn(['compose', 'poll']) !== null;
const isUploading = state.getIn(['compose', 'is_uploading']);
const readyAttachmentsSize = state.getIn(['compose', 'media_attachments']).size ?? 0;
const pendingAttachmentsSize = state.getIn(['compose', 'pending_media_attachments']).size ?? 0;
@ -14,7 +13,7 @@ const mapStateToProps = state => {
const hasQuote = !!state.compose.get('quoted_status_id');
return {
disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio || hasQuote,
disabled: isUploading || isOverLimit || hasVideoOrAudio || hasQuote,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
};
};

5
app/javascript/mastodon/features/custom_homepage/index.tsx
View File

@ -6,6 +6,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { fetchServer } from 'mastodon/actions/server';
import { ServerHeroImage } from 'mastodon/components/server_hero_image';
import { TabLink, TabList } from 'mastodon/components/tab_list';
@ -40,7 +41,9 @@ export const CustomHomepage: React.FC = () => {
/>
<div className={classes.topSection}>
<h1>{server.item?.domain}</h1>
<NavigationFocusTarget as='h1'>
{server.item?.domain}
</NavigationFocusTarget>
<p>{server.item?.description}</p>
</div>

4
app/javascript/mastodon/features/emoji/database.test.ts
View File

@ -22,6 +22,10 @@ function rawEmojiFactory(data: Partial<CompactEmoji> = {}): CompactEmoji {
}
describe('emoji database', () => {
beforeEach(async () => {
await testGet(); // Loads the database schema.
});
afterEach(() => {
testClear();
indexedDB = new IDBFactory();

39
app/javascript/mastodon/features/emoji/database.ts
View File

@ -143,7 +143,28 @@ export async function search({
return intersection;
})
.values(),
).toSorted((a, b) => a.score - b.score);
);
// If there are no results, try a cursor-based custom emoji search instead.
if (results.length === 0) {
const trx = db.transaction('custom', 'readonly');
const foundEmojis = new Set<string>();
for await (const cursor of trx.store) {
const emoji = cursor.value;
const score = getScoreForEmoji(emoji, query, false);
if (score === null || foundEmojis.has(emoji.shortcode)) {
continue;
}
results.push({ ...emoji, score });
foundEmojis.add(emoji.shortcode);
}
log('cursor search found %d results for "%s"', foundEmojis.size, query);
await trx.done;
}
// Sort by score, descending.
results.sort((a, b) => a.score - b.score);
const time = performance.measure('emoji-search-end', 'emoji-search-start');
log(
@ -159,14 +180,19 @@ export async function search({
return results;
}
function getScoreForEmoji(emoji: AnyEmojiData, query: string) {
function getScoreForEmoji(
emoji: AnyEmojiData,
query: string,
checkTokens = true,
) {
const id = 'shortcode' in emoji ? emoji.shortcode : emoji.label;
if (id === query) {
return 0;
}
let index = 1;
for (const token of [id, ...emoji.tokens]) {
const searchTokens = checkTokens ? [id, ...emoji.tokens] : [id];
for (const token of searchTokens) {
const tokenIndex = token.indexOf(query);
if (tokenIndex !== -1) {
return index + tokenIndex / token.length;
@ -246,6 +272,13 @@ export async function clearCache(key: CacheKey) {
log('Cleared cache for %s', key);
}
export async function resetDatabase() {
const db = await loadDB();
const storeNames = [...db.objectStoreNames];
await Promise.all(storeNames.map((storeName) => db.clear(storeName)));
log(storeNames, 'Reset emoji database stores:');
}
export async function loadEmojiByHexcode(
hexcode: string,
localeString: string,

5
app/javascript/mastodon/features/emoji/db-schema.ts
View File

@ -10,6 +10,7 @@ import type {
StoreNames,
} from 'idb';
import { resetDatabase } from './database';
import type { CustomEmojiData, CacheKey, UnicodeEmojiData } from './types';
import { emojiLogger } from './utils';
@ -57,7 +58,7 @@ type Transaction<Mode extends IDBTransactionMode = 'versionchange'> =
export type Database = IDBPDatabase<EmojiDB>;
const SCHEMA_VERSION = 3;
const SCHEMA_VERSION = 4;
export async function openEmojiDB() {
const db = await openDB<EmojiDB>('mastodon-emoji', SCHEMA_VERSION, {
@ -98,6 +99,8 @@ export async function openEmojiDB() {
});
deleteOldIndexes(shortcodeTable, ['hexcode']);
void resetDatabase();
log(
'Upgraded emoji database from version %d to %d',
oldVersion,

2
app/javascript/mastodon/features/emoji/emoji_picker.tsx
View File

@ -57,6 +57,8 @@ export const Emoji: FC<EmojiProps> = ({
const { mode } = useEmojiAppState();
return (
<EmojiRaw
// eslint-disable-next-line @typescript-eslint/no-deprecated -- In React props are frozen, but the library we use is old so doesn't respect that.
{...(EmojiRaw.defaultProps ?? {})}
data={EmojiData}
set={set}
sheetSize={sheetSize}

68
app/javascript/mastodon/features/emoji/index.ts
View File

@ -1,9 +1,8 @@
import { initialState } from '@/mastodon/initial_state';
import type { EMOJI_DB_NAME_SHORTCODES } from './constants';
import { toSupportedLocale } from './locale';
import { reloadCustomEmojis } from './picker';
import type { LocaleOrCustom } from './types';
import type { EmojiWorkerMessage } from './types';
import { emojiLogger } from './utils';
const userLocale = toSupportedLocale(initialState?.meta.locale ?? 'en');
@ -11,9 +10,10 @@ const userLocale = toSupportedLocale(initialState?.meta.locale ?? 'en');
let worker: Worker | null = null;
const log = emojiLogger('index');
const workerLog = emojiLogger('worker');
// This is too short, but better to fallback quickly than wait.
const WORKER_TIMEOUT = 1_000;
const WORKER_TIMEOUT = 2_000;
export async function initializeEmoji() {
log('initializing emojis');
@ -43,43 +43,44 @@ export async function initializeEmoji() {
const { data: message } = event;
worker ??= tempWorker;
clearTimeout(timeoutId);
if (message === 'ready') {
log('worker ready, loading data');
clearTimeout(timeoutId);
messageWorker('shortcodes');
void loadCustomEmoji();
void loadEmojiLocale(userLocale);
} else {
log('got worker message: %s', message);
if (message !== 'ready') {
workerLog(message);
return;
}
const debugValue = localStorage.getItem('debug');
if (debugValue) {
messageWorker({ type: 'debug', debugValue });
}
workerLog('loading data');
messageWorker(userLocale);
messageWorker('custom');
messageWorker('shortcodes');
});
}
async function fallbackLoad() {
log('falling back to main thread for loading');
await loadCustomEmoji();
const { importLegacyShortcodes } = await import('./loader');
const { importCustomEmojiData, importLegacyShortcodes, importEmojiData } =
await import('./loader');
const customEmojis = await importCustomEmojiData();
if (customEmojis && customEmojis.length > 0) {
log('loaded %d custom emojis', customEmojis.length);
await reloadCustomEmojis();
}
const shortcodes = await importLegacyShortcodes();
if (shortcodes?.length) {
log('loaded %d legacy shortcodes', shortcodes.length);
}
await loadEmojiLocale(userLocale);
}
async function loadEmojiLocale(localeString: string) {
const locale = toSupportedLocale(localeString);
const { importEmojiData } = await import('./loader');
if (worker) {
log('asking worker to load locale %s', locale);
messageWorker(locale);
} else {
const emojis = await importEmojiData(locale);
if (emojis) {
log('loaded %d emojis to locale %s', emojis.length, locale);
}
const emojis = await importEmojiData(userLocale);
if (emojis) {
log('loaded %d emojis to locale %s', emojis.length, userLocale);
}
}
@ -96,11 +97,16 @@ export async function loadCustomEmoji() {
}
}
function messageWorker(
locale: LocaleOrCustom | typeof EMOJI_DB_NAME_SHORTCODES,
) {
function messageWorker(data: EmojiWorkerMessage | string) {
if (!worker) {
return;
}
worker.postMessage({ locale });
if (typeof data === 'string') {
worker.postMessage({
type: 'load',
storeName: data,
} satisfies EmojiWorkerMessage);
} else {
worker.postMessage(data);
}
}

31
app/javascript/mastodon/features/emoji/normalize.test.ts
View File

@ -4,7 +4,7 @@ import { basename, resolve } from 'path';
import { flattenEmojiData } from 'emojibase';
import unicodeRawEmojis from 'emojibase-data/en/data.json';
import { unicodeToTwemojiHex } from './normalize';
import { extractTokens, unicodeToTwemojiHex } from './normalize';
const emojiSVGFiles = await readdir(
// This assumes tests are run from project root
@ -33,3 +33,32 @@ describe('unicodeToTwemojiHex', () => {
expect(svgFileNamesWithoutBorder).toContain(result);
});
});
describe('extractTokens', () => {
test('returns an empty array for blank input', () => {
expect(extractTokens(' ', null)).toEqual([]);
});
test('check token word breaking with Intl.Segmenter', () => {
const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
expect(
extractTokens('thumbs_up smiling-face camelCase', segmenter),
).toEqual(['thumbs', 'up', 'smiling', 'face', 'camel', 'case']);
});
test('check token word breaking with regex', () => {
expect(extractTokens('Smile_face joy-test A ok 7 z', null)).toEqual([
'smile',
'face',
'joy',
'test',
'ok',
]);
});
test('ensure +1 and -1 are preserved', () => {
expect(extractTokens('+1', null)).toEqual(['+1']);
expect(extractTokens('-1', null)).toEqual(['-1']);
});
});

Some files were not shown because too many files have changed in this diff Show More