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

Merge upstream changes up to 9d5e10a70e
2026-03-29 03:00:33 +02:00 · 2026-03-27 08:23:17 +01:00
parent 24bc05f3a4 d75af8d188
commit d79af17e8c
404 changed files with 4859 additions and 2713 deletions
--- a/.github/actions/setup-ruby/action.yml
+++ b/.github/actions/setup-ruby/action.yml
@@ -14,7 +14,7 @@ runs:
      shell: bash
      run: |
        sudo apt-get update
-        sudo apt-get install -y libicu-dev libidn11-dev libvips42 ${{ inputs.additional-system-dependencies }}
+        sudo apt-get install --no-install-recommends -y libicu-dev libidn11-dev libvips42 ${{ inputs.additional-system-dependencies }}

    - name: Set up Ruby
      uses: ruby/setup-ruby@4eb9f110bac952a8b68ecf92e3b5c7a987594ba6 # v1
--- a/.github/workflows/test-ruby.yml
+++ b/.github/workflows/test-ruby.yml
@@ -124,7 +124,6 @@ jobs:
      fail-fast: false
      matrix:
        ruby-version:
-          - '3.2'
          - '3.3'
          - '.ruby-version'
    steps:
@@ -217,7 +216,6 @@ jobs:
      fail-fast: false
      matrix:
        ruby-version:
-          - '3.2'
          - '3.3'
          - '.ruby-version'

@@ -348,7 +346,6 @@ jobs:
      fail-fast: false
      matrix:
        ruby-version:
-          - '3.2'
          - '3.3'
          - '.ruby-version'
        search-image:
@@ -387,10 +384,3 @@ jobs:
        with:
          name: test-search-logs-${{ matrix.ruby-version }}
          path: log/
-
-      - name: Archive test screenshots
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
-        if: failure()
-        with:
-          name: test-search-screenshots
-          path: tmp/capybara/
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -8,7 +8,7 @@ AllCops:
    - lib/mastodon/migration_helpers.rb
  ExtraDetails: true
  NewCops: enable
-  TargetRubyVersion: 3.2 # Oldest supported ruby version
+  TargetRubyVersion: 3.3 # Oldest supported ruby version

 inherit_from:
  - .rubocop/layout.yml
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -137,11 +137,7 @@ const preview: Preview = {
      }, [currentLocale, currentLocaleData]);

      return (
-        <IntlProvider
-          locale={currentLocale}
-          messages={currentLocaleData}
-          textComponent='span'
-        >
+        <IntlProvider locale={currentLocale} messages={currentLocaleData}>
          <Story />
        </IntlProvider>
      );
--- a/2
+++ b/2
@@ -1,7 +1,7 @@
 # frozen_string_literal: true

 source 'https://rubygems.org'
-ruby '>= 3.2.0', '< 3.5.0'
+ruby '>= 3.3.0', '< 3.5.0'

 gem 'propshaft'
 gem 'puma', '~> 7.0'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -12,29 +12,29 @@ GEM
  specs:
    action_text-trix (2.1.17)
      railties
