diff --git a/.github/workflows/build-releases.yml b/.github/workflows/build-releases.yml index db17b2169..7608535f0 100644 --- a/.github/workflows/build-releases.yml +++ b/.github/workflows/build-releases.yml @@ -21,7 +21,7 @@ jobs: # Only tag with latest when ran against the latest stable branch # This needs to be updated after each minor version release flavor: | - latest=${{ startsWith(github.ref, 'refs/tags/v4.3.') }} + latest=${{ startsWith(github.ref, 'refs/tags/v4.4.') }} tags: | type=pep440,pattern={{raw}} type=pep440,pattern=v{{major}}.{{minor}} @@ -39,7 +39,7 @@ jobs: # Only tag with latest when ran against the latest stable branch # This needs to be updated after each minor version release flavor: | - latest=${{ startsWith(github.ref, 'refs/tags/v4.3.') }} + latest=${{ startsWith(github.ref, 'refs/tags/v4.4.') }} tags: | type=pep440,pattern={{raw}} type=pep440,pattern=v{{major}}.{{minor}} diff --git a/.github/workflows/crowdin-upload.yml b/.github/workflows/crowdin-upload.yml index 4f4d917d1..d0d79d919 100644 --- a/.github/workflows/crowdin-upload.yml +++ b/.github/workflows/crowdin-upload.yml @@ -14,6 +14,7 @@ on: - config/locales/devise.en.yml - config/locales/doorkeeper.en.yml - .github/workflows/crowdin-upload.yml + workflow_dispatch: jobs: upload-translations: diff --git a/CHANGELOG.md b/CHANGELOG.md index efdd3adf1..b3af469bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,59 @@ All notable changes to this project will be documented in this file. -## [4.4.0] - UNRELEASED +## [4.4.3] - 2025-08-05 + +### Security + +- Update dependencies +- Fix incorrect rate-limit handling [GHSA-84ch-6436-c7mg](https://github.com/mastodon/mastodon/security/advisories/GHSA-84ch-6436-c7mg) + +### Fixed + +- Fix race condition caused by ActiveRecord query cache in `Create` critical path (#35662 by @ClearlyClaire) +- Fix race condition caused by quote post processing (#35657 by @ClearlyClaire) +- Fix WebUI crashing for accounts with `null` URL (#35651 by @ClearlyClaire) +- Fix friends-of-friends recommendations suggesting already-requested accounts (#35604 by @ClearlyClaire) +- Fix synchronous recursive fetching of deeply-nested quoted posts (#35600 by @ClearlyClaire) +- Fix “Expand this post” link including user `@undefined` (#35478 by @ClearlyClaire) + +### Changed + +- Change `StatusReachFinder` to consider quotes as well as reblogs (#35601 by @ClearlyClaire) +- Add restrictions on which quote posts can trend (#35507 by @ClearlyClaire) +- Change quote verification to not bypass authorization flow for mentions (#35528 by @ClearlyClaire) + +## [4.4.2] - 2025-07-23 + +### Security + +- Update dependencies + +### Fixed + +- Fix menu not clickable in Firefox (#35390 and #35414 by @diondiondion) +- Add `lang` attribute to current composer language in alt text modal (#35412 by @diondiondion) +- Fix quote posts styling on notifications page (#35411 by @diondiondion) +- Improve a11y of custom select menus in notifications settings (#35403 by @diondiondion) +- Fix selected item in poll select menus is unreadable in Firefox (#35402 by @diondiondion) +- Update age limit wording (#35387 by @diondiondion) +- Fix support for quote verification in implicit status updates (#35384 by @ClearlyClaire) +- Improve `Dropdown` component accessibility (#35373 by @diondiondion) +- Fix processing some incoming quotes failing because of missing JSON-LD context (#35354 and #35380 by @ClearlyClaire) +- Make bio hashtags open the local page instead of the remote instance (#35349 by @ChaosExAnima) +- Fix styling of external log-in button (#35320 by @ClearlyClaire) + +## [4.4.1] - 2025-07-09 + +### Fixed + +- Fix nearly every sub-directory being crawled as part of Vite build (#35323 by @ClearlyClaire) +- Fix assets not building when Redis is unavailable (#35321 by @oneiros) +- Fix replying from media modal or pop-in-player tagging user `@undefined` (#35317 by @ClearlyClaire) +- Fix support for special characters in various environment variables (#35314 by @mjankowski and @ClearlyClaire) +- Fix some database migrations failing for indexes manually removed by admins (#35309 by @mjankowski) + +## [4.4.0] - 2025-07-08 ### Added @@ -38,7 +90,7 @@ All notable changes to this project will be documented in this file. Server administrators can now chose to opt in to transmit referrer information when following an external link. Only the domain name is transmitted, not the referrer path. - Add double tap to zoom and swipe to dismiss to media modal in web UI (#34210 by @Gargron) - Add link from Web UI for Hashtags to the Moderation UI (#31448 by @ThisIsMissEm) -- **Add terms of service** (#33055, #33233, #33230, #33703, #33699, #33994, #33993, #34105, #34122, #34200, #34527, #35053, #35115, #35126 and #35127 by @ClearlyClaire, @Gargron, @mjankowski, and @oneiros)\ +- **Add terms of service** (#33055, #33233, #33230, #33703, #33699, #33994, #33993, #34105, #34122, #34200, #34527, #35053, #35115, #35126, #35127 and #35233 by @ClearlyClaire, @Gargron, @mjankowski, and @oneiros)\ Server administrators can now fill in Terms of Service and notify their users of upcoming changes. - Add optional bulk mailer settings (#35191 and #35203 by @oneiros)\ This adds the optional environment variables `BULK_SMTP_PORT`, `BULK_SMTP_SERVER`, `BULK_SMTP_LOGIN` and so on analogous to `SMTP_PORT`, `SMTP_SERVER`, `SMTP_LOGIN` and related SMTP configuration environment variables.\ @@ -51,7 +103,7 @@ All notable changes to this project will be documented in this file. - Add ability to dismiss alt text badge by tapping it in web UI (#33737 by @Gargron) - Add loading indicator to timeline gap indicators in web UI (#33762 by @Gargron) - Add interaction modal when trying to interact with a poll while logged out (#32609 by @ThisIsMissEm) -- **Add experimental FASP support** (#34031, #34415, #34765, #34965, #34964, #34033 and #35218 by @oneiros)\ +- **Add experimental FASP support** (#34031, #34415, #34765, #34965, #34964, #34033, #35218, #35262 and #35263 by @oneiros)\ This is a first step towards supporting “Fediverse Auxiliary Service Providers” (https://github.com/mastodon/fediverse_auxiliary_service_provider_specifications). This is mostly interesting to developers who would like to implement their own FASP, but also includes the capability to share data with a discovery provider (see https://www.fediscovery.org). - Add ability for admins to send announcements to all users via email (#33928 and #34411 by @ClearlyClaire)\ This is meant for critical announcements only, as this will potentially send a lot of emails and cannot be opted out of by users. @@ -64,7 +116,7 @@ All notable changes to this project will be documented in this file. - Add dropdown menu with quick actions to lists of accounts in web UI (#34391, #34709, and #34767 by @Gargron, @diondiondion, and @mkljczk) - Add support for displaying “year in review” notification in web UI (#32710, #32765, #32709, #32807, #32914, #33148, and #33882 by @Gargron and @mjankowski)\ Note that the notification is currently not generated automatically, and at the moment requires a manual undocumented administrator action. -- Add experimental support for receiving HTTP Message Signatures (RFC9421) (#34814, #35033 and #35109 by @oneiros)\ +- Add experimental support for receiving HTTP Message Signatures (RFC9421) (#34814, #35033, #35109 and #35278 by @oneiros)\ For now, this needs to be explicitly enabled through the `http_message_signatures` feature flag (`EXPERIMENTAL_FEATURES=http_message_signatures`). This currently only covers verifying such signatures (inbound HTTP requests), not issuing them (outbound HTTP requests). - Add experimental Async Refreshes API (#34918 by @oneiros) - Add experimental server-side feature to fetch remote replies (#32615, #34147, #34149, #34151, #34615, #34682, and #34702 by @ClearlyClaire and @sneakers-the-rat)\ @@ -218,6 +270,7 @@ All notable changes to this project will be documented in this file. - Fix admin dashboard crash on specific Elasticsearch connection errors (#34683 by @ClearlyClaire) - Fix OIDC account creation failing for long display names (#34639 by @defnull) - Fix use of the deprecated `/api/v1/instance` endpoint in the moderation interface (#34613 by @renchap) +- Fix inaccessible “Clear search” button (#35152 and #35281 by @diondiondion) - Fix search operators sometimes getting lost (#35190 by @ClearlyClaire) - Fix directory scroll position reset (#34560 by @przucidlo) - Fix needlessly complex SVG paths for oEmbed and logo (#34538 by @edent) @@ -232,7 +285,7 @@ All notable changes to this project will be documented in this file. - Fix extra space under left-indented vertical videos (#34313 by @ClearlyClaire) - Fix glitchy iOS media attachment drag interactions (#35057 by @diondiondion) - Fix zoomed images being blurry in Safari (#35052 by @diondiondion) -- Fix redundant focus stop within status component in Web UI and make focus style more noticeable (#35037, #35051, #35096 and #35150 by @diondiondion) +- Fix redundant focus stop within status component in Web UI and make focus style more noticeable (#35037, #35051, #35096, #35150 and #35251 by @diondiondion) - Fix digits in media player time readout not having a consistent width (#35038 by @diondiondion) - Fix wrong text color for “Open in advanced web interface” banner in high-contrast theme (#35032 by @diondiondion) - Fix hover card for limited accounts not hiding information as expected (#35024 by @diondiondion) diff --git a/Gemfile.lock b/Gemfile.lock index 299507cac..cf26b6257 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -458,7 +458,7 @@ GEM net-smtp (0.5.1) net-protocol nio4r (2.7.4) - nokogiri (1.18.8) + nokogiri (1.18.9) mini_portile2 (~> 2.8.2) racc (~> 1.4) oj (3.16.11) @@ -801,7 +801,7 @@ GEM ruby-prof (1.7.2) base64 ruby-progressbar (1.13.0) - ruby-saml (1.18.0) + ruby-saml (1.18.1) nokogiri (>= 1.13.10) rexml ruby-vips (2.2.4) @@ -869,7 +869,7 @@ GEM terrapin (1.1.0) climate_control test-prof (1.4.4) - thor (1.3.2) + thor (1.4.0) tilt (2.6.0) timeout (0.4.3) tpm-key_attestation (0.14.1) diff --git a/SECURITY.md b/SECURITY.md index 26c06e67f..19f431fac 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -13,8 +13,9 @@ A "vulnerability in Mastodon" is a vulnerability in the code distributed through ## Supported Versions -| Version | Supported | -| ------- | --------- | -| 4.3.x | Yes | -| 4.2.x | Yes | -| < 4.2 | No | +| Version | Supported | +| ------- | ---------------- | +| 4.4.x | Yes | +| 4.3.x | Yes | +| 4.2.x | Until 2026-01-08 | +| < 4.2 | No | diff --git a/app/controllers/admin/account_actions_controller.rb b/app/controllers/admin/account_actions_controller.rb index 91849811e..3cfd1e176 100644 --- a/app/controllers/admin/account_actions_controller.rb +++ b/app/controllers/admin/account_actions_controller.rb @@ -14,16 +14,20 @@ module Admin def create authorize @account, :show? - account_action = Admin::AccountAction.new(resource_params) - account_action.target_account = @account - account_action.current_account = current_account + @account_action = Admin::AccountAction.new(resource_params) + @account_action.target_account = @account + @account_action.current_account = current_account - account_action.save! - - if account_action.with_report? - redirect_to admin_reports_path, notice: I18n.t('admin.reports.processed_msg', id: resource_params[:report_id]) + if @account_action.save + if @account_action.with_report? + redirect_to admin_reports_path, notice: I18n.t('admin.reports.processed_msg', id: resource_params[:report_id]) + else + redirect_to admin_account_path(@account.id) + end else - redirect_to admin_account_path(@account.id) + @warning_presets = AccountWarningPreset.all + + render :new end end diff --git a/app/controllers/concerns/signature_verification.rb b/app/controllers/concerns/signature_verification.rb index 902feef68..b61a56986 100644 --- a/app/controllers/concerns/signature_verification.rb +++ b/app/controllers/concerns/signature_verification.rb @@ -64,6 +64,9 @@ module SignatureVerification return (@signed_request_actor = actor) if signed_request.verified?(actor) fail_with! "Verification failed for #{actor.to_log_human_identifier} #{actor.uri}" + rescue Mastodon::MalformedHeaderError => e + @signature_verification_failure_code = 400 + fail_with! e.message rescue Mastodon::SignatureVerificationError => e fail_with! e.message rescue *Mastodon::HTTP_CONNECTION_ERRORS => e diff --git a/app/controllers/concerns/web_app_controller_concern.rb b/app/controllers/concerns/web_app_controller_concern.rb index 77af01580..39fc948e9 100644 --- a/app/controllers/concerns/web_app_controller_concern.rb +++ b/app/controllers/concerns/web_app_controller_concern.rb @@ -50,6 +50,13 @@ module WebAppControllerConcern return unless current_user&.require_tos_interstitial? @terms_of_service = TermsOfService.published.first + + # Handle case where terms of service have been removed from the database + if @terms_of_service.nil? + current_user.update(require_tos_interstitial: false) + return + end + render 'terms_of_service_interstitial/show', layout: 'auth' end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5a5ee0553..33d4bf6d0 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -66,7 +66,7 @@ module ApplicationHelper def provider_sign_in_link(provider) label = Devise.omniauth_configs[provider]&.strategy&.display_name.presence || I18n.t("auth.providers.#{provider}", default: provider.to_s.chomp('_oauth2').capitalize) - link_to label, omniauth_authorize_path(:user, provider), class: "button button-#{provider}", method: :post + link_to label, omniauth_authorize_path(:user, provider), class: "btn button-#{provider}", method: :post end def locale_direction diff --git a/app/helpers/context_helper.rb b/app/helpers/context_helper.rb index 33d726790..77ddee112 100644 --- a/app/helpers/context_helper.rb +++ b/app/helpers/context_helper.rb @@ -26,6 +26,12 @@ module ContextHelper suspended: { 'toot' => 'http://joinmastodon.org/ns#', 'suspended' => 'toot:suspended' }, attribution_domains: { 'toot' => 'http://joinmastodon.org/ns#', 'attributionDomains' => { '@id' => 'toot:attributionDomains', '@type' => '@id' } }, quote_requests: { 'QuoteRequest' => 'https://w3id.org/fep/044f#QuoteRequest' }, + quotes: { + 'quote' => 'https://w3id.org/fep/044f#quote', + 'quoteUri' => 'http://fedibird.com/ns#quoteUri', + '_misskey_quote' => 'https://misskey-hub.net/ns#_misskey_quote', + 'quoteAuthorization' => { '@id' => 'https://w3id.org/fep/044f#quoteAuthorization', '@type' => '@id' }, + }, interaction_policies: { 'gts' => 'https://gotosocial.org/ns#', 'interactionPolicy' => { '@id' => 'gts:interactionPolicy', '@type' => '@id' }, diff --git a/app/javascript/mastodon/api_types/accounts.ts b/app/javascript/mastodon/api_types/accounts.ts index b93054a1f..913a201fe 100644 --- a/app/javascript/mastodon/api_types/accounts.ts +++ b/app/javascript/mastodon/api_types/accounts.ts @@ -37,7 +37,7 @@ export interface BaseApiAccountJSON { roles?: ApiAccountJSON[]; statuses_count: number; uri: string; - url: string; + url?: string; username: string; moved?: ApiAccountJSON; suspended?: boolean; diff --git a/app/javascript/mastodon/components/account_bio.tsx b/app/javascript/mastodon/components/account_bio.tsx index 301ffcbb2..e0127f209 100644 --- a/app/javascript/mastodon/components/account_bio.tsx +++ b/app/javascript/mastodon/components/account_bio.tsx @@ -1,12 +1,30 @@ +import { useCallback } from 'react'; + import { useLinks } from 'mastodon/hooks/useLinks'; -export const AccountBio: React.FC<{ +interface AccountBioProps { note: string; className: string; -}> = ({ note, className }) => { - const handleClick = useLinks(); + dropdownAccountId?: string; +} - if (note.length === 0 || note === '

') { +export const AccountBio: React.FC = ({ + note, + className, + dropdownAccountId, +}) => { + const handleClick = useLinks(!!dropdownAccountId); + const handleNodeChange = useCallback( + (node: HTMLDivElement | null) => { + if (!dropdownAccountId || !node || node.childNodes.length === 0) { + return; + } + addDropdownToHashtags(node, dropdownAccountId); + }, + [dropdownAccountId], + ); + + if (note.length === 0) { return null; } @@ -15,6 +33,28 @@ export const AccountBio: React.FC<{ className={`${className} translate`} dangerouslySetInnerHTML={{ __html: note }} onClickCapture={handleClick} + ref={handleNodeChange} /> ); }; + +function addDropdownToHashtags(node: HTMLElement | null, accountId: string) { + if (!node) { + return; + } + for (const childNode of node.childNodes) { + if (!(childNode instanceof HTMLElement)) { + continue; + } + if ( + childNode instanceof HTMLAnchorElement && + (childNode.classList.contains('hashtag') || + childNode.innerText.startsWith('#')) && + !childNode.dataset.menuHashtag + ) { + childNode.dataset.menuHashtag = accountId; + } else if (childNode.childNodes.length > 0) { + addDropdownToHashtags(childNode, accountId); + } + } +} diff --git a/app/javascript/mastodon/components/dropdown_menu.tsx b/app/javascript/mastodon/components/dropdown_menu.tsx index 23d77f0dd..d9c87e93a 100644 --- a/app/javascript/mastodon/components/dropdown_menu.tsx +++ b/app/javascript/mastodon/components/dropdown_menu.tsx @@ -5,6 +5,7 @@ import { useCallback, cloneElement, Children, + useId, } from 'react'; import classNames from 'classnames'; @@ -16,6 +17,7 @@ import Overlay from 'react-overlays/Overlay'; import type { OffsetValue, UsePopperOptions, + Placement, } from 'react-overlays/esm/usePopper'; import { fetchRelationships } from 'mastodon/actions/accounts'; @@ -295,6 +297,11 @@ interface DropdownProps { title?: string; disabled?: boolean; scrollable?: boolean; + placement?: Placement; + /** + * Prevent the `ScrollableList` with this scrollKey + * from being scrolled while the dropdown is open + */ scrollKey?: string; status?: ImmutableMap; forceDropdown?: boolean; @@ -316,6 +323,7 @@ export const Dropdown = ({ title = 'Menu', disabled, scrollable, + placement = 'bottom', status, forceDropdown = false, renderItem, @@ -331,16 +339,15 @@ export const Dropdown = ({ ); const [currentId] = useState(id++); const open = currentId === openDropdownId; - const activeElement = useRef(null); - const targetRef = useRef(null); + const buttonRef = useRef(null); + const menuId = useId(); const prefetchAccountId = status ? status.getIn(['account', 'id']) : undefined; const handleClose = useCallback(() => { - if (activeElement.current) { - activeElement.current.focus({ preventScroll: true }); - activeElement.current = null; + if (buttonRef.current) { + buttonRef.current.focus({ preventScroll: true }); } dispatch( @@ -375,7 +382,7 @@ export const Dropdown = ({ [handleClose, onItemClick, items], ); - const handleClick = useCallback( + const toggleDropdown = useCallback( (e: React.MouseEvent | React.KeyboardEvent) => { const { type } = e; @@ -423,38 +430,6 @@ export const Dropdown = ({ ], ); - const handleMouseDown = useCallback(() => { - if (!open && document.activeElement instanceof HTMLElement) { - activeElement.current = document.activeElement; - } - }, [open]); - - const handleButtonKeyDown = useCallback( - (e: React.KeyboardEvent) => { - switch (e.key) { - case ' ': - case 'Enter': - handleMouseDown(); - break; - } - }, - [handleMouseDown], - ); - - const handleKeyPress = useCallback( - (e: React.KeyboardEvent) => { - switch (e.key) { - case ' ': - case 'Enter': - handleClick(e); - e.stopPropagation(); - e.preventDefault(); - break; - } - }, - [handleClick], - ); - useEffect(() => { return () => { if (currentId === openDropdownId) { @@ -465,14 +440,16 @@ export const Dropdown = ({ let button: React.ReactElement; + const buttonProps = { + disabled, + onClick: toggleDropdown, + 'aria-expanded': open, + 'aria-controls': menuId, + ref: buttonRef, + }; + if (children) { - button = cloneElement(Children.only(children), { - onClick: handleClick, - onMouseDown: handleMouseDown, - onKeyDown: handleButtonKeyDown, - onKeyPress: handleKeyPress, - ref: targetRef, - }); + button = cloneElement(Children.only(children), buttonProps); } else if (icon && iconComponent) { button = ( ({ iconComponent={iconComponent} title={title} active={open} - disabled={disabled} - onClick={handleClick} - onMouseDown={handleMouseDown} - onKeyDown={handleButtonKeyDown} - onKeyPress={handleKeyPress} - ref={targetRef} + {...buttonProps} /> ); } else { @@ -499,13 +471,13 @@ export const Dropdown = ({ {({ props, arrowProps, placement }) => ( -
+
; onMouseDown?: React.MouseEventHandler; onKeyDown?: React.KeyboardEventHandler; - onKeyPress?: React.KeyboardEventHandler; active?: boolean; expanded?: boolean; style?: React.CSSProperties; @@ -45,7 +44,6 @@ export const IconButton = forwardRef( activeStyle, onClick, onKeyDown, - onKeyPress, onMouseDown, active = false, disabled = false, @@ -85,16 +83,6 @@ export const IconButton = forwardRef( [disabled, onClick], ); - const handleKeyPress: React.KeyboardEventHandler = - useCallback( - (e) => { - if (!disabled) { - onKeyPress?.(e); - } - }, - [disabled, onKeyPress], - ); - const handleMouseDown: React.MouseEventHandler = useCallback( (e) => { @@ -161,7 +149,6 @@ export const IconButton = forwardRef( onClick={handleClick} onMouseDown={handleMouseDown} onKeyDown={handleKeyDown} - onKeyPress={handleKeyPress} // eslint-disable-line @typescript-eslint/no-deprecated style={buttonStyle} tabIndex={tabIndex} disabled={disabled} diff --git a/app/javascript/mastodon/features/account_timeline/components/account_header.tsx b/app/javascript/mastodon/features/account_timeline/components/account_header.tsx index 30433151c..b9f83beba 100644 --- a/app/javascript/mastodon/features/account_timeline/components/account_header.tsx +++ b/app/javascript/mastodon/features/account_timeline/components/account_header.tsx @@ -6,6 +6,7 @@ import classNames from 'classnames'; import { Helmet } from 'react-helmet'; import { NavLink } from 'react-router-dom'; +import { AccountBio } from '@/mastodon/components/account_bio'; import CheckIcon from '@/material-icons/400-24px/check.svg?react'; import LockIcon from '@/material-icons/400-24px/lock.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; @@ -773,7 +774,6 @@ export const AccountHeader: React.FC<{ ); } - const content = { __html: account.note_emojified }; const displayNameHtml = { __html: account.display_name_html }; const fields = account.fields; const isLocal = !account.acct.includes('@'); @@ -897,12 +897,11 @@ export const AccountHeader: React.FC<{ )} - {account.note.length > 0 && account.note !== '

' && ( -
- )} +
diff --git a/app/javascript/mastodon/features/alt_text_modal/index.tsx b/app/javascript/mastodon/features/alt_text_modal/index.tsx index 8a91e14e3..f285c3592 100644 --- a/app/javascript/mastodon/features/alt_text_modal/index.tsx +++ b/app/javascript/mastodon/features/alt_text_modal/index.tsx @@ -261,7 +261,9 @@ export const AltTextModal = forwardRef>( ); const lang = useAppSelector( (state) => - (state.compose as ImmutableMap).get('lang') as string, + (state.compose as ImmutableMap).get( + 'language', + ) as string, ); const focusX = (media?.getIn(['meta', 'focus', 'x'], 0) as number | undefined) ?? 0; diff --git a/app/javascript/mastodon/features/compose/components/search.tsx b/app/javascript/mastodon/features/compose/components/search.tsx index ae242190e..2d44772ba 100644 --- a/app/javascript/mastodon/features/compose/components/search.tsx +++ b/app/javascript/mastodon/features/compose/components/search.tsx @@ -47,10 +47,6 @@ const labelForRecentSearch = (search: RecentSearch) => { } }; -const unfocus = () => { - document.querySelector('.ui')?.parentElement?.focus(); -}; - const ClearButton: React.FC<{ onClick: () => void; hasValue: boolean; @@ -107,6 +103,11 @@ export const Search: React.FC<{ }, [initialValue]); const searchOptions: SearchOption[] = []; + const unfocus = useCallback(() => { + document.querySelector('.ui')?.parentElement?.focus(); + setExpanded(false); + }, []); + if (searchEnabled) { searchOptions.push( { @@ -282,7 +283,7 @@ export const Search: React.FC<{ history.push({ pathname: '/search', search: queryParams.toString() }); unfocus(); }, - [dispatch, history], + [dispatch, history, unfocus], ); const handleChange = useCallback( @@ -402,7 +403,7 @@ export const Search: React.FC<{ setQuickActions(newQuickActions); }, - [dispatch, history, signedIn, setValue, setQuickActions, submit], + [signedIn, dispatch, unfocus, history, submit], ); const handleClear = useCallback(() => { @@ -410,7 +411,7 @@ export const Search: React.FC<{ setQuickActions([]); setSelectedOption(-1); unfocus(); - }, [setValue, setQuickActions, setSelectedOption]); + }, [unfocus]); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { @@ -461,7 +462,7 @@ export const Search: React.FC<{ break; } }, - [navigableOptions, value, selectedOption, setSelectedOption, submit], + [unfocus, navigableOptions, selectedOption, submit, value], ); const handleFocus = useCallback(() => { @@ -481,12 +482,38 @@ export const Search: React.FC<{ }, [setExpanded, setSelectedOption, singleColumn]); const handleBlur = useCallback(() => { - setExpanded(false); setSelectedOption(-1); - }, [setExpanded, setSelectedOption]); + }, [setSelectedOption]); + + const formRef = useRef(null); + + useEffect(() => { + // If the search popover is expanded, close it when tabbing or + // clicking outside of it or the search form, while allowing + // tabbing or clicking inside of the popover + if (expanded) { + function closeOnLeave(event: FocusEvent | MouseEvent) { + const form = formRef.current; + const isClickInsideForm = + form && + (form === event.target || form.contains(event.target as Node)); + if (!isClickInsideForm) { + setExpanded(false); + } + } + document.addEventListener('focusin', closeOnLeave); + document.addEventListener('click', closeOnLeave); + + return () => { + document.removeEventListener('focusin', closeOnLeave); + document.removeEventListener('click', closeOnLeave); + }; + } + return () => null; + }, [expanded]); return ( -
+ -
+
{!hasValue && ( <>

diff --git a/app/javascript/mastodon/features/navigation_panel/components/more_link.tsx b/app/javascript/mastodon/features/navigation_panel/components/more_link.tsx index a26935eac..a3477ec4e 100644 --- a/app/javascript/mastodon/features/navigation_panel/components/more_link.tsx +++ b/app/javascript/mastodon/features/navigation_panel/components/more_link.tsx @@ -50,16 +50,22 @@ export const MoreLink: React.FC = () => { const menu = useMemo(() => { const arr: MenuItem[] = [ - { text: intl.formatMessage(messages.filters), href: '/filters' }, - { text: intl.formatMessage(messages.mutes), to: '/mutes' }, - { text: intl.formatMessage(messages.blocks), to: '/blocks' }, { - text: intl.formatMessage(messages.domainBlocks), - to: '/domain_blocks', + href: '/filters', + text: intl.formatMessage(messages.filters), + }, + { + to: '/mutes', + text: intl.formatMessage(messages.mutes), + }, + { + to: '/blocks', + text: intl.formatMessage(messages.blocks), + }, + { + to: '/domain_blocks', + text: intl.formatMessage(messages.domainBlocks), }, - ]; - - arr.push( null, { href: '/settings/privacy', @@ -77,7 +83,7 @@ export const MoreLink: React.FC = () => { href: '/settings/export', text: intl.formatMessage(messages.importExport), }, - ); + ]; if (canManageReports(permissions)) { arr.push(null, { @@ -106,7 +112,7 @@ export const MoreLink: React.FC = () => { }, [intl, dispatch, permissions]); return ( - +

); diff --git a/app/javascript/mastodon/features/notifications/components/select_with_label.tsx b/app/javascript/mastodon/features/notifications/components/select_with_label.tsx index 413267c0f..b25f8e66b 100644 --- a/app/javascript/mastodon/features/notifications/components/select_with_label.tsx +++ b/app/javascript/mastodon/features/notifications/components/select_with_label.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren } from 'react'; -import { useCallback, useState, useRef } from 'react'; +import { useCallback, useState, useRef, useId } from 'react'; import classNames from 'classnames'; @@ -16,6 +16,8 @@ interface DropdownProps { options: SelectItem[]; disabled?: boolean; onChange: (value: string) => void; + 'aria-labelledby': string; + 'aria-describedby'?: string; placement?: Placement; } @@ -24,51 +26,33 @@ const Dropdown: React.FC = ({ options, disabled, onChange, + 'aria-labelledby': ariaLabelledBy, + 'aria-describedby': ariaDescribedBy, placement: initialPlacement = 'bottom-end', }) => { - const activeElementRef = useRef(null); - const containerRef = useRef(null); + const containerRef = useRef(null); + const buttonRef = useRef(null); const [isOpen, setOpen] = useState(false); const [placement, setPlacement] = useState(initialPlacement); - - const handleToggle = useCallback(() => { - if ( - isOpen && - activeElementRef.current && - activeElementRef.current instanceof HTMLElement - ) { - activeElementRef.current.focus({ preventScroll: true }); - } - - setOpen(!isOpen); - }, [isOpen, setOpen]); - - const handleMouseDown = useCallback(() => { - if (!isOpen) activeElementRef.current = document.activeElement; - }, [isOpen]); - - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - switch (e.key) { - case ' ': - case 'Enter': - if (!isOpen) activeElementRef.current = document.activeElement; - break; - } - }, - [isOpen], - ); + const uniqueId = useId(); + const menuId = `${uniqueId}-menu`; + const buttonLabelId = `${uniqueId}-button`; const handleClose = useCallback(() => { - if ( - isOpen && - activeElementRef.current && - activeElementRef.current instanceof HTMLElement - ) - activeElementRef.current.focus({ preventScroll: true }); + if (isOpen && buttonRef.current) { + buttonRef.current.focus({ preventScroll: true }); + } setOpen(false); }, [isOpen]); + const handleToggle = useCallback(() => { + if (isOpen) { + handleClose(); + } else { + setOpen(true); + } + }, [isOpen, handleClose]); + const handleOverlayEnter = useCallback( (state: Partial) => { if (state.placement) setPlacement(state.placement); @@ -82,13 +66,18 @@ const Dropdown: React.FC = ({
@@ -101,7 +90,7 @@ const Dropdown: React.FC = ({ popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }} > {({ props, placement }) => ( -
+
@@ -123,6 +112,8 @@ const Dropdown: React.FC = ({ interface Props { value: string; options: SelectItem[]; + label: string | React.ReactElement; + hint: string | React.ReactElement; disabled?: boolean; onChange: (value: string) => void; } @@ -130,13 +121,26 @@ interface Props { export const SelectWithLabel: React.FC> = ({ value, options, + label, + hint, disabled, - children, onChange, }) => { + const uniqueId = useId(); + const labelId = `${uniqueId}-label`; + const descId = `${uniqueId}-desc`; + return ( + // This label is only used for its click-forwarding behaviour, + // accessible names are assigned manually + // eslint-disable-next-line jsx-a11y/label-has-associated-control