Profile editing: Visual fixes (#38346)

app/javascript/mastodon/components/form_fields/range_input.module.scss

@@ -13,6 +13,7 @@
   margin: 6px 0;
   background-color: transparent;
   appearance: none;
+  display: block;
 
   &:focus {
     outline: none;

app/javascript/mastodon/components/form_fields/range_input_field.tsx

@@ -14,7 +14,9 @@ export type RangeInputProps = Omit<
   markers?: { value: number; label: string }[] | number[];
 };
 
-interface Props extends RangeInputProps, CommonFieldWrapperProps {}
+interface Props extends RangeInputProps, CommonFieldWrapperProps {
+  inputPlacement?: 'inline-start' | 'inline-end'; // TODO: Move this to the common field wrapper props for other fields.
+}
 
 /**
  * A simple form field for single-line text.
@@ -25,7 +27,16 @@ interface Props extends RangeInputProps, CommonFieldWrapperProps {}
 
 export const RangeInputField = forwardRef<HTMLInputElement, Props>(
   (
-    { id, label, hint, status, required, wrapperClassName, ...otherProps },
+    {
+      id,
+      label,
+      hint,
+      status,
+      required,
+      wrapperClassName,
+      inputPlacement,
+      ...otherProps
+    },
     ref,
   ) => (
     <FormFieldWrapper
@@ -34,6 +45,7 @@ export const RangeInputField = forwardRef<HTMLInputElement, Props>(
       required={required}
       status={status}
       inputId={id}
+      inputPlacement={inputPlacement}
       className={wrapperClassName}
     >
       {(inputProps) => <RangeInput {...otherProps} {...inputProps} ref={ref} />}

app/javascript/mastodon/features/account_edit/components/column.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import { Column } from '@/mastodon/components/column';
@@ -36,22 +37,27 @@ export const AccountEditColumn: FC<{
   const { multiColumn } = useColumnsContext();
 
   return (
-    <Column bindToDocument={!multiColumn} className={classes.column}>
+    <>
-      <ColumnHeader
+      <Column bindToDocument={!multiColumn} className={classes.column}>
-        title={title}
+        <ColumnHeader
-        className={classes.columnHeader}
+          title={title}
-        showBackButton
+          className={classes.columnHeader}
-        extraButton={
+          showBackButton
-          <Link to={to} className='button'>
+          extraButton={
-            <FormattedMessage
+            <Link to={to} className='button'>
-              id='account_edit.column_button'
+              <FormattedMessage
-              defaultMessage='Done'
+                id='account_edit.column_button'
-            />
+                defaultMessage='Done'
-          </Link>
+              />
-        }
+            </Link>
-      />
+          }
+        />
 
-      {children}
+        {children}
-    </Column>
+      </Column>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+    </>
   );
 };

app/javascript/mastodon/features/account_edit/components/edit_button.tsx

@@ -1,8 +1,5 @@
 import type { FC, MouseEventHandler } from 'react';
 
-import type { MessageDescriptor } from 'react-intl';
-import { defineMessages, useIntl } from 'react-intl';
-
 import classNames from 'classnames';
 
 import { Button } from '@/mastodon/components/button';
@@ -12,43 +9,19 @@ import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 
 import classes from '../styles.module.scss';
 
-const messages = defineMessages({
-  add: {
-    id: 'account_edit.button.add',
-    defaultMessage: 'Add {item}',
-  },
-  edit: {
-    id: 'account_edit.button.edit',
-    defaultMessage: 'Edit {item}',
-  },
-  delete: {
-    id: 'account_edit.button.delete',
-    defaultMessage: 'Delete {item}',
-  },
-});
-
 export interface EditButtonProps {
   onClick: MouseEventHandler;
-  item: string | MessageDescriptor;
+  label: string;
-  edit?: boolean;
   icon?: boolean;
   disabled?: boolean;
 }
 
 export const EditButton: FC<EditButtonProps> = ({
   onClick,
-  item,
+  label,
-  edit = false,
+  icon = false,
-  icon = edit,
   disabled,
 }) => {
-  const intl = useIntl();
-
-  const itemText = typeof item === 'string' ? item : intl.formatMessage(item);
-  const label = intl.formatMessage(messages[edit ? 'edit' : 'add'], {
-    item: itemText,
-  });
-
   if (icon) {
     return (
       <EditIconButton title={label} onClick={onClick} disabled={disabled} />
@@ -83,18 +56,15 @@ export const EditIconButton: FC<{
 
 export const DeleteIconButton: FC<{
   onClick: MouseEventHandler;
-  item: string;
+  label: string;
   disabled?: boolean;
-}> = ({ onClick, item, disabled }) => {
+}> = ({ onClick, label, disabled }) => (
-  const intl = useIntl();
+  <IconButton
-  return (
+    icon='delete'
-    <IconButton
+    iconComponent={DeleteIcon}
-      icon='delete'
+    onClick={onClick}
-      iconComponent={DeleteIcon}
+    className={classNames(classes.editButton, classes.deleteButton)}
-      onClick={onClick}
+    title={label}
-      className={classNames(classes.editButton, classes.deleteButton)}
+    disabled={disabled}
-      title={intl.formatMessage(messages.delete, { item })}
+  />
-      disabled={disabled}
+);
-    />
-  );
-};

app/javascript/mastodon/features/account_edit/components/field_actions.tsx

@@ -1,15 +1,25 @@
 import type { FC } from 'react';
 import { useCallback } from 'react';
 
+import { defineMessages, useIntl } from 'react-intl';
+
 import { openModal } from '@/mastodon/actions/modal';
 import { useAppDispatch } from '@/mastodon/store';
 
 import { EditButton, DeleteIconButton } from './edit_button';
 
-export const AccountFieldActions: FC<{ item: string; id: string }> = ({
+const messages = defineMessages({
-  item,
+  edit: {
-  id,
+    id: 'account_edit.field_actions.edit',
-}) => {
+    defaultMessage: 'Edit field',
+  },
+  delete: {
+    id: 'account_edit.field_actions.delete',
+    defaultMessage: 'Delete field',
+  },
+});
+
+export const AccountFieldActions: FC<{ id: string }> = ({ id }) => {
   const dispatch = useAppDispatch();
   const handleEdit = useCallback(() => {
     dispatch(
@@ -28,10 +38,19 @@ export const AccountFieldActions: FC<{ item: string; id: string }> = ({
     );
   }, [dispatch, id]);
 
+  const intl = useIntl();
+
   return (
     <>
-      <EditButton item={item} edit onClick={handleEdit} />
+      <EditButton
-      <DeleteIconButton item={item} onClick={handleDelete} />
+        label={intl.formatMessage(messages.edit)}
+        icon
+        onClick={handleEdit}
+      />
+      <DeleteIconButton
+        label={intl.formatMessage(messages.delete)}
+        onClick={handleDelete}
+      />
     </>
   );
 };

app/javascript/mastodon/features/account_edit/components/item_list.tsx

@@ -1,5 +1,7 @@
 import { useCallback } from 'react';
 
+import { defineMessages, useIntl } from 'react-intl';
+
 import classes from '../styles.module.scss';
 
 import { DeleteIconButton, EditButton } from './edit_button';
@@ -50,6 +52,17 @@ type AccountEditItemButtonsProps<Item extends AnyItem = AnyItem> = Pick<
   'onEdit' | 'onDelete' | 'disabled'
 > & { item: Item };
 
+const messages = defineMessages({
+  edit: {
+    id: 'account_edit.item_list.edit',
+    defaultMessage: 'Edit {name}',
+  },
+  delete: {
+    id: 'account_edit.item_list.delete',
+    defaultMessage: 'Delete {name}',
+  },
+});
+
 const AccountEditItemButtons = <Item extends AnyItem>({
   item,
   onDelete,
@@ -63,6 +76,8 @@ const AccountEditItemButtons = <Item extends AnyItem>({
     onDelete?.(item);
   }, [item, onDelete]);
 
+  const intl = useIntl();
+
   if (!onEdit && !onDelete) {
     return null;
   }
@@ -71,15 +86,15 @@ const AccountEditItemButtons = <Item extends AnyItem>({
     <div className={classes.itemListButtons}>
       {onEdit && (
         <EditButton
-          edit
+          icon
-          item={item.name}
+          label={intl.formatMessage(messages.edit, { name: item.name })}
           disabled={disabled}
           onClick={handleEdit}
         />
       )}
       {onDelete && (
         <DeleteIconButton
-          item={item.name}
+          label={intl.formatMessage(messages.delete, { name: item.name })}
           disabled={disabled}
           onClick={handleDelete}
         />

app/javascript/mastodon/features/account_edit/featured_tags.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { Callout } from '@/mastodon/components/callout';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import { Tag } from '@/mastodon/components/tags/tag';
 import { useAccount } from '@/mastodon/hooks/useAccount';
@@ -28,17 +29,25 @@ import classes from './styles.module.scss';
 const messages = defineMessages({
   columnTitle: {
     id: 'account_edit_tags.column_title',
-    defaultMessage: 'Edit featured hashtags',
+    defaultMessage: 'Edit Tags',
   },
 });
 
 const selectTags = createAppSelector(
-  [(state) => state.profileEdit],
+  [
-  (profileEdit) => ({
+    (state) => state.profileEdit,
+    (state) =>
+      state.server.getIn(
+        ['server', 'accounts', 'max_featured_tags'],
+        10,
+      ) as number,
+  ],
+  (profileEdit, maxTags) => ({
     tags: profileEdit.profile?.featuredTags ?? [],
     tagSuggestions: profileEdit.tagSuggestions ?? [],
     isLoading: !profileEdit.profile || !profileEdit.tagSuggestions,
     isPending: profileEdit.isPending,
+    maxTags,
   }),
 );
 
@@ -47,7 +56,7 @@ export const AccountEditFeaturedTags: FC = () => {
   const account = useAccount(accountId);
   const intl = useIntl();
 
-  const { tags, tagSuggestions, isLoading, isPending } =
+  const { tags, tagSuggestions, isLoading, isPending, maxTags } =
     useAppSelector(selectTags);
 
   const dispatch = useAppDispatch();
@@ -67,6 +76,8 @@ export const AccountEditFeaturedTags: FC = () => {
     return <AccountEditEmptyColumn notFound={!accountId} />;
   }
 
+  const canAddMoreTags = tags.length < maxTags;
+
   return (
     <AccountEditColumn
       title={intl.formatMessage(messages.columnTitle)}
@@ -79,9 +90,9 @@ export const AccountEditFeaturedTags: FC = () => {
           tagName='p'
         />
 
-        <AccountEditTagSearch />
+        {canAddMoreTags && <AccountEditTagSearch />}
 
-        {tagSuggestions.length > 0 && (
+        {tagSuggestions.length > 0 && canAddMoreTags && (
           <div className={classes.tagSuggestions}>
             <FormattedMessage
               id='account_edit_tags.suggestions'
@@ -93,6 +104,15 @@ export const AccountEditFeaturedTags: FC = () => {
           </div>
         )}
 
+        {!canAddMoreTags && (
+          <Callout icon={false} className={classes.maxTagsWarning}>
+            <FormattedMessage
+              id='account_edit_tags.max_tags_reached'
+              defaultMessage='You have reached the maximum number of featured hashtags.'
+            />
+          </Callout>
+        )}
+
         {isLoading && <LoadingIndicator />}
 
         <AccountEditItemList

app/javascript/mastodon/features/account_edit/index.tsx

@@ -42,6 +42,14 @@ export const messages = defineMessages({
     defaultMessage:
       'Your display name is how your name appears on your profile and in timelines.',
   },
+  displayNameAddLabel: {
+    id: 'account_edit.display_name.add_label',
+    defaultMessage: 'Add display name',
+  },
+  displayNameEditLabel: {
+    id: 'account_edit.display_name.edit_label',
+    defaultMessage: 'Edit display name',
+  },
   bioTitle: {
     id: 'account_edit.bio.title',
     defaultMessage: 'Bio',
@@ -50,6 +58,14 @@ export const messages = defineMessages({
     id: 'account_edit.bio.placeholder',
     defaultMessage: 'Add a short introduction to help others identify you.',
   },
+  bioAddLabel: {
+    id: 'account_edit.bio.label',
+    defaultMessage: 'Add bio',
+  },
+  bioEditLabel: {
+    id: 'account_edit.bio.edit_label',
+    defaultMessage: 'Edit bio',
+  },
   customFieldsTitle: {
     id: 'account_edit.custom_fields.title',
     defaultMessage: 'Custom fields',
@@ -59,9 +75,13 @@ export const messages = defineMessages({
     defaultMessage:
       'Add your pronouns, external links, or anything else you’d like to share.',
   },
-  customFieldsName: {
+  customFieldsAddLabel: {
-    id: 'account_edit.custom_fields.name',
+    id: 'account_edit.custom_fields.add_label',
-    defaultMessage: 'field',
+    defaultMessage: 'Add field',
+  },
+  customFieldsEditLabel: {
+    id: 'account_edit.custom_fields.edit_label',
+    defaultMessage: 'Edit field',
   },
   customFieldsTipTitle: {
     id: 'account_edit.custom_fields.tip_title',
@@ -76,9 +96,9 @@ export const messages = defineMessages({
     defaultMessage:
       'Help others identify, and have quick access to, your favorite topics.',
   },
-  featuredHashtagsItem: {
+  featuredHashtagsEditLabel: {
-    id: 'account_edit.featured_hashtags.item',
+    id: 'account_edit.featured_hashtags.edit_label',
-    defaultMessage: 'hashtags',
+    defaultMessage: 'Add hashtags',
   },
   profileTabTitle: {
     id: 'account_edit.profile_tab.title',
@@ -182,8 +202,12 @@ export const AccountEdit: FC = () => {
           buttons={
             <EditButton
               onClick={handleNameEdit}
-              item={messages.displayNameTitle}
+              label={intl.formatMessage(
-              edit={hasName}
+                hasName
+                  ? messages.displayNameEditLabel
+                  : messages.displayNameAddLabel,
+              )}
+              icon={hasName}
             />
           }
         >
@@ -197,8 +221,10 @@ export const AccountEdit: FC = () => {
           buttons={
             <EditButton
               onClick={handleBioEdit}
-              item={messages.bioTitle}
+              label={intl.formatMessage(
-              edit={hasBio}
+                hasBio ? messages.bioEditLabel : messages.bioAddLabel,
+              )}
+              icon={hasBio}
             />
           }
         >
@@ -214,7 +240,7 @@ export const AccountEdit: FC = () => {
           description={messages.customFieldsPlaceholder}
           showDescription={!hasFields}
           buttons={
-            <>
+            <div className={classes.fieldButtons}>
               <Button
                 className={classes.editButton}
                 onClick={handleCustomFieldReorder}
@@ -226,11 +252,11 @@ export const AccountEdit: FC = () => {
                 />
               </Button>
               <EditButton
-                item={messages.customFieldsName}
+                label={intl.formatMessage(messages.customFieldsAddLabel)}
                 onClick={handleCustomFieldAdd}
                 disabled={profile.fields.length >= maxFieldCount}
               />
-            </>
+            </div>
           }
         >
           {hasFields && (
@@ -240,10 +266,7 @@ export const AccountEdit: FC = () => {
                   <div>
                     <AccountField {...field} {...htmlHandlers} />
                   </div>
-                  <AccountFieldActions
+                  <AccountFieldActions id={field.id} />
-                    item={intl.formatMessage(messages.customFieldsName)}
-                    id={field.id}
-                  />
                 </li>
               ))}
             </ol>
@@ -278,8 +301,8 @@ export const AccountEdit: FC = () => {
           buttons={
             <EditButton
               onClick={handleFeaturedTagsEdit}
-              edit={hasTags}
+              icon={hasTags}
-              item={messages.featuredHashtagsItem}
+              label={intl.formatMessage(messages.featuredHashtagsEditLabel)}
             />
           }
         >

app/javascript/mastodon/features/account_edit/modals/fields_modals.tsx

@@ -1,10 +1,17 @@
-import { useCallback, useMemo, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import type { FC } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import type { Map as ImmutableMap } from 'immutable';
 
+import { closeModal } from '@/mastodon/actions/modal';
 import { Button } from '@/mastodon/components/button';
 import { Callout } from '@/mastodon/components/callout';
 import { EmojiTextInputField } from '@/mastodon/components/form_fields';
@@ -51,14 +58,19 @@ const messages = defineMessages({
     id: 'account_edit.field_edit_modal.value_hint',
     defaultMessage: 'E.g. “https://example.me”',
   },
-  limitHeader: {
-    id: 'account_edit.field_edit_modal.limit_header',
-    defaultMessage: 'Recommended character limit exceeded',
-  },
   save: {
     id: 'account_edit.save',
     defaultMessage: 'Save',
   },
+  discardMessage: {
+    id: 'account_edit.field_edit_modal.discard_message',
+    defaultMessage:
+      'You have unsaved changes. Are you sure you want to discard them?',
+  },
+  discardConfirm: {
+    id: 'account_edit.field_edit_modal.discard_confirm',
+    defaultMessage: 'Discard',
+  },
 });
 
 // We have two different values- the hard limit set by the server,
@@ -83,19 +95,39 @@ const selectEmojiCodes = createAppSelector(
   (emojis) => emojis.map((emoji) => emoji.get('shortcode')).toArray(),
 );
 
-export const EditFieldModal: FC<DialogModalProps & { fieldKey?: string }> = ({
+interface ConfirmationMessage {
-  onClose,
+  message: string;
-  fieldKey,
+  confirm: string;
-}) => {
+  props: { fieldKey?: string; lastLabel: string; lastValue: string };
+}
+
+interface ModalRef {
+  getCloseConfirmationMessage: () => null | ConfirmationMessage;
+}
+
+export const EditFieldModal = forwardRef<
+  ModalRef,
+  DialogModalProps & {
+    fieldKey?: string;
+    lastLabel?: string;
+    lastValue?: string;
+  }
+>(({ onClose, fieldKey, lastLabel, lastValue }, ref) => {
   const intl = useIntl();
   const field = useAppSelector((state) => selectFieldById(state, fieldKey));
-  const [newLabel, setNewLabel] = useState(field?.name ?? '');
+  const oldLabel = lastLabel ?? field?.name;
-  const [newValue, setNewValue] = useState(field?.value ?? '');
+  const oldValue = lastValue ?? field?.value;
+  const [newLabel, setNewLabel] = useState(oldLabel ?? '');
+  const [newValue, setNewValue] = useState(oldValue ?? '');
+  const isDirty = newLabel !== oldLabel || newValue !== oldValue;
 
   const { nameLimit, valueLimit } = useAppSelector(selectFieldLimits);
   const isPending = useAppSelector((state) => state.profileEdit.isPending);
 
   const disabled =
+    !newLabel.trim() ||
+    !newValue.trim() ||
+    !isDirty ||
     !nameLimit ||
     !valueLimit ||
     newLabel.length > nameLimit ||
@@ -122,11 +154,41 @@ export const EditFieldModal: FC<DialogModalProps & { fieldKey?: string }> = ({
     }
     void dispatch(
       updateField({ id: fieldKey, name: newLabel, value: newValue }),
-    ).then(onClose);
+    ).then(() => {
-  }, [disabled, dispatch, fieldKey, isPending, newLabel, newValue, onClose]);
+      // Close without confirmation.
+      dispatch(
+        closeModal({
+          modalType: 'ACCOUNT_EDIT_FIELD_EDIT',
+          ignoreFocus: false,
+        }),
+      );
+    });
+  }, [disabled, dispatch, fieldKey, isPending, newLabel, newValue]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getCloseConfirmationMessage: () => {
+        if (!newLabel || !newValue || !isDirty) {
+          return null;
+        }
+        return {
+          message: intl.formatMessage(messages.discardMessage),
+          confirm: intl.formatMessage(messages.discardConfirm),
+          props: {
+            fieldKey,
+            lastLabel: newLabel,
+            lastValue: newValue,
+          },
+        };
+      },
+    }),
+    [fieldKey, intl, isDirty, newLabel, newValue],
+  );
 
   return (
     <ConfirmationModal
+      noCloseOnConfirm
       onClose={onClose}
       title={
         field
@@ -170,13 +232,10 @@ export const EditFieldModal: FC<DialogModalProps & { fieldKey?: string }> = ({
 
       {(newLabel.length > RECOMMENDED_LIMIT ||
         newValue.length > RECOMMENDED_LIMIT) && (
-        <Callout
+        <Callout variant='warning'>
-          variant='warning'
-          title={intl.formatMessage(messages.limitHeader)}
-        >
           <FormattedMessage
-            id='account_edit.field_edit_modal.limit_message'
+            id='account_edit.field_edit_modal.limit_warning'
-            defaultMessage='Mobile users might not see your field in full.'
+            defaultMessage='Recommended character limit exceeded. Mobile users might not see your field in full.'
           />
         </Callout>
       )}
@@ -195,7 +254,8 @@ export const EditFieldModal: FC<DialogModalProps & { fieldKey?: string }> = ({
       )}
     </ConfirmationModal>
   );
-};
+});
+EditFieldModal.displayName = 'EditFieldModal';
 
 export const DeleteFieldModal: FC<DialogModalProps & { fieldKey: string }> = ({
   onClose,

app/javascript/mastodon/features/account_edit/modals/image_alt.tsx

@@ -3,7 +3,6 @@ import { useCallback, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { CharacterCounter } from '@/mastodon/components/character_counter';
 import { Details } from '@/mastodon/components/details';
 import { TextAreaField } from '@/mastodon/components/form_fields';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
@@ -69,6 +68,7 @@ export const ImageAltModal: FC<
           imageSrc={imageSrc}
           altText={altText}
           onChange={setAltText}
+          hideTip={location === 'header'}
         />
       </div>
     </ConfirmationModal>
@@ -79,7 +79,8 @@ export const ImageAltTextField: FC<{
   imageSrc: string;
   altText: string;
   onChange: (altText: string) => void;
-}> = ({ imageSrc, altText, onChange }) => {
+  hideTip?: boolean;
+}> = ({ imageSrc, altText, onChange, hideTip }) => {
   const altLimit = useAppSelector(
     (state) =>
       state.server.getIn(
@@ -99,49 +100,45 @@ export const ImageAltTextField: FC<{
     <>
       <img src={imageSrc} alt='' className={classes.altImage} />
 
-      <div>
+      <TextAreaField
-        <TextAreaField
+        label={
-          label={
-            <FormattedMessage
-              id='account_edit.image_alt_modal.text_label'
-              defaultMessage='Alt text'
-            />
-          }
-          hint={
-            <FormattedMessage
-              id='account_edit.image_alt_modal.text_hint'
-              defaultMessage='Alt text helps screen reader users to understand your content.'
-            />
-          }
-          onChange={handleChange}
-          value={altText}
-        />
-        <CharacterCounter
-          currentString={altText}
-          maxLength={altLimit}
-          className={classes.altCounter}
-        />
-      </div>
-
-      <Details
-        summary={
           <FormattedMessage
-            id='account_edit.image_alt_modal.details_title'
+            id='account_edit.image_alt_modal.text_label'
-            defaultMessage='Tips: Alt text for profile photos'
+            defaultMessage='Alt text'
           />
         }
-        className={classes.altHint}
+        hint={
-      >
+          <FormattedMessage
-        <FormattedMessage
+            id='account_edit.image_alt_modal.text_hint'
-          id='account_edit.image_alt_modal.details_content'
+            defaultMessage='Alt text helps screen reader users to understand your 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>'
+          />
-          values={{
+        }
-            ul: (chunks) => <ul>{chunks}</ul>,
+        onChange={handleChange}
-            li: (chunks) => <li>{chunks}</li>,
+        value={altText}
-          }}
+        maxLength={altLimit}
-          tagName='div'
+      />
-        />
+
-      </Details>
+      {!hideTip && (
+        <Details
+          summary={
+            <FormattedMessage
+              id='account_edit.image_alt_modal.details_title'
+              defaultMessage='Tips: Alt text for profile photos'
+            />
+          }
+          className={classes.altHint}
+        >
+          <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>'
+            values={{
+              ul: (chunks) => <ul>{chunks}</ul>,
+              li: (chunks) => <li>{chunks}</li>,
+            }}
+            tagName='div'
+          />
+        </Details>
+      )}
     </>
   );
 };

app/javascript/mastodon/features/account_edit/modals/image_upload.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ChangeEventHandler, FC } from 'react';
 
-import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import type { Area } from 'react-easy-crop';
 import Cropper from 'react-easy-crop';
 
 import { setDragUploadEnabled } from '@/mastodon/actions/compose_typed';
 import { Button } from '@/mastodon/components/button';
-import { RangeInput } from '@/mastodon/components/form_fields/range_input_field';
+import { RangeInputField } from '@/mastodon/components/form_fields/range_input_field';
 import {
   selectImageInfo,
   uploadImage,
@@ -24,16 +24,42 @@ import classes from './styles.module.scss';
 
 import 'react-easy-crop/react-easy-crop.css';
 
+const messages = defineMessages({
+  avatarAdd: {
+    id: 'account_edit.upload_modal.title_add.avatar',
+    defaultMessage: 'Add profile photo',
+  },
+  headerAdd: {
+    id: 'account_edit.upload_modal.title_add.header',
+    defaultMessage: 'Add cover photo',
+  },
+  avatarReplace: {
+    id: 'account_edit.upload_modal.title_replace.avatar',
+    defaultMessage: 'Replace profile photo',
+  },
+  headerReplace: {
+    id: 'account_edit.upload_modal.title_replace.header',
+    defaultMessage: 'Replace cover photo',
+  },
+  zoomLabel: {
+    id: 'account_edit.upload_modal.step_crop.zoom',
+    defaultMessage: 'Zoom',
+  },
+});
+
 export const ImageUploadModal: FC<
   DialogModalProps & { location: ImageLocation }
 > = ({ onClose, location }) => {
   const { src: oldSrc } = useAppSelector((state) =>
     selectImageInfo(state, location),
   );
-  const hasImage = !!oldSrc;
+  const intl = useIntl();
-  const [step, setStep] = useState<'select' | 'crop' | 'alt'>('select');
+  const title = intl.formatMessage(
+    oldSrc ? messages[`${location}Replace`] : messages[`${location}Add`],
+  );
 
   // State for individual steps.
+  const [step, setStep] = useState<'select' | 'crop' | 'alt'>('select');
   const [imageSrc, setImageSrc] = useState<string | null>(null);
   const [imageBlob, setImageBlob] = useState<Blob | null>(null);
 
@@ -94,19 +120,7 @@ export const ImageUploadModal: FC<
 
   return (
     <DialogModal
-      title={
+      title={title}
-        hasImage ? (
-          <FormattedMessage
-            id='account_edit.upload_modal.title_replace'
-            defaultMessage='Replace profile photo'
-          />
-        ) : (
-          <FormattedMessage
-            id='account_edit.upload_modal.title_add'
-            defaultMessage='Add profile photo'
-          />
-        )
-      }
       onClose={onClose}
       wrapperClassName={classes.uploadWrapper}
       noCancelButton
@@ -124,6 +138,7 @@ export const ImageUploadModal: FC<
       )}
       {step === 'alt' && imageBlob && (
         <StepAlt
+          location={location}
           imageBlob={imageBlob}
           onCancel={handleCancel}
           onComplete={handleSave}
@@ -275,11 +290,6 @@ const StepUpload: FC<{
   );
 };
 
-const zoomLabel = defineMessage({
-  id: 'account_edit.upload_modal.step_crop.zoom',
-  defaultMessage: 'Zoom',
-});
-
 const StepCrop: FC<{
   src: string;
   location: ImageLocation;
@@ -322,14 +332,15 @@ const StepCrop: FC<{
       </div>
 
       <div className={classes.cropActions}>
-        <RangeInput
+        <RangeInputField
+          label={intl.formatMessage(messages.zoomLabel)}
           min={1}
           max={3}
           step={0.1}
           value={zoom}
           onChange={handleZoomChange}
-          className={classes.zoomControl}
+          wrapperClassName={classes.zoomControl}
-          aria-label={intl.formatMessage(zoomLabel)}
+          inputPlacement='inline-end'
         />
         <Button onClick={onCancel} secondary>
           <FormattedMessage
@@ -352,7 +363,8 @@ const StepAlt: FC<{
   imageBlob: Blob;
   onCancel: () => void;
   onComplete: (altText: string) => void;
-}> = ({ imageBlob, onCancel, onComplete }) => {
+  location: ImageLocation;
+}> = ({ imageBlob, onCancel, onComplete, location }) => {
   const [altText, setAltText] = useState('');
 
   const handleComplete = useCallback(() => {
@@ -367,6 +379,7 @@ const StepAlt: FC<{
         imageSrc={imageSrc}
         altText={altText}
         onChange={setAltText}
+        hideTip={location === 'header'}
       />
 
       <div className={classes.cropActions}>

app/javascript/mastodon/features/account_edit/modals/profile_display_modal.tsx

@@ -62,24 +62,26 @@ export const ProfileDisplayModal: FC<DialogModalProps> = ({ onClose }) => {
           }
         />
 
-        <ToggleField
+        {profile.showMedia && (
-          checked={profile.showMediaReplies}
+          <ToggleField
-          onChange={handleToggleChange}
+            checked={profile.showMediaReplies}
-          disabled={!profile.showMedia || isPending}
+            onChange={handleToggleChange}
-          name='show_media_replies'
+            disabled={isPending}
-          label={
+            name='show_media_replies'
-            <FormattedMessage
+            label={
-              id='account_edit.profile_tab.show_media_replies.title'
+              <FormattedMessage
-              defaultMessage='Include replies on ‘Media’ tab'
+                id='account_edit.profile_tab.show_media_replies.title'
-            />
+                defaultMessage='Include replies on ‘Media’ tab'
-          }
+              />
-          hint={
+            }
-            <FormattedMessage
+            hint={
-              id='account_edit.profile_tab.show_media_replies.description'
+              <FormattedMessage
-              defaultMessage='When enabled, Media tab shows both your posts and replies to other people’s posts.'
+                id='account_edit.profile_tab.show_media_replies.description'
-            />
+                defaultMessage='When enabled, Media tab shows both your posts and replies to other people’s posts.'
-          }
+              />
-        />
+            }
+          />
+        )}
 
         <ToggleField
           checked={profile.showFeatured}

app/javascript/mastodon/features/account_edit/modals/styles.module.scss

@@ -113,10 +113,14 @@
   gap: 8px;
   align-items: center;
   justify-content: flex-end;
+}
 
-  .zoomControl {
+.zoomControl {
+  margin-right: auto;
+  font-size: 13px;
+
+  input {
     width: min(100%, 200px);
-    margin-right: auto;
   }
 }
 
@@ -128,10 +132,6 @@
   border-radius: var(--avatar-border-radius);
 }
 
-.altCounter {
-  color: var(--color-text-secondary);
-}
-
 .altHint {
   ul {
     padding-left: 1em;

app/javascript/mastodon/features/account_edit/styles.module.scss

@@ -53,6 +53,16 @@
   }
 }
 
+.fieldButtons {
+  display: flex;
+  gap: 8px;
+  align-items: end;
+
+  @container (width < 500px) {
+    flex-direction: column;
+  }
+}
+
 .field {
   padding: 12px 0;
   display: flex;
@@ -87,7 +97,8 @@
 }
 
 .autoComplete,
-.tagSuggestions {
+.tagSuggestions,
+.maxTagsWarning {
   margin: 12px 0;
 }
 

app/javascript/mastodon/features/account_timeline/components/number_fields.tsx

@@ -91,28 +91,24 @@ const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
       </li>
 
       <li>
+        <FormattedMessage id='account.followers' defaultMessage='Followers' />
         <NavLink
           exact
           to={`/@${account.acct}/followers`}
           title={intl.formatNumber(account.followers_count)}
         >
-          <FormattedMessage id='account.followers' defaultMessage='Followers' />
+          <ShortNumber value={account.followers_count} />
-          <strong>
-            <ShortNumber value={account.followers_count} />
-          </strong>
         </NavLink>
       </li>
 
       <li>
+        <FormattedMessage id='account.following' defaultMessage='Following' />
         <NavLink
           exact
           to={`/@${account.acct}/following`}
           title={intl.formatNumber(account.following_count)}
         >
-          <FormattedMessage id='account.following' defaultMessage='Following' />
+          <ShortNumber value={account.following_count} />
-          <strong>
-            <ShortNumber value={account.following_count} />
-          </strong>
         </NavLink>
       </li>
 

app/javascript/mastodon/features/account_timeline/components/redesign.module.scss

@@ -320,23 +320,22 @@ svg.badgeIcon {
     }
   }
 
-  a {
+  a,
-    color: inherit;
-    font-weight: unset;
-    padding: 0;
-
-    &:hover,
-    &:focus {
-      color: var(--color-text-brand-soft);
-    }
-  }
-
   strong {
     display: block;
     font-weight: 600;
     color: var(--color-text-primary);
     font-size: 15px;
   }
+
+  a {
+    padding: 0;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
 }
 
 .modalCloseButton {

app/javascript/mastodon/locales/en-GB.json

@@ -210,7 +210,7 @@
   "account_edit.verified_modal.step2.header": "Add your website as a custom field",
   "account_edit.verified_modal.title": "How to add a verified link",
   "account_edit_tags.add_tag": "Add #{tagName}",
-  "account_edit_tags.column_title": "Edit featured hashtags",
+  "account_edit_tags.column_title": "Edit Tags",
   "account_edit_tags.help_text": "Featured hashtags help users discover and interact with your profile. They appear as filters on your Profile page’s Activity view.",
   "account_edit_tags.search_placeholder": "Enter a hashtag…",
   "account_edit_tags.suggestions": "Suggestions:",

app/javascript/mastodon/locales/en.json

@@ -141,34 +141,39 @@
   "account.unmute": "Unmute @{name}",
   "account.unmute_notifications_short": "Unmute notifications",
   "account.unmute_short": "Unmute",
+  "account_edit.bio.edit_label": "Edit bio",
+  "account_edit.bio.label": "bio",
   "account_edit.bio.placeholder": "Add a short introduction to help others identify you.",
   "account_edit.bio.title": "Bio",
   "account_edit.bio_modal.add_title": "Add bio",
   "account_edit.bio_modal.edit_title": "Edit bio",
-  "account_edit.button.add": "Add {item}",
-  "account_edit.button.delete": "Delete {item}",
-  "account_edit.button.edit": "Edit {item}",
   "account_edit.column_button": "Done",
   "account_edit.column_title": "Edit Profile",
-  "account_edit.custom_fields.name": "field",
+  "account_edit.custom_fields.add_label": "Add field",
+  "account_edit.custom_fields.edit_label": "Edit field",
   "account_edit.custom_fields.placeholder": "Add your pronouns, external links, or anything else you’d like to share.",
   "account_edit.custom_fields.reorder_button": "Reorder fields",
   "account_edit.custom_fields.tip_content": "You can easily add credibility to your Mastodon account by verifying links to any websites you own.",
   "account_edit.custom_fields.tip_title": "Tip: Adding verified links",
   "account_edit.custom_fields.title": "Custom fields",
   "account_edit.custom_fields.verified_hint": "How do I add a verified link?",
+  "account_edit.display_name.add_label": "Add display name",
+  "account_edit.display_name.edit_label": "Edit display name",
   "account_edit.display_name.placeholder": "Your display name is how your name appears on your profile and in timelines.",
   "account_edit.display_name.title": "Display name",
-  "account_edit.featured_hashtags.item": "hashtags",
+  "account_edit.featured_hashtags.edit_label": "Add hashtags",
   "account_edit.featured_hashtags.placeholder": "Help others identify, and have quick access to, your favorite topics.",
   "account_edit.featured_hashtags.title": "Featured hashtags",
+  "account_edit.field_actions.delete": "Delete field",
+  "account_edit.field_actions.edit": "Edit field",
   "account_edit.field_delete_modal.confirm": "Are you sure you want to delete this custom field? This action can’t be undone.",
   "account_edit.field_delete_modal.delete_button": "Delete",
   "account_edit.field_delete_modal.title": "Delete custom field?",
   "account_edit.field_edit_modal.add_title": "Add custom field",
+  "account_edit.field_edit_modal.discard_confirm": "Discard",
+  "account_edit.field_edit_modal.discard_message": "You have unsaved changes. Are you sure you want to discard them?",
   "account_edit.field_edit_modal.edit_title": "Edit custom field",
-  "account_edit.field_edit_modal.limit_header": "Recommended character limit exceeded",
+  "account_edit.field_edit_modal.limit_warning": "Recommended character limit exceeded. Mobile users might not see your field in full.",
-  "account_edit.field_edit_modal.limit_message": "Mobile users might not see your field in full.",
   "account_edit.field_edit_modal.link_emoji_warning": "We recommend against the use of custom emoji in combination with urls. Custom fields containing both will display as text only instead of as a link, in order to prevent user confusion.",
   "account_edit.field_edit_modal.name_hint": "E.g. “Personal website”",
   "account_edit.field_edit_modal.name_label": "Label",
@@ -197,6 +202,8 @@
   "account_edit.image_edit.alt_edit_button": "Edit alt text",
   "account_edit.image_edit.remove_button": "Remove image",
   "account_edit.image_edit.replace_button": "Replace image",
+  "account_edit.item_list.delete": "Delete {name}",
+  "account_edit.item_list.edit": "Edit {name}",
   "account_edit.name_modal.add_title": "Add display name",
   "account_edit.name_modal.edit_title": "Edit display name",
   "account_edit.profile_tab.button_label": "Customize",
@@ -219,8 +226,10 @@
   "account_edit.upload_modal.step_upload.dragging": "Drop to upload",
   "account_edit.upload_modal.step_upload.header": "Choose an image",
   "account_edit.upload_modal.step_upload.hint": "WEBP, PNG, GIF or JPG format, up to {limit}MB.{br}Image will be scaled to {width}x{height}px.",
-  "account_edit.upload_modal.title_add": "Add profile photo",
+  "account_edit.upload_modal.title_add.avatar": "Add profile photo",
-  "account_edit.upload_modal.title_replace": "Replace profile photo",
+  "account_edit.upload_modal.title_add.header": "Add cover photo",
+  "account_edit.upload_modal.title_replace.avatar": "Replace profile photo",
+  "account_edit.upload_modal.title_replace.header": "Replace cover photo",
   "account_edit.verified_modal.details": "Add credibility to your Mastodon profile by verifying links to personal websites. Here’s how it works:",
   "account_edit.verified_modal.invisible_link.details": "Add the link to your header. The important part is rel=\"me\" which prevents impersonation on websites with user-generated content. You can even use a link tag in the header of the page instead of {tag}, but the HTML must be accessible without executing JavaScript.",
   "account_edit.verified_modal.invisible_link.summary": "How do I make the link invisible?",
@@ -229,8 +238,9 @@
   "account_edit.verified_modal.step2.header": "Add your website as a custom field",
   "account_edit.verified_modal.title": "How to add a verified link",
   "account_edit_tags.add_tag": "Add #{tagName}",
-  "account_edit_tags.column_title": "Edit featured hashtags",
+  "account_edit_tags.column_title": "Edit Tags",
   "account_edit_tags.help_text": "Featured hashtags help users discover and interact with your profile. They appear as filters on your Profile page’s Activity view.",
+  "account_edit_tags.max_tags_reached": "You have reached the maximum number of featured hashtags.",
   "account_edit_tags.search_placeholder": "Enter a hashtag…",
   "account_edit_tags.suggestions": "Suggestions:",
   "account_edit_tags.tag_status_count": "{count, plural, one {# post} other {# posts}}",