-    actioncable (8.1.2.1)
-      actionpack (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    actioncable (8.1.3)
+      actionpack (= 8.1.3)
+      activesupport (= 8.1.3)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
      zeitwerk (~> 2.6)
-    actionmailbox (8.1.2.1)
-      actionpack (= 8.1.2.1)
-      activejob (= 8.1.2.1)
-      activerecord (= 8.1.2.1)
-      activestorage (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    actionmailbox (8.1.3)
+      actionpack (= 8.1.3)
+      activejob (= 8.1.3)
+      activerecord (= 8.1.3)
+      activestorage (= 8.1.3)
+      activesupport (= 8.1.3)
      mail (>= 2.8.0)
-    actionmailer (8.1.2.1)
-      actionpack (= 8.1.2.1)
-      actionview (= 8.1.2.1)
-      activejob (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    actionmailer (8.1.3)
+      actionpack (= 8.1.3)
+      actionview (= 8.1.3)
+      activejob (= 8.1.3)
+      activesupport (= 8.1.3)
      mail (>= 2.8.0)
      rails-dom-testing (~> 2.2)
-    actionpack (8.1.2.1)
-      actionview (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    actionpack (8.1.3)
+      actionview (= 8.1.3)
+      activesupport (= 8.1.3)
      nokogiri (>= 1.8.5)
      rack (>= 2.2.4)
      rack-session (>= 1.0.1)
@@ -42,16 +42,16 @@ GEM
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
      useragent (~> 0.16)
-    actiontext (8.1.2.1)
+    actiontext (8.1.3)
      action_text-trix (~> 2.1.15)
-      actionpack (= 8.1.2.1)
-      activerecord (= 8.1.2.1)
-      activestorage (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+      actionpack (= 8.1.3)
+      activerecord (= 8.1.3)
+      activestorage (= 8.1.3)
+      activesupport (= 8.1.3)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (8.1.2.1)
-      activesupport (= 8.1.2.1)
+    actionview (8.1.3)
+      activesupport (= 8.1.3)
      builder (~> 3.1)
      erubi (~> 1.11)
      rails-dom-testing (~> 2.2)
@@ -61,22 +61,22 @@ GEM
      activemodel (>= 4.1)
      case_transform (>= 0.2)
      jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
-    activejob (8.1.2.1)
-      activesupport (= 8.1.2.1)
+    activejob (8.1.3)
+      activesupport (= 8.1.3)
      globalid (>= 0.3.6)
-    activemodel (8.1.2.1)
-      activesupport (= 8.1.2.1)
-    activerecord (8.1.2.1)
-      activemodel (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    activemodel (8.1.3)
+      activesupport (= 8.1.3)
+    activerecord (8.1.3)
+      activemodel (= 8.1.3)
+      activesupport (= 8.1.3)
      timeout (>= 0.4.0)
-    activestorage (8.1.2.1)
-      actionpack (= 8.1.2.1)
-      activejob (= 8.1.2.1)
-      activerecord (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    activestorage (8.1.3)
+      actionpack (= 8.1.3)
+      activejob (= 8.1.3)
+      activerecord (= 8.1.3)
+      activesupport (= 8.1.3)
      marcel (~> 1.0)
-    activesupport (8.1.2.1)
+    activesupport (8.1.3)
      base64
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.3.1)
@@ -354,7 +354,7 @@ GEM
      azure-blob (~> 0.5.2)
      hashie (~> 5.0)
    jmespath (1.6.2)
-    json (2.19.2)
+    json (2.19.3)
    json-canonicalization (1.0.0)
    json-jwt (1.17.0)
      activesupport (>= 4.2)
@@ -657,20 +657,20 @@ GEM
      rack (>= 1.3)
    rackup (2.3.1)
      rack (>= 3)
-    rails (8.1.2.1)
-      actioncable (= 8.1.2.1)
-      actionmailbox (= 8.1.2.1)
-      actionmailer (= 8.1.2.1)
-      actionpack (= 8.1.2.1)
-      actiontext (= 8.1.2.1)
-      actionview (= 8.1.2.1)
-      activejob (= 8.1.2.1)
-      activemodel (= 8.1.2.1)
-      activerecord (= 8.1.2.1)
-      activestorage (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    rails (8.1.3)
+      actioncable (= 8.1.3)
+      actionmailbox (= 8.1.3)
+      actionmailer (= 8.1.3)
+      actionpack (= 8.1.3)
+      actiontext (= 8.1.3)
+      actionview (= 8.1.3)
+      activejob (= 8.1.3)
+      activemodel (= 8.1.3)
+      activerecord (= 8.1.3)
+      activestorage (= 8.1.3)
+      activesupport (= 8.1.3)
      bundler (>= 1.15.0)
-      railties (= 8.1.2.1)
+      railties (= 8.1.3)
    rails-dom-testing (2.3.0)
      activesupport (>= 5.0.0)
      minitest
@@ -681,9 +681,9 @@ GEM
    rails-i18n (8.1.0)
      i18n (>= 0.7, < 2)
      railties (>= 8.0.0, < 9)
-    railties (8.1.2.1)
-      actionpack (= 8.1.2.1)
-      activesupport (= 8.1.2.1)
+    railties (8.1.3)
+      actionpack (= 8.1.3)
+      activesupport (= 8.1.3)
      irb (~> 1.13)
      rackup (>= 1.0.0)
      rake (>= 12.2)
--- a/README.md
+++ b/README.md
@@ -72,7 +72,7 @@ Mastodon is a **free, open-source social network server** based on [ActivityPub]

 ### Requirements

- **Ruby** 3.2+
+- **Ruby** 3.3+
 - **PostgreSQL** 14+
 - **Redis** 7.0+
 - **Node.js** 20+
--- a/app/controllers/api/v1/accounts/email_subscriptions_controller.rb
+++ b/app/controllers/api/v1/accounts/email_subscriptions_controller.rb
@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Api::V1::Accounts::EmailSubscriptionsController < Api::BaseController
+  before_action :set_account
+  before_action :require_feature_enabled!
+  before_action :require_account_permissions!
+
+  def create
+    @account.email_subscriptions.create!(email: params[:email], locale: I18n.locale)
+    render_empty
+  end
+
+  private
+
+  def set_account
+    @account = Account.local.find(params[:account_id])
+  end
+
+  def require_feature_enabled!
+    head 404 unless Mastodon::Feature.email_subscriptions_enabled?
+  end
+
+  def require_account_permissions!
+    head 404 if @account.unavailable? || !@account.user_can?(:manage_email_subscriptions) || !@account.user_email_subscriptions_enabled?
+  end
+end
--- a/app/controllers/api/v1/instances/terms_of_service_controller.rb
+++ b/app/controllers/api/v1/instances/terms_of_service_controller.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Api::V1::Instances::TermsOfServiceController < Api::V1::Instances::BaseController
+  before_action :cache_even_if_authenticated!
+
+  def index
+    @terms_of_service = TermsOfService.current || raise(ActiveRecord::RecordNotFound)
+    render json: @terms_of_service, serializer: REST::TermsOfServiceSerializer
+  end
+
+  def show
+    @terms_of_service = TermsOfService.published.find_by!(effective_date: params[:date])
+    render json: @terms_of_service, serializer: REST::TermsOfServiceSerializer
+  end
+end
--- a/app/controllers/api/v1/instances/terms_of_services_controller.rb
+++ b/app/controllers/api/v1/instances/terms_of_services_controller.rb
@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Instances::TermsOfServicesController < Api::V1::Instances::BaseController
-  before_action :set_terms_of_service
-
-  def show
-    cache_even_if_authenticated!
-    render json: @terms_of_service, serializer: REST::TermsOfServiceSerializer
-  end
-
-  private
-
-  def set_terms_of_service
-    @terms_of_service = begin
-      if params[:date].present?
-        TermsOfService.published.find_by!(effective_date: params[:date])
-      else
-        TermsOfService.current
-      end
-    end
-    not_found if @terms_of_service.nil?
-  end
-end
--- a/app/controllers/concerns/signature_verification.rb
+++ b/app/controllers/concerns/signature_verification.rb
@@ -53,19 +53,21 @@ module SignatureVerification

    raise Mastodon::SignatureVerificationError, 'Request not signed' unless signed_request?

-    actor = actor_from_key_id
+    keypair = keypair_from_key_id

-    raise Mastodon::SignatureVerificationError, "Public key not found for key #{signature_key_id}" if actor.nil?
+    raise Mastodon::SignatureVerificationError, "Public key not found for key #{signature_key_id}" if keypair.nil?

-    return (@signed_request_actor = actor) if signed_request.verified?(actor)
+    check_keypair_validity!(keypair)
+    return (@signed_request_actor = keypair.actor) if signed_request.verified?(keypair)

-    actor = stoplight_wrapper.run { actor_refresh_key!(actor) }
+    keypair = stoplight_wrapper.run { keypair_refresh_key!(keypair) }

-    raise Mastodon::SignatureVerificationError, "Could not refresh public key #{signature_key_id}" if actor.nil?
+    raise Mastodon::SignatureVerificationError, "Could not refresh public key #{signature_key_id}" if keypair.nil?

-    return (@signed_request_actor = actor) if signed_request.verified?(actor)
+    check_keypair_validity!(keypair)
+    return (@signed_request_actor = keypair.actor) if signed_request.verified?(keypair)

-    fail_with! "Verification failed for #{actor.to_log_human_identifier} #{actor.uri}"
+    fail_with! "Verification failed for #{keypair.actor.to_log_human_identifier} #{keypair.actor.uri} #{keypair.uri}"
  rescue Mastodon::MalformedHeaderError => e
    @signature_verification_failure_code = 400
    fail_with! e.message
@@ -89,7 +91,7 @@ module SignatureVerification
    @signed_request_actor = nil
  end

-  def actor_from_key_id
+  def keypair_from_key_id
    key_id = signed_request.key_id
    domain = key_id.start_with?('acct:') ? key_id.split('@').last : key_id

@@ -101,9 +103,10 @@ module SignatureVerification
    if key_id.start_with?('acct:')
      stoplight_wrapper.run { ResolveAccountService.new.call(key_id.delete_prefix('acct:'), suppress_errors: false) }
    elsif !ActivityPub::TagManager.instance.local_uri?(key_id)
-      account   = ActivityPub::TagManager.instance.uri_to_actor(key_id)
-      account ||= stoplight_wrapper.run { ActivityPub::FetchRemoteKeyService.new.call(key_id, suppress_errors: false) }
-      account
+      keypair = Keypair.from_keyid(key_id)
+      return keypair if keypair.present?
+
+      stoplight_wrapper.run { ActivityPub::FetchRemoteKeyService.new.call(key_id, suppress_errors: false) }
    end
  rescue Mastodon::PrivateNetworkAddressError => e
    raise Mastodon::SignatureVerificationError, "Requests to private network addresses are disallowed (tried to query #{e.host})"
@@ -120,14 +123,20 @@ module SignatureVerification
    )
  end

-  def actor_refresh_key!(actor)
-    return if actor.local? || !actor.activitypub?
-    return actor.refresh! if actor.respond_to?(:refresh!) && actor.possibly_stale?
+  def keypair_refresh_key!(keypair)
+    # TODO: this currently only is concerned with refreshing the actor and returning the legacy key, this needs to be reworked
+    return if keypair.actor.local? || !keypair.actor.activitypub?
+    return keypair.actor.refresh! if keypair.actor.respond_to?(:refresh!) && keypair.actor.possibly_stale?

-    ActivityPub::FetchRemoteActorService.new.call(actor.uri, only_key: true, suppress_errors: false)
+    Keypair.from_legacy_account(ActivityPub::FetchRemoteActorService.new.call(keypair.actor.uri, only_key: true, suppress_errors: false))
  rescue Mastodon::PrivateNetworkAddressError => e
    raise Mastodon::SignatureVerificationError, "Requests to private network addresses are disallowed (tried to query #{e.host})"
  rescue Mastodon::HostValidationError, ActivityPub::FetchRemoteActorService::Error, Webfinger::Error => e
    raise Mastodon::SignatureVerificationError, e.message
  end
+
+  def check_keypair_validity!(keypair)
+    raise Mastodon::SignatureVerification, "Key #{signature_key_id} is revoked" if keypair.revoked?
+    raise Mastodon::SignatureVerification, "Key #{signature_key_id} has expired" if keypair.expired?
+  end
 end
--- a/app/controllers/email_subscriptions/confirmations_controller.rb
+++ b/app/controllers/email_subscriptions/confirmations_controller.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class EmailSubscriptions::ConfirmationsController < ApplicationController
+  layout 'auth'
+
+  before_action :set_email_subscription
+
+  def show
+    @email_subscription.confirm! unless @email_subscription.confirmed?
+  end
+
+  private
+
+  def set_email_subscription
+    @email_subscription = EmailSubscription.find_by!(confirmation_token: params[:confirmation_token])
+  end
+end
--- a/app/controllers/mail_subscriptions_controller.rb
+++ b/app/controllers/mail_subscriptions_controller.rb
@@ -1,39 +0,0 @@
-# frozen_string_literal: true
-
-class MailSubscriptionsController < ApplicationController
-  layout 'auth'
-
-  skip_before_action :require_functional!
-
-  before_action :set_user
-  before_action :set_type
-
-  protect_from_forgery with: :null_session
-
-  def show; end
-
-  def create
-    @user.settings[email_type_from_param] = false
-    @user.save!
-  end
-
-  private
-
-  def set_user
-    @user = GlobalID::Locator.locate_signed(params[:token], for: 'unsubscribe')
-    not_found unless @user
-  end
-
-  def set_type
-    @type = email_type_from_param
-  end
-
-  def email_type_from_param
-    case params[:type]
-    when 'follow', 'reblog', 'favourite', 'mention', 'follow_request'
-      "notification_emails.#{params[:type]}"
-    else
-      not_found
-    end
-  end
-end
--- a/app/controllers/settings/privacy_controller.rb
+++ b/app/controllers/settings/privacy_controller.rb
@@ -2,6 +2,7 @@

 class Settings::PrivacyController < Settings::BaseController
  before_action :set_account
+  before_action :set_email_subscriptions_count

  def show; end

@@ -24,4 +25,8 @@ class Settings::PrivacyController < Settings::BaseController
  def set_account
    @account = current_account
  end
+
+  def set_email_subscriptions_count
+    @email_subscriptions_count = with_read_replica { @account.email_subscriptions.confirmed.count }
+  end
 end
--- a/app/controllers/unsubscriptions_controller.rb
+++ b/app/controllers/unsubscriptions_controller.rb
@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class UnsubscriptionsController < ApplicationController
+  layout 'auth'
+
+  skip_before_action :require_functional!
+
+  before_action :set_recipient
+  before_action :set_type
+  before_action :set_scope
+  before_action :require_type_if_user!
+
+  protect_from_forgery with: :null_session
+
+  def show; end
+
+  def create
+    case @scope
+    when :user
+      @recipient.settings[@type] = false
+      @recipient.save!
+    when :email_subscription
+      @recipient.destroy!
+    end
+  end
+
+  private
+
+  def set_recipient
+    @recipient = GlobalID::Locator.locate_signed(params[:token], for: 'unsubscribe')
+    not_found unless @recipient
+  end
+
+  def set_scope
+    if @recipient.is_a?(User)
+      @scope = :user
+    elsif @recipient.is_a?(EmailSubscription)
+      @scope = :email_subscription
+    else
+      not_found
+    end
+  end
+
+  def set_type
+    @type = email_type_from_param
+  end
+
+  def require_type_if_user!
+    not_found if @recipient.is_a?(User) && @type.blank?
+  end
+
+  def email_type_from_param
+    case params[:type]
+    when 'follow', 'reblog', 'favourite', 'mention', 'follow_request'
+      "notification_emails.#{params[:type]}"
+    end
+  end
+end
--- a/app/controllers/well_known/webfinger_controller.rb
+++ b/app/controllers/well_known/webfinger_controller.rb
@@ -18,23 +18,7 @@ module WellKnown
    private

    def set_account
-      username = username_from_resource
-
-      @account = begin
-        if username == Rails.configuration.x.local_domain || username == Rails.configuration.x.web_domain
-          Account.representative
-        else
-          Account.find_local!(username)
-        end
-      end
-    end
-
-    def username_from_resource
-      resource_user    = resource_param
-      username, domain = resource_user.split('@')
-      resource_user    = "#{username}@#{Rails.configuration.x.local_domain}" if Rails.configuration.x.alternate_domains.include?(domain)
-
-      WebfingerResource.new(resource_user).username
+      @account = WebfingerResource.new(resource_param).account
    end

    def resource_param
--- a/app/helpers/context_helper.rb
+++ b/app/helpers/context_helper.rb
@@ -4,6 +4,7 @@ module ContextHelper
  NAMED_CONTEXT_MAP = {
    activitystreams: 'https://www.w3.org/ns/activitystreams',
    security: 'https://w3id.org/security/v1',
+    webfinger: 'https://purl.archive.org/socialweb/webfinger',
  }.freeze

  CONTEXT_EXTENSION_MAP = {
--- a/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx
+++ b/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx
@@ -1,12 +1,14 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { injectIntl, defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import classNames from 'classnames';

 import api from 'flavours/glitch/api';

+import { injectIntl } from '../intl';
+
 const messages = defineMessages({
  legal: { id: 'report.categories.legal', defaultMessage: 'Legal' },
  other: { id: 'report.categories.other', defaultMessage: 'Other' },
--- a/app/javascript/flavours/glitch/components/alt_text_badge/index.tsx
+++ b/app/javascript/flavours/glitch/components/alt_text_badge/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useId } from 'react';

-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';

 import type {
  OffsetValue,
@@ -8,24 +8,37 @@ import type {
 } from 'react-overlays/esm/usePopper';
 import Overlay from 'react-overlays/Overlay';

+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { useSelectableClick } from 'flavours/glitch/hooks/useSelectableClick';

+import { IconButton } from '../icon_button';
+
+import classes from './styles.module.scss';
+
 const offset = [0, 4] as OffsetValue;
 const popperConfig = { strategy: 'fixed' } as UsePopperOptions;

 export const AltTextBadge: React.FC<{ description: string }> = ({
  description,
 }) => {
-  const accessibilityId = useId();
-  const anchorRef = useRef<HTMLButtonElement>(null);
+  const intl = useIntl();
+  const uniqueId = useId();
+  const popoverId = `${uniqueId}-popover`;
+  const titleId = `${uniqueId}-title`;
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  const handleClick = useCallback(() => {
    setOpen((v) => !v);
+    setTimeout(() => {
+      popoverRef.current?.focus();
+    }, 0);
  }, [setOpen]);

  const handleClose = useCallback(() => {
    setOpen(false);
+    buttonRef.current?.focus();
  }, [setOpen]);

  const [handleMouseDown, handleMouseUp] = useSelectableClick(handleClose);
@@ -34,11 +47,12 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
    <>
      <button
        type='button'
-        ref={anchorRef}
+        ref={buttonRef}
        className='media-gallery__alt__label'
        onClick={handleClick}
        aria-expanded={open}
-        aria-controls={accessibilityId}
+        aria-controls={popoverId}
+        aria-haspopup='dialog'
      >
        ALT
      </button>
@@ -47,7 +61,7 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
        rootClose
        onHide={handleClose}
        show={open}
-        target={anchorRef}
+        target={buttonRef}
        placement='top-end'
        flip
        offset={offset}
@@ -57,17 +71,33 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
          <div {...props} className='hover-card-controller'>
            <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
              className='info-tooltip dropdown-animation'
-              role='region'
-              id={accessibilityId}
+              role='dialog'
+              aria-labelledby={titleId}
+              ref={popoverRef}
+              id={popoverId}
              onMouseDown={handleMouseDown}
              onMouseUp={handleMouseUp}
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+              tabIndex={0}
            >
-              <h4>
+              <h4 id={titleId}>
                <FormattedMessage
                  id='alt_text_badge.title'
                  defaultMessage='Alt text'
                />
              </h4>
+
+              <IconButton
+                title={intl.formatMessage({
+                  id: 'lightbox.close',
+                  defaultMessage: 'Close',
+                })}
+                icon='close'
+                iconComponent={CloseIcon}
+                onClick={handleClose}
+                className={classes.closeButton}
+              />
+
              <p>{description}</p>
            </div>
          </div>
--- a/app/javascript/flavours/glitch/components/alt_text_badge/styles.module.scss
+++ b/app/javascript/flavours/glitch/components/alt_text_badge/styles.module.scss
@@ -0,0 +1,17 @@
+.closeButton {
+  position: absolute;
+  top: 5px;
+  inset-inline-end: 2px;
+  padding: 10px;
+
+  --default-icon-color: var(--color-text-on-media);
+  --default-bg-color: transparent;
+  --hover-icon-color: var(--color-text-on-media);
+  --hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%);
+  --focus-outline-color: var(--color-text-on-media);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
--- a/app/javascript/flavours/glitch/components/avatar.tsx
+++ b/app/javascript/flavours/glitch/components/avatar.tsx
@@ -96,7 +96,7 @@ export const Avatar: React.FC<Props> = ({
 };

 export const AvatarById: React.FC<
-  { accountId: string } & Omit<Props, 'account'>
+  { accountId: string | undefined } & Omit<Props, 'account'>
 > = ({ accountId, ...otherProps }) => {
  const account = useAccount(accountId);
  return <Avatar account={account} {...otherProps} />;
--- a/app/javascript/flavours/glitch/components/badge.tsx
+++ b/app/javascript/flavours/glitch/components/badge.tsx
@@ -31,7 +31,7 @@ export const Badge: FC<BadgeProps> = ({
    data-account-role-id={roleId}
  >
    {icon}
-    {label}
+    <span>{label}</span>
    {domain && <span className='account-role__domain'>{domain}</span>}
  </div>
 );
--- a/app/javascript/flavours/glitch/components/callout/styles.module.css
+++ b/app/javascript/flavours/glitch/components/callout/styles.module.css
@@ -3,7 +3,7 @@
  align-items: start;
  padding: 12px;
  gap: 8px;
-  background-color: var(--color-bg-brand-softer);
+  background-color: var(--color-bg-brand-softest);
  color: var(--color-text-primary);
  border-radius: 12px;
 }
@@ -86,11 +86,11 @@
 }

 .variantSubtle {
-  border: 1px solid var(--color-bg-brand-softer);
+  border: 1px solid var(--color-bg-brand-softest);
  background-color: var(--color-bg-primary);

  .icon {
-    background-color: var(--color-bg-brand-softer);
+    background-color: var(--color-bg-brand-softest);
  }
 }

@@ -105,11 +105,11 @@

 .variantInverted {
  background-color: var(--color-bg-inverted);
-  color: var(--color-text-on-inverted);
+  color: var(--color-text-inverted);
 }

 .variantSuccess {
-  background-color: var(--color-bg-success-softer);
+  background-color: var(--color-bg-success-softest);

  .icon {
    background-color: var(--color-bg-success-soft);
@@ -117,7 +117,7 @@
 }

 .variantWarning {
-  background-color: var(--color-bg-warning-softer);
+  background-color: var(--color-bg-warning-softest);

  .icon {
    background-color: var(--color-bg-warning-soft);
@@ -125,7 +125,7 @@
 }

 .variantError {
-  background-color: var(--color-bg-error-softer);
+  background-color: var(--color-bg-error-softest);

  .icon {
    background-color: var(--color-bg-error-soft);
--- a/app/javascript/flavours/glitch/components/display_name/default.tsx
+++ b/app/javascript/flavours/glitch/components/display_name/default.tsx
@@ -6,10 +6,11 @@ import { Skeleton } from '../skeleton';
 import type { DisplayNameProps } from './index';
 import { DisplayNameWithoutDomain } from './no-domain';

-export const DisplayNameDefault: FC<
-  Omit<DisplayNameProps, 'variant'> & ComponentPropsWithoutRef<'span'>
-> = ({ account, localDomain, className, ...props }) => {
-  const username = useMemo(() => {
+export function useAccountHandle(
+  account: DisplayNameProps['account'],
+  localDomain: DisplayNameProps['localDomain'],
+) {
+  return useMemo(() => {
    if (!account) {
      return null;
    }
@@ -20,6 +21,12 @@ export const DisplayNameDefault: FC<
    }
    return `@${acct}`;
  }, [account, localDomain]);
+}
+
+export const DisplayNameDefault: FC<
+  Omit<DisplayNameProps, 'variant'> & ComponentPropsWithoutRef<'span'>
+> = ({ account, localDomain, className, ...props }) => {
+  const username = useAccountHandle(account, localDomain);

  return (
    <DisplayNameWithoutDomain
--- a/app/javascript/flavours/glitch/components/form_fields/select.module.scss
+++ b/app/javascript/flavours/glitch/components/form_fields/select.module.scss
@@ -61,6 +61,6 @@
  }

  [data-has-error='true'] & {
-    border-color: var(--color-text-error);
+    border-color: var(--color-border-error);
  }
 }
--- a/app/javascript/flavours/glitch/components/form_fields/text_input.module.scss
+++ b/app/javascript/flavours/glitch/components/form_fields/text_input.module.scss
@@ -32,11 +32,11 @@
  &:focus:user-invalid,
  &:required:user-invalid,
  [data-has-error='true'] & {
-    outline-color: var(--color-text-error);
+    outline-color: var(--color-border-error);
  }

  &:focus {
-    outline-color: var(--color-text-brand);
+    outline-color: var(--color-border-brand);
  }

  &:required:user-valid {
--- a/app/javascript/flavours/glitch/components/intl.tsx
+++ b/app/javascript/flavours/glitch/components/intl.tsx
@@ -0,0 +1,26 @@
+import type { ComponentClass } from 'react';
+
+import { useIntl } from 'react-intl';
+
+interface IntlHocProps<TProps extends Record<string, unknown>> {
+  component: ComponentClass<TProps>;
+  props: TProps;
+}
+
+export const IntlHoc = <TProps extends Record<string, unknown>>({
+  component: Component,
+  props,
+}: IntlHocProps<TProps>) => {
+  const intl = useIntl();
+  return <Component {...props} intl={intl} />;
+};
+
+export const injectIntl = <TProps extends Record<string, unknown>>(
+  Component: ComponentClass<TProps>,
+) => {
+  const WrappedComponent = (props: Omit<TProps, 'intl'>) => (
+    <IntlHoc component={Component} props={props as TProps} />
+  );
+  WrappedComponent.displayName = `injectIntl(${(Component.displayName ?? Component.name) || 'Component'})`;
+  return WrappedComponent;
+};
--- a/app/javascript/flavours/glitch/components/more_from_author.tsx
+++ b/app/javascript/flavours/glitch/components/more_from_author.tsx
@@ -6,16 +6,12 @@ import { AuthorLink } from 'flavours/glitch/features/explore/components/author_l
 export const MoreFromAuthor: React.FC<{ accountId: string }> = ({
  accountId,
 }) => (
+  <div className='more-from-author'>
+    <IconLogo />
    <FormattedMessage
      id='link_preview.more_from_author'
      defaultMessage='More from {name}'
      values={{ name: <AuthorLink accountId={accountId} /> }}
-  >
-    {(chunks) => (
-      <div className='more-from-author'>
-        <IconLogo />
-        {chunks}
+    />
  </div>
-    )}
-  </FormattedMessage>
 );
--- a/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx
+++ b/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx
@@ -6,6 +6,7 @@ export const NotSignedInIndicator: React.FC = () => (
      <FormattedMessage
        id='not_signed_in_indicator.not_signed_in'
        defaultMessage='You need to login to access this resource.'
+        tagName='span'
      />
    </div>
  </div>
--- a/app/javascript/flavours/glitch/components/regeneration_indicator.tsx
+++ b/app/javascript/flavours/glitch/components/regeneration_indicator.tsx
@@ -20,6 +20,7 @@ export const RegenerationIndicator: React.FC = () => (
      <FormattedMessage
        id='regeneration_indicator.please_stand_by'
        defaultMessage='Please stand by.'
+        tagName='span'
      />
    </div>
  </div>
--- a/app/javascript/flavours/glitch/components/scrollable_list/components.tsx
+++ b/app/javascript/flavours/glitch/components/scrollable_list/components.tsx
@@ -37,7 +37,11 @@ export const ItemList = forwardRef<
  }
 >(({ isLoading, emptyMessage, className, children, ...otherProps }, ref) => {
  if (!isLoading && Children.count(children) === 0 && emptyMessage) {
-    return <div className='empty-column-indicator'>{emptyMessage}</div>;
+    return (
+      <div className='empty-column-indicator'>
+        <span>{emptyMessage}</span>
+      </div>
+    );
  }

  return (
--- a/app/javascript/flavours/glitch/components/scrollable_list/index.jsx
+++ b/app/javascript/flavours/glitch/components/scrollable_list/index.jsx
@@ -385,7 +385,7 @@ class ScrollableList extends PureComponent {
          {alwaysPrepend && prepend}

          <div className='empty-column-indicator'>
-            {emptyMessage}
+            <span>{emptyMessage}</span>
          </div>

          {footer}
--- a/app/javascript/flavours/glitch/components/server_banner.jsx
+++ b/app/javascript/flavours/glitch/components/server_banner.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl';

 import { Link } from 'react-router-dom';

@@ -14,6 +14,8 @@ import { ShortNumber } from 'flavours/glitch/components/short_number';
 import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { domain } from 'flavours/glitch/initial_state';

+import { injectIntl } from './intl';
+
 const messages = defineMessages({
  aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
 });
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import classNames from 'classnames';

@@ -21,6 +21,7 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components
 import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
 import { displayMedia } from '../initial_state';

+import { injectIntl } from './intl';
 import AttachmentList from './attachment_list';
 import { StatusHeader } from './status/header'
 import { getHashtagBarForStatus } from './hashtag_bar';
--- a/app/javascript/flavours/glitch/components/status_action_bar/index.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import { withRouter } from 'react-router-dom';

@@ -25,11 +25,13 @@ import { Dropdown } from 'flavours/glitch/components/dropdown_menu';
 import { me, quickBoosting } from '../../initial_state';

 import { IconButton } from '../icon_button';
+import { injectIntl } from '../intl';
 import { RelativeTimestamp } from '../relative_timestamp';
 import { BoostButton } from '../status/boost_button';
 import { RemoveQuoteHint } from './remove_quote_hint';
 import { quoteItemState, selectStatusState } from '../status/boost_button_utils';

+
 const messages = defineMessages({
  delete: { id: 'status.delete', defaultMessage: 'Delete' },
  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';

 import classnames from 'classnames';
 import { withRouter } from 'react-router-dom';
@@ -16,6 +16,7 @@ import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity
 import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';

 import { EmojiHTML } from './emoji/html';
+import { injectIntl } from './intl';
 import { HandledLink } from './status/handled_link';

 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
--- a/app/javascript/flavours/glitch/components/status_icons.jsx
+++ b/app/javascript/flavours/glitch/components/status_icons.jsx
@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

@@ -11,6 +11,7 @@ import HomeIcon from '@/material-icons/400-24px/home.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
 import { MediaIcon } from 'flavours/glitch/components/media_icon';
 import { languages } from 'flavours/glitch/initial_state';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { VisibilityIcon } from './visibility_icon';

--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@@ -161,7 +161,9 @@ export default class StatusPrepend extends PureComponent {
            icon={iconComponent}
          />
        </div>
+        <span>
          <Message />
+        </span>
        {children}
      </aside>
    );
--- a/app/javascript/flavours/glitch/components/status_quoted.tsx
+++ b/app/javascript/flavours/glitch/components/status_quoted.tsx
@@ -336,7 +336,6 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({

  return (
    <div className='status__quote'>
-      {/* @ts-expect-error Status is not yet typed */}
      <StatusContainer
        isQuotedPost
        id={quotedStatusId}
--- a/app/javascript/flavours/glitch/components/status_thread_label.tsx
+++ b/app/javascript/flavours/glitch/components/status_thread_label.tsx
@@ -51,7 +51,7 @@ export const StatusThreadLabel: React.FC<{
      <div className='status__prepend__icon'>
        <Icon id='reply' icon={ReplyIcon} />
      </div>
-      {label}
+      <span>{label}</span>
    </div>
  );
 };
--- a/app/javascript/flavours/glitch/components/tags/style.module.css
+++ b/app/javascript/flavours/glitch/components/tags/style.module.css
@@ -22,8 +22,8 @@ button.tag:focus-visible {
 }

 .active {
-  border-color: var(--color-text-brand);
-  background: var(--color-bg-brand-softer);
+  border-color: var(--color-border-brand);
+  background: var(--color-bg-brand-softest);
  color: var(--color-text-brand);
 }

--- a/app/javascript/flavours/glitch/features/about/index.jsx
+++ b/app/javascript/flavours/glitch/features/about/index.jsx
@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';

+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';
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.tsx
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.tsx
@@ -63,7 +63,11 @@ export const ActionBar: React.FC<{ account: Account }> = ({ account }) => {
            className='account__action-bar__tab'
            to={`/@${account.get('acct')}`}
          >
-            <FormattedMessage id='account.posts' defaultMessage='Posts' />
+            <FormattedMessage
+              id='account.posts'
+              defaultMessage='Posts'
+              tagName='span'
+            />
            <strong>
              <FormattedNumber value={account.get('statuses_count')} />
            </strong>
@@ -75,7 +79,11 @@ export const ActionBar: React.FC<{ account: Account }> = ({ account }) => {
            className='account__action-bar__tab'
            to={`/@${account.get('acct')}/following`}
          >
-            <FormattedMessage id='account.follows' defaultMessage='Follows' />
+            <FormattedMessage
+              id='account.follows'
+              defaultMessage='Follows'
+              tagName='span'
+            />
            <strong>
              <FormattedNumber value={account.get('following_count')} />
            </strong>
@@ -90,6 +98,7 @@ export const ActionBar: React.FC<{ account: Account }> = ({ account }) => {
            <FormattedMessage
              id='account.followers'
              defaultMessage='Followers'
+              tagName='span'
            />
            <strong>
              {account.get('followers_count') < 0 ? (
--- a/app/javascript/flavours/glitch/features/account_edit/modals/image_alt.tsx
+++ b/app/javascript/flavours/glitch/features/account_edit/modals/image_alt.tsx
@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';

 import { FormattedMessage } from 'react-intl';

+import { CharacterCounter } from '@/flavours/glitch/components/character_counter';
 import { Details } from '@/flavours/glitch/components/details';
 import { TextAreaField } from '@/flavours/glitch/components/form_fields';
 import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
@@ -84,7 +85,12 @@ export const ImageAltTextField: FC<{
  const altLimit = useAppSelector(
    (state) =>
      state.server.getIn(
-        ['server', 'configuration', 'media_attachments', 'description_limit'],
+        [
+          'server',
+          'configuration',
+          'accounts',
+          'max_header_description_length',
+        ],
        150,
      ) as number,
  );
@@ -100,6 +106,7 @@ export const ImageAltTextField: FC<{
    <>
      <img src={imageSrc} alt='' className={classes.altImage} />

+      <div>
        <TextAreaField
          label={
            <FormattedMessage
@@ -117,6 +124,8 @@ export const ImageAltTextField: FC<{
          value={altText}
          maxLength={altLimit}
        />
+        <CharacterCounter currentString={altText} maxLength={altLimit} />
+      </div>

      {!hideTip && (
        <Details
@@ -130,7 +139,7 @@ export const ImageAltTextField: FC<{
        >
          <FormattedMessage
            id='account_edit.image_alt_modal.details_content'
-            defaultMessage='DO: <ul> <li>Describe yourself as pictured</li> <li>Use third person language (e.g. “Alex” instead of “me”)</li> <li>Be succinct – a few words is often enough</li> </ul> DON’T: <ul> <li>Start with “Photo of” – it’s redundant for screen readers</li> </ul> EXAMPLE: <ul> <li>“Alex wearing a green shirt and glasses”</li> </ul>'
+            defaultMessage='DO: <ul> <li>Describe yourself as pictured</li> <li>Use third person language (e.g. “Alex” instead of “me”)</li> <li>Be succinct – a few words is often enough</li> </ul> DON’T: <ul> <li>Start with “Photo of” – it’s redundant for screen readers</li> </ul> EXAMPLE: <ul> <li>“Alex wearing a green shirt and glasses”</li></ul>'
            values={{
              ul: (chunks) => <ul>{chunks}</ul>,
              li: (chunks) => <li>{chunks}</li>,
--- a/app/javascript/flavours/glitch/features/account_edit/modals/styles.module.scss
+++ b/app/javascript/flavours/glitch/features/account_edit/modals/styles.module.scss
@@ -58,7 +58,7 @@
  transition: background 0.2s ease-in-out;

  &:hover {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
  }

  &:focus-visible {
--- a/app/javascript/flavours/glitch/features/account_edit/styles.module.scss
+++ b/app/javascript/flavours/glitch/features/account_edit/styles.module.scss
@@ -160,7 +160,7 @@
    &:active,
    &:focus,
    &:hover {
-      background-color: var(--color-bg-brand-softer);
+      background-color: var(--color-bg-brand-softest);
    }

    &:disabled {
@@ -177,7 +177,7 @@

 .deleteButton {
  --default-icon-color: var(--color-text-error);
-  --hover-bg-color: var(--color-bg-error-base-hover);
+  --hover-bg-color: var(--color-bg-error-base);
  --hover-icon-color: var(--color-text-on-error-base);
 }

@@ -201,7 +201,7 @@
  &,
  &:global(.active) {
    // Overrides the transparent background added by default with .active
-    --hover-bg-color: var(--color-bg-brand-softer-solid);
+    --hover-bg-color: var(--color-bg-brand-softest);
  }

  position: absolute;
--- a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx
+++ b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx
@@ -65,5 +65,9 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
    );
  }

-  return <div className='empty-column-indicator'>{message}</div>;
+  return (
+    <div className='empty-column-indicator'>
+      <span>{message}</span>
+    </div>
+  );
 };
--- a/app/javascript/flavours/glitch/features/account_featured/index.tsx
+++ b/app/javascript/flavours/glitch/features/account_featured/index.tsx
@@ -154,6 +154,7 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
                  key={item.id}
                  collection={item}
                  withoutBorder={index === listedCollections.length - 1}
+                  withAuthorHandle={false}
                  positionInList={index + 1}
                  listSize={listedCollections.length}
                />
--- a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
@@ -9,6 +9,11 @@

 .barWrapper {
  border-bottom: none;
+  padding-inline: 24px;
+
+  @container (width < 500px) {
+    padding-inline: 16px;
+  }
 }

 .avatarWrapper {
@@ -93,7 +98,7 @@
  }

  svg {
-    background: var(--color-bg-brand-softer);
+    background: var(--color-bg-brand-softest);
    width: 28px;
    height: 28px;
    padding: 5px;
@@ -125,7 +130,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
  position: sticky;
  bottom: var(--mobile-bottom-nav-height);
  padding: 12px 16px;
-  margin: 0 -20px;
+  margin: 0 -16px;

  @container (width >= #{$button-breakpoint}) {
    display: none;
@@ -184,7 +189,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;

 .badgeMuted {
  background-color: var(--color-bg-inverted);
-  color: var(--color-text-on-inverted);
+  color: var(--color-text-inverted);
 }

 .badgeBlocked {
@@ -270,7 +275,7 @@ svg.badgeIcon {
 }

 .fieldVerified {
-  background-color: var(--color-bg-success-softer);
+  background-color: var(--color-bg-success-softest);

  dt {
    padding-right: 24px;
@@ -292,8 +297,8 @@ svg.badgeIcon {
 }

 .fieldOverflowButton {
-  --default-bg-color: var(--color-bg-secondary-solid);
-  --hover-bg-color: var(--color-bg-brand-softer-solid);
+  --default-bg-color: var(--color-bg-secondary);
+  --hover-bg-color: var(--color-bg-brand-softest);

  position: absolute;
  right: 8px;
@@ -388,7 +393,7 @@ svg.badgeIcon {
  padding: 0 24px;

  @container (width < 500px) {
-    padding: 0 12px;
+    padding: 0 16px;

    a {
      flex: 1 1 0px;
@@ -413,7 +418,7 @@ svg.badgeIcon {

  :global(.active) {
    color: var(--color-text-brand);
-    border-bottom: 4px solid var(--color-text-brand);
+    border-bottom: 4px solid var(--color-border-brand);
    padding-bottom: 14px;
  }
 }
--- a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx
@@ -78,6 +78,7 @@ export const TagSuggestions: FC = () => {
          values={{
            link: (chunks) => <Link to='/profile/featured_tags'>{chunks}</Link>,
          }}
+          tagName='span'
        />
      </Callout>
    );
@@ -122,6 +123,7 @@ export const TagSuggestions: FC = () => {
            />
          ),
        }}
+        tagName='span'
      />
    </Callout>
  );
--- a/app/javascript/flavours/glitch/features/alt_text_modal/components/info_button.tsx
+++ b/app/javascript/flavours/glitch/features/alt_text_modal/components/info_button.tsx
@@ -59,6 +59,7 @@ export const InfoButton: React.FC = () => {
          >
            <FormattedMessage
              id='info_button.what_is_alt_text'
+              // eslint-disable-next-line formatjs/prefer-full-sentence
              defaultMessage='<h1>What is alt text?</h1>

            <p>Alt text provides image descriptions for people with vision impairments, low-bandwidth connections, or those seeking extra context.</p>
--- a/app/javascript/flavours/glitch/features/blocks/index.jsx
+++ b/app/javascript/flavours/glitch/features/blocks/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';

 import { debounce } from 'lodash';

+import { injectIntl } from '@/flavours/glitch/components/intl';
 import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
 import { Account } from 'flavours/glitch/components/account';

--- a/app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx
+++ b/app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';

 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

@@ -100,14 +100,12 @@ const RevokeControls: React.FC<{
        <FormattedMessage
          id='collections.detail.accept_inclusion'
          defaultMessage='Okay'
-          tagName={Fragment}
        />
      </Button>
      <Button secondary onClick={confirmRevoke}>
        <FormattedMessage
          id='collections.detail.revoke_inclusion'
          defaultMessage='Remove me'
-          tagName={Fragment}
        />
      </Button>
    </div>
@@ -143,7 +141,6 @@ const SensitiveScreen: React.FC<{
        <FormattedMessage
          id='content_warning.show'
          defaultMessage='Show anyway'
-          tagName={Fragment}
        />
      </Button>
    </div>
@@ -205,7 +202,6 @@ export const CollectionAccountsList: React.FC<{
              values={{
                author: <SimpleAuthorName id={collection.account_id} />,
              }}
-              tagName={Fragment}
            />
          </h3>
          <Article
@@ -231,7 +227,6 @@ export const CollectionAccountsList: React.FC<{
            <FormattedMessage
              id='collections.detail.other_accounts_in_collection'
              defaultMessage='Others in this collection:'
-              tagName={Fragment}
            />
          </h3>
        </>
--- a/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.module.scss
+++ b/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.module.scss
@@ -1,8 +1,9 @@
 .wrapper {
  display: flex;
-  align-items: center;
+  align-items: start;
+  margin-inline: 24px;
+  padding-block: 12px;
  gap: 16px;
-  padding-inline: 16px;

  &:not(.wrapperWithoutBorder) {
    border-bottom: 1px solid var(--color-border-primary);
@@ -12,12 +13,42 @@
 .content {
  position: relative;
  flex-grow: 1;
-  padding-block: 15px;
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}
+
+.avatarGrid {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, min-content);
+  gap: 2px;
+
+  &.avatarGridSensitive {
+    .avatar {
+      filter: blur(4px);
+    }
+  }
+}
+
+.avatar {
+  background: var(--color-bg-brand-softest);
+}
+
+.avatarSensitiveBadge {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  padding: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 8px;
+  color: var(--color-text-primary);
+  background: var(--color-bg-warning-softest);
 }

 .link {
  display: block;
-  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
@@ -40,15 +71,12 @@
  color: var(--color-text-secondary);
 }

-.metaList {
-  --gap: 0.75ch;
+.menuButton {
+  padding: 4px;
+  margin-top: -2px;

-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
-
-  & > li:not(:last-child)::after {
-    content: '·';
-    margin-inline-start: var(--gap);
+  svg {
+    width: 20px;
+    height: 20px;
  }
 }
--- a/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.tsx
+++ b/app/javascript/flavours/glitch/features/collections/detail/collection_list_item.tsx
@@ -5,70 +5,65 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';

+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
+import { AvatarById } from 'flavours/glitch/components/avatar';
+import { useAccountHandle } from 'flavours/glitch/components/display_name/default';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import { Article } from 'flavours/glitch/components/scrollable_list/components';
+import { useAccount } from 'flavours/glitch/hooks/useAccount';
+import { domain } from 'flavours/glitch/initial_state';

 import classes from './collection_list_item.module.scss';
 import { CollectionMenu } from './collection_menu';

-export const CollectionMetaData: React.FC<{
-  collection: ApiCollectionJSON;
-  extended?: boolean;
-  className?: string;
-}> = ({ collection, extended, className }) => {
+export const AvatarGrid: React.FC<{
+  accountIds: (string | undefined)[];
+  sensitive?: boolean;
+}> = ({ accountIds: ids, sensitive }) => {
+  const avatarIds = [ids[0], ids[1], ids[2], ids[3]];
  return (
-    <ul className={classNames(classes.metaList, className)}>
-      <FormattedMessage
-        id='collections.account_count'
-        defaultMessage='{count, plural, one {# account} other {# accounts}}'
-        values={{ count: collection.item_count }}
-        tagName='li'
-      />
-      {extended && (
-        <>
-          {collection.discoverable ? (
-            <FormattedMessage
-              id='collections.visibility_public'
-              defaultMessage='Public'
-              tagName='li'
-            />
-          ) : (
-            <FormattedMessage
-              id='collections.visibility_unlisted'
-              defaultMessage='Unlisted'
-              tagName='li'
-            />
+    <div
+      className={classNames(
+        classes.avatarGrid,
+        sensitive ? classes.avatarGridSensitive : null,
      )}
-          {collection.sensitive && (
-            <FormattedMessage
-              id='collections.sensitive'
-              defaultMessage='Sensitive'
-              tagName='li'
+    >
+      {avatarIds.map((id) => (
+        <AvatarById
+          animate={false}
+          key={id}
+          accountId={id}
+          className={classes.avatar}
+          size={25}
        />
-          )}
-        </>
-      )}
-      <FormattedMessage
-        id='collections.last_updated_at'
-        defaultMessage='Last updated: {date}'
-        values={{
-          date: <RelativeTimestamp timestamp={collection.updated_at} long />,
-        }}
-        tagName='li'
-      />
-    </ul>
+      ))}
+      {sensitive && <WarningIcon className={classes.avatarSensitiveBadge} />}
+    </div>
  );
 };

 export const CollectionListItem: React.FC<{
  collection: ApiCollectionJSON;
  withoutBorder?: boolean;
+  withAuthorHandle?: boolean;
+  withTimestamp?: boolean;
  positionInList: number;
  listSize: number;
-}> = ({ collection, withoutBorder, positionInList, listSize }) => {
+}> = ({
+  collection,
+  withoutBorder,
+  withAuthorHandle = true,
+  withTimestamp,
+  positionInList,
+  listSize,
+}) => {
  const { id, name } = collection;
-  const linkId = useId();
+  const uniqueId = useId();
+  const linkId = `${uniqueId}-link`;
+  const infoId = `${uniqueId}-info`;
+  const authorAccount = useAccount(collection.account_id);
+  const authorHandle = useAccountHandle(authorAccount, domain);

  return (
    <Article
@@ -78,19 +73,67 @@ export const CollectionListItem: React.FC<{
        withoutBorder && classes.wrapperWithoutBorder,
      )}
      aria-labelledby={linkId}
+      aria-describedby={infoId}
      aria-posinset={positionInList}
      aria-setsize={listSize}
    >
      <div className={classes.content}>
+        <AvatarGrid
+          accountIds={collection.items.map((item) => item.account_id)}
+          sensitive={collection.sensitive}
+        />
+        <div>
          <h2 id={linkId}>
            <Link to={`/collections/${id}`} className={classes.link}>
              {name}
            </Link>
          </h2>
-        <CollectionMetaData collection={collection} className={classes.info} />
+          <ul className={classes.info} id={infoId}>
+            {collection.sensitive && (
+              <li className='sr-only'>
+                <FormattedMessage
+                  id='collections.sensitive'
+                  defaultMessage='Sensitive'
+                />
+              </li>
+            )}
+            {withAuthorHandle && authorAccount && (
+              <FormattedMessage
+                id='collections.by_account'
+                defaultMessage='by {account_handle}'
+                values={{
+                  account_handle: authorHandle,
+                }}
+                tagName='li'
+              />
+            )}
+            <FormattedMessage
+              id='collections.account_count'
+              defaultMessage='{count, plural, one {# account} other {# accounts}}'
+              values={{ count: collection.item_count }}
+              tagName='li'
+            />
+            {withTimestamp && (
+              <FormattedMessage
+                id='collections.last_updated_at'
+                defaultMessage='Last updated: {date}'
+                values={{
+                  date: (
+                    <RelativeTimestamp timestamp={collection.updated_at} long />
+                  ),
+                }}
+                tagName='li'
+              />
+            )}
+          </ul>
+        </div>
      </div>

-      <CollectionMenu context='list' collection={collection} />
+      <CollectionMenu
+        context='list'
+        collection={collection}
+        className={classes.menuButton}
+      />
    </Article>
  );
 };
--- a/app/javascript/flavours/glitch/features/collections/detail/index.tsx
+++ b/app/javascript/flavours/glitch/features/collections/detail/index.tsx
@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
 import { useHistory, useLocation, useParams } from 'react-router';

 import { openModal } from '@/flavours/glitch/actions/modal';
+import { RelativeTimestamp } from '@/flavours/glitch/components/relative_timestamp';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import ShareIcon from '@/material-icons/400-24px/share.svg?react';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
@@ -25,7 +26,6 @@ import { fetchCollection } from 'flavours/glitch/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';

 import { CollectionAccountsList } from './accounts_list';
-import { CollectionMetaData } from './collection_list_item';
 import { CollectionMenu } from './collection_menu';
 import classes from './styles.module.scss';

@@ -40,6 +40,54 @@ const messages = defineMessages({
  },
 });

+const CollectionMetaData: React.FC<{
+  collection: ApiCollectionJSON;
+  extended?: boolean;
+}> = ({ collection, extended }) => {
+  return (
+    <ul className={classes.metaList}>
+      <FormattedMessage
+        id='collections.account_count'
+        defaultMessage='{count, plural, one {# account} other {# accounts}}'
+        values={{ count: collection.item_count }}
+        tagName='li'
+      />
+      {extended && (
+        <>
+          {collection.discoverable ? (
+            <FormattedMessage
+              id='collections.visibility_public'
+              defaultMessage='Public'
+              tagName='li'
+            />
+          ) : (
+            <FormattedMessage
+              id='collections.visibility_unlisted'
+              defaultMessage='Unlisted'
+              tagName='li'
+            />
+          )}
+          {collection.sensitive && (
+            <FormattedMessage
+              id='collections.sensitive'
+              defaultMessage='Sensitive'
+              tagName='li'
+            />
+          )}
+        </>
+      )}
+      <FormattedMessage
+        id='collections.last_updated_at'
+        defaultMessage='Last updated: {date}'
+        values={{
+          date: <RelativeTimestamp timestamp={collection.updated_at} long />,
+        }}
+        tagName='li'
+      />
+    </ul>
+  );
+};
+
 export const AuthorNote: React.FC<{ id: string; previewMode?: boolean }> = ({
  id,
  // When previewMode is enabled, your own display name
@@ -137,7 +185,6 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
      <CollectionMetaData
        extended={account_id === me}
        collection={collection}
-        className={classes.metaData}
      />
    </div>
  );
--- a/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss
+++ b/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss
@@ -52,9 +52,19 @@
  font-size: 13px;
 }

-.metaData {
+.metaList {
+  --gap: 0.75ch;
+
+  display: flex;
+  flex-wrap: wrap;
  margin-top: 16px;
+  gap: var(--gap);
  font-size: 15px;
+
+  & > li:not(:last-child)::after {
+    content: '·';
+    margin-inline-start: var(--gap);
+  }
 }

 .columnSubheading {
--- a/app/javascript/flavours/glitch/features/collections/editor/details.tsx
+++ b/app/javascript/flavours/glitch/features/collections/editor/details.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';

 import { FormattedMessage, useIntl } from 'react-intl';

@@ -413,7 +413,6 @@ const LanguageField: React.FC = () => {
        <FormattedMessage
          id='collections.collection_language_none'
          defaultMessage='None'
-          tagName={Fragment}
        />
      </option>
      {languages?.map(([code, name, localName]) => (
--- a/app/javascript/flavours/glitch/features/collections/index.tsx
+++ b/app/javascript/flavours/glitch/features/collections/index.tsx
@@ -47,6 +47,7 @@ export const Collections: React.FC<{
      <FormattedMessage
        id='collections.error_loading_collections'
        defaultMessage='There was an error when trying to load your collections.'
+        tagName='span'
      />
    ) : (
      <>
@@ -92,6 +93,8 @@ export const Collections: React.FC<{
        <ItemList emptyMessage={emptyMessage} isLoading={status === 'loading'}>
          {collections.map((item, index) => (
            <CollectionListItem
+              withTimestamp
+              withAuthorHandle={false}
              key={item.id}
              collection={item}
              positionInList={index + 1}
--- a/app/javascript/flavours/glitch/features/community_timeline/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/community_timeline/components/column_settings.jsx
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+import { injectIntl } from '@/flavours/glitch/components/intl';
 import SettingText from 'flavours/glitch/components/setting_text';
 import SettingToggle from 'flavours/glitch/features/notifications/components/setting_toggle';

--- a/app/javascript/flavours/glitch/features/community_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.jsx
@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

 import { connect } from 'react-redux';

 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { domain, localLiveFeedAccess } from 'flavours/glitch/initial_state';
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { createRef } from 'react';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import classNames from 'classnames';

@@ -15,6 +15,7 @@ import { missingAltTextModal } from 'flavours/glitch/initial_state';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
 import AutosuggestTextarea from 'flavours/glitch/components/autosuggest_textarea';
 import { Button } from 'flavours/glitch/components/button';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
 import PollButtonContainer from '../containers/poll_button_container';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
--- a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import classNames from 'classnames';

@@ -12,6 +12,7 @@ import Overlay from 'react-overlays/Overlay';

 import MoodIcon from '@/material-icons/400-20px/mood.svg?react';
 import { IconButton } from 'flavours/glitch/components/icon_button';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
 import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
--- a/app/javascript/flavours/glitch/features/compose/components/poll_button.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_button.jsx
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { IconButton } from '../../../components/icon_button';

--- a/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -10,6 +10,8 @@ import PhotoLibraryIcon from '@/material-icons/400-20px/photo_library.svg?react'
 import BrushIcon from '@/material-icons/400-24px/brush.svg?react';
 import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';

+import { injectIntl } from '@/flavours/glitch/components/intl';
+
 import { DropdownIconButton } from './dropdown_icon_button';

 const messages = defineMessages({
--- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.tsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.tsx
@@ -30,6 +30,7 @@ export const UploadProgress: React.FC<UploadProgressProps> = ({
      <Icon id='upload' icon={UploadFileIcon} />

      <div className='upload-progress__message'>
+        <span>
          {isProcessing ? (
            <FormattedMessage
              id='upload_progress.processing'
@@ -41,6 +42,7 @@ export const UploadProgress: React.FC<UploadProgressProps> = ({
              defaultMessage='Uploading…'
            />
          )}
+        </span>

        <div className='upload-progress__backdrop'>
          <animated.div className='upload-progress__tracker' style={styles} />
--- a/app/javascript/flavours/glitch/features/compose/containers/spoiler_button_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/spoiler_button_container.js
@@ -1,8 +1,9 @@
-import { injectIntl, defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import { connect } from 'react-redux';

 import WarningIcon from '@/material-icons/400-20px/warning.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { IconButton } from 'flavours/glitch/components/icon_button';

 import { changeComposeSpoilerness } from '../../../actions/compose';
--- a/app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/direct_timeline/components/column_settings.jsx
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+import { injectIntl } from '@/flavours/glitch/components/intl';
 import SettingToggle from 'flavours/glitch/features/notifications/components/setting_toggle';

 import SettingText from '../../../components/setting_text';
--- a/app/javascript/flavours/glitch/features/explore/links.jsx
+++ b/app/javascript/flavours/glitch/features/explore/links.jsx
@@ -47,7 +47,7 @@ class Links extends PureComponent {
      return (
        <div className='explore__links scrollable scrollable--flex'>
          <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
+            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' tagName='span' />
          </div>
        </div>
      );
--- a/app/javascript/flavours/glitch/features/explore/suggestions.jsx
+++ b/app/javascript/flavours/glitch/features/explore/suggestions.jsx
@@ -45,7 +45,7 @@ class Suggestions extends PureComponent {
      return (
        <div className='explore__suggestions scrollable scrollable--flex'>
          <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
+            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' tagName='span' />
          </div>
        </div>
      );
--- a/app/javascript/flavours/glitch/features/explore/tags.jsx
+++ b/app/javascript/flavours/glitch/features/explore/tags.jsx
@@ -46,7 +46,7 @@ class Tags extends PureComponent {
      return (
        <div className='explore__links scrollable scrollable--flex'>
          <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
+            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' tagName='span' />
          </div>
        </div>
      );
--- a/app/javascript/flavours/glitch/features/favourites/index.jsx
+++ b/app/javascript/flavours/glitch/features/favourites/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -16,6 +16,7 @@ import { fetchFavourites, expandFavourites } from 'flavours/glitch/actions/inter
 import { Account } from 'flavours/glitch/components/account';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import { Icon }  from 'flavours/glitch/components/icon';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import Column from 'flavours/glitch/features/ui/components/column';
--- a/app/javascript/flavours/glitch/features/filters/select_filter.jsx
+++ b/app/javascript/flavours/glitch/features/filters/select_filter.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { connect } from 'react-redux';

@@ -9,6 +9,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 { toServerSideType } from 'flavours/glitch/utils/filters';
 import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons';

--- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -11,6 +11,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { Avatar } from '@/flavours/glitch/components/avatar';
 import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { IconButton } from '@/flavours/glitch/components/icon_button';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import { Permalink } from '@/flavours/glitch/components/permalink';

--- a/app/javascript/flavours/glitch/features/follow_requests/index.jsx
+++ b/app/javascript/flavours/glitch/features/follow_requests/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';

 import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
 import ScrollableList from '../../components/scrollable_list';
--- a/app/javascript/flavours/glitch/features/followers/index.tsx
+++ b/app/javascript/flavours/glitch/features/followers/index.tsx
@@ -66,6 +66,7 @@ const Followers: FC = () => {
      <FormattedMessage
        id='followers.hide_other_followers'
        defaultMessage='This user has chosen to not make their other followers visible'
+        tagName='span'
      />
    </div>
  );
--- a/app/javascript/flavours/glitch/features/following/index.tsx
+++ b/app/javascript/flavours/glitch/features/following/index.tsx
@@ -68,6 +68,7 @@ const Followers: FC = () => {
      <FormattedMessage
        id='following.hide_other_following'
        defaultMessage='This user has chosen to not make the rest of who they follow visible'
+        tagName='span'
      />
    </div>
  );
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

@@ -11,6 +11,8 @@ import Toggle from 'react-toggle';

 import { maxFeedHashtags } from 'flavours/glitch/initial_state';

+import { injectIntl } from '@/flavours/glitch/components/intl';
+
 import SettingToggle from '../../notifications/components/setting_toggle';

 const messages = defineMessages({
--- a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx
@@ -115,7 +115,7 @@ const Source: React.FC<{ id: ApiSuggestionSourceJSON }> = ({ id }) => {
      title={hint}
    >
      <Icon id='' icon={InfoIcon} />
-      {label}
+      <span>{label}</span>
    </div>
  );
 };
--- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
@@ -10,6 +10,7 @@ import { connect } from 'react-redux';

 import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { SymbolLogo } from 'flavours/glitch/components/logo';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements';
 import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
--- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx
+++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 const messages = defineMessages({
  heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
--- a/app/javascript/flavours/glitch/features/lists/members.tsx
+++ b/app/javascript/flavours/glitch/features/lists/members.tsx
@@ -285,6 +285,7 @@ const ListMembers: React.FC<{
            <FormattedMessage
              id='lists.no_results_found'
              defaultMessage='No results found.'
+              tagName='span'
            />
          )
        }
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx
@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { injectIntl, defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
@@ -10,6 +10,7 @@ import ImageIcon from '@/material-icons/400-24px/image.svg?react';
 import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';

 import LocalSettingsNavigationItem from './item';
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
@@ -2,12 +2,13 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';


 //  Our imports
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { expandSpoilers } from 'flavours/glitch/initial_state';
 import { preferenceLink } from 'flavours/glitch/utils/backend_links';

--- a/app/javascript/flavours/glitch/features/mutes/index.jsx
+++ b/app/javascript/flavours/glitch/features/mutes/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -12,6 +12,7 @@ import { debounce } from 'lodash';

 import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 import { Account } from 'flavours/glitch/components/account';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { fetchMutes, expandMutes } from '../../actions/mutes';
 import { LoadingIndicator } from '../../components/loading_indicator';
--- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -10,6 +10,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { IconButton } from 'flavours/glitch/components/icon_button';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { Permalink } from 'flavours/glitch/components/permalink';

 const messages = defineMessages({
--- a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl';

 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
@@ -14,6 +14,7 @@ import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import { Account } from 'flavours/glitch/components/account';
 import { LinkedDisplayName } from '@/flavours/glitch/components/display_name';
 import { Icon }  from 'flavours/glitch/components/icon';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { Hotkeys } from 'flavours/glitch/components/hotkeys';
 import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
--- a/app/javascript/flavours/glitch/features/notifications/components/report.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/report.jsx
@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';

-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

 import { AvatarOverlay } from 'flavours/glitch/components/avatar_overlay';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';

 // This needs to be kept in sync with app/models/report.rb
--- a/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
+++ b/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
@@ -1,9 +1,10 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import { connect } from 'react-redux';

 import { openModal } from 'flavours/glitch/actions/modal';
 import { fetchNotifications , setNotificationsFilter } from 'flavours/glitch/actions/notification_groups';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { showAlert } from '../../../actions/alerts';
 import { requestBrowserPermission } from '../../../actions/notifications';
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
@@ -126,7 +126,7 @@ export const NotificationGroupWithStatus: React.FC<{
            </div>

            <div className='notification-group__main__header__label'>
-              {label}
+              <span>{label}</span>
              {timestamp && (
                <>
                  <span className='notification-group__main__header__label-separator'>
--- a/app/javascript/flavours/glitch/features/pinned_statuses/index.jsx
+++ b/app/javascript/flavours/glitch/features/pinned_statuses/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';

 import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { getStatusList } from 'flavours/glitch/selectors';

 import { fetchPinnedStatuses } from '../../actions/pin_statuses';
--- a/app/javascript/flavours/glitch/features/public_timeline/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/public_timeline/components/column_settings.jsx
@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';

+import { injectIntl } from '@/flavours/glitch/components/intl';
+
 import SettingText from '../../../components/setting_text';
 import SettingToggle from '../../notifications/components/setting_toggle';

--- a/app/javascript/flavours/glitch/features/public_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';

 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { domain, localLiveFeedAccess, remoteLiveFeedAccess } from 'flavours/glitch/initial_state';
 import { canViewFeed } from 'flavours/glitch/permissions';
--- a/app/javascript/flavours/glitch/features/reblogs/index.jsx
+++ b/app/javascript/flavours/glitch/features/reblogs/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { Helmet } from 'react-helmet';

@@ -14,6 +14,7 @@ import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import { Account } from 'flavours/glitch/components/account';
 import { Icon }  from 'flavours/glitch/components/icon';
+import { injectIntl } from '@/flavours/glitch/components/intl';

 import { fetchReblogs, expandReblogs } from '../../actions/interactions';
 import ColumnHeader from '../../components/column_header';
--- a/app/javascript/flavours/glitch/features/report/category.jsx
+++ b/app/javascript/flavours/glitch/features/report/category.jsx
@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+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 { injectIntl } from '@/flavours/glitch/components/intl';

 import Option from './components/option';

--- a/app/javascript/flavours/glitch/features/report/comment.tsx
+++ b/app/javascript/flavours/glitch/features/report/comment.tsx
@@ -194,6 +194,7 @@ const Comment: React.FC<Props> = ({
                id='report.forward'
                defaultMessage='Forward to {target}'
                values={{ target: domain }}
+                tagName='span'
              />
            </label>
          ))}
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
@@ -13,6 +13,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';

 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
@@ -16,6 +16,7 @@ import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
 import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { Hotkeys }  from 'flavours/glitch/components/hotkeys';
 import { Icon }  from 'flavours/glitch/components/icon';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { ScrollContainer } from 'flavours/glitch/containers/scroll_container';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
--- a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';

-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';

 import { createSelector } from '@reduxjs/toolkit';
 import { is, List as ImmutableList, Set as ImmutableSet } from 'immutable';
@@ -12,6 +12,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { followAccount } from 'flavours/glitch/actions/accounts';
 import { Button } from 'flavours/glitch/components/button';
 import { IconButton } from 'flavours/glitch/components/icon_button';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import Option from 'flavours/glitch/features/report/components/option';
 import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';

--- a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';

 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';

 import { Button } from 'flavours/glitch/components/button';
 import Column from 'flavours/glitch/components/column';
+import { injectIntl } from '@/flavours/glitch/components/intl';
 import { GIF } from 'flavours/glitch/components/gif';

 class CopyButton extends PureComponent {
--- a/Show More
+++ b/Show More