Merge commit '19626ad89f66a32a3ddecb4f43a7b84e3236d287' into glitch-soc/merge-upstream

2025-07-21 21:19:53 +02:00
commit 4bc361546e
@@ -122,98 +122,93 @@ export const PolicyControls: React.FC = () => {
          value={notificationPolicy.for_not_following}
          onChange={handleFilterNotFollowing}
          options={options}
-        >
-          <strong>
+          label={
            <FormattedMessage
              id='notifications.policy.filter_not_following_title'
              defaultMessage="People you don't follow"
            />
-          </strong>
-          <span className='hint'>
+          }
+          hint={
            <FormattedMessage
              id='notifications.policy.filter_not_following_hint'
              defaultMessage='Until you manually approve them'
            />
-          </span>
-        </SelectWithLabel>
+          }
+        />

        <SelectWithLabel
          value={notificationPolicy.for_not_followers}
          onChange={handleFilterNotFollowers}
          options={options}
-        >
-          <strong>
+          label={
            <FormattedMessage
              id='notifications.policy.filter_not_followers_title'
              defaultMessage='People not following you'
            />
-          </strong>
-          <span className='hint'>
+          }
+          hint={
            <FormattedMessage
              id='notifications.policy.filter_not_followers_hint'
              defaultMessage='Including people who have been following you fewer than {days, plural, one {one day} other {# days}}'
              values={{ days: 3 }}
            />
-          </span>
-        </SelectWithLabel>
+          }
+        />

        <SelectWithLabel
          value={notificationPolicy.for_new_accounts}
          onChange={handleFilterNewAccounts}
          options={options}
-        >
-          <strong>
+          label={
            <FormattedMessage
              id='notifications.policy.filter_new_accounts_title'
              defaultMessage='New accounts'
            />
-          </strong>
-          <span className='hint'>
+          }
+          hint={
            <FormattedMessage
              id='notifications.policy.filter_new_accounts.hint'
              defaultMessage='Created within the past {days, plural, one {one day} other {# days}}'
              values={{ days: 30 }}
            />
-          </span>
-        </SelectWithLabel>
+          }
+        />

        <SelectWithLabel
          value={notificationPolicy.for_private_mentions}
          onChange={handleFilterPrivateMentions}
          options={options}
-        >
-          <strong>
+          label={
            <FormattedMessage
              id='notifications.policy.filter_private_mentions_title'
              defaultMessage='Unsolicited private mentions'
            />
-          </strong>
-          <span className='hint'>
+          }
+          hint={
            <FormattedMessage
              id='notifications.policy.filter_private_mentions_hint'
              defaultMessage="Filtered unless it's in reply to your own mention or if you follow the sender"
            />
-          </span>
-        </SelectWithLabel>
+          }
+        />

        <SelectWithLabel
          value={notificationPolicy.for_limited_accounts}
          onChange={handleFilterLimitedAccounts}
          options={options}
-        >
-          <strong>
+          label={
            <FormattedMessage
              id='notifications.policy.filter_limited_accounts_title'
              defaultMessage='Moderated accounts'
            />
-          </strong>
-          <span className='hint'>
+          }
+          hint={
            <FormattedMessage
              id='notifications.policy.filter_limited_accounts_hint'
              defaultMessage='Limited by server moderators'
            />
-          </span>
-        </SelectWithLabel>
+          }
+        />
      </div>
    </section>
  );
@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import { useCallback, useState, useRef } from 'react';
+import { useCallback, useState, useRef, useId } from 'react';

 import classNames from 'classnames';

@@ -16,6 +16,8 @@ interface DropdownProps {
  options: SelectItem[];
  disabled?: boolean;
  onChange: (value: string) => void;
+  'aria-labelledby': string;
+  'aria-describedby'?: string;
  placement?: Placement;
 }

@@ -24,51 +26,33 @@ const Dropdown: React.FC<DropdownProps> = ({
  options,
  disabled,
  onChange,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
  placement: initialPlacement = 'bottom-end',
 }) => {
-  const activeElementRef = useRef<Element | null>(null);
-  const containerRef = useRef(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
  const [isOpen, setOpen] = useState<boolean>(false);
  const [placement, setPlacement] = useState<Placement>(initialPlacement);
-
-  const handleToggle = useCallback(() => {
-    if (
-      isOpen &&
-      activeElementRef.current &&
-      activeElementRef.current instanceof HTMLElement
-    ) {
-      activeElementRef.current.focus({ preventScroll: true });
-    }
-
-    setOpen(!isOpen);
-  }, [isOpen, setOpen]);
-
-  const handleMouseDown = useCallback(() => {
-    if (!isOpen) activeElementRef.current = document.activeElement;
-  }, [isOpen]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      switch (e.key) {
-        case ' ':
-        case 'Enter':
-          if (!isOpen) activeElementRef.current = document.activeElement;
-          break;
-      }
-    },
-    [isOpen],
-  );
+  const uniqueId = useId();
+  const menuId = `${uniqueId}-menu`;
+  const buttonLabelId = `${uniqueId}-button`;

  const handleClose = useCallback(() => {
-    if (
-      isOpen &&
-      activeElementRef.current &&
-      activeElementRef.current instanceof HTMLElement
-    )
-      activeElementRef.current.focus({ preventScroll: true });
+    if (isOpen && buttonRef.current) {
+      buttonRef.current.focus({ preventScroll: true });
+    }
    setOpen(false);
  }, [isOpen]);

+  const handleToggle = useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      setOpen(true);
+    }
+  }, [isOpen, handleClose]);
+
  const handleOverlayEnter = useCallback(
    (state: Partial<PopperState>) => {
      if (state.placement) setPlacement(state.placement);
@@ -82,13 +66,18 @@ const Dropdown: React.FC<DropdownProps> = ({
    <div ref={containerRef}>
      <button
        type='button'
+        ref={buttonRef}
        onClick={handleToggle}
-        onMouseDown={handleMouseDown}
-        onKeyDown={handleKeyDown}
        disabled={disabled}
+        aria-expanded={isOpen}
+        aria-controls={menuId}
+        aria-labelledby={`${ariaLabelledBy} ${buttonLabelId}`}
+        aria-describedby={ariaDescribedBy}
        className={classNames('dropdown-button', { active: isOpen })}
      >
-        <span className='dropdown-button__label'>{valueOption?.text}</span>
+        <span id={buttonLabelId} className='dropdown-button__label'>
+          {valueOption?.text}
+        </span>
        <Icon id='down' icon={ArrowDropDownIcon} />
      </button>

@@ -101,7 +90,7 @@ const Dropdown: React.FC<DropdownProps> = ({
        popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }}
      >
        {({ props, placement }) => (
-          <div {...props}>
+          <div {...props} id={menuId}>
            <div
              className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}
            >
@@ -123,6 +112,8 @@ const Dropdown: React.FC<DropdownProps> = ({
 interface Props {
  value: string;
  options: SelectItem[];
+  label: string | React.ReactElement;
+  hint: string | React.ReactElement;
  disabled?: boolean;
  onChange: (value: string) => void;
 }
@@ -130,13 +121,26 @@ interface Props {
 export const SelectWithLabel: React.FC<PropsWithChildren<Props>> = ({
  value,
  options,
+  label,
+  hint,
  disabled,
-  children,
  onChange,
 }) => {
+  const uniqueId = useId();
+  const labelId = `${uniqueId}-label`;
+  const descId = `${uniqueId}-desc`;
+
  return (
+    // This label is only used for its click-forwarding behaviour,
+    // accessible names are assigned manually
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
    <label className='app-form__toggle'>
-      <div className='app-form__toggle__label'>{children}</div>
+      <div className='app-form__toggle__label'>
+        <strong id={labelId}>{label}</strong>
+        <span className='hint' id={descId}>
+          {hint}
+        </span>
+      </div>

      <div className='app-form__toggle__toggle'>
        <div>
@@ -144,6 +148,8 @@ export const SelectWithLabel: React.FC<PropsWithChildren<Props>> = ({
            value={value}
            onChange={onChange}
            disabled={disabled}
+            aria-labelledby={labelId}
+            aria-describedby={descId}
            options={options}
          />
        </div>
@@ -617,7 +617,7 @@
  "notification.reblog": "{name} продвинул(а) ваш пост",
  "notification.reblog.name_and_others_with_link": "{name} и ещё <a>{count, plural, one {# пользователь} few {# пользователя} other {# пользователей}}</a> продвинули ваш пост",
  "notification.relationships_severance_event": "Разорвана связь с {name}",
-  "notification.relationships_severance_event.account_suspension": "Администратор сервера {from} заблокировал сервер {target}, поэтому вы больше не сможете получать обновления от людей с этого сервера или взаимодействовать с ними.",
+  "notification.relationships_severance_event.account_suspension": "Администратор сервера {from} заблокировал сервер {target}, поэтому вы больше не сможете получать обновления от людей с этого сервера и взаимодействовать с ними.",
  "notification.relationships_severance_event.domain_block": "Администратор сервера {from} заблокировал сервер {target}, где размещены учётные записи {followersCount} ваших подписчиков и {followingCount, plural, one {# пользователя, на которого вы подписаны} other {# пользователей, на которых вы подписаны}}.",
  "notification.relationships_severance_event.learn_more": "Узнать больше",
  "notification.relationships_severance_event.user_domain_block": "Вы заблокировали сервер {target}, где размещены учётные записи {followersCount} ваших подписчиков и {followingCount, plural, one {# пользователя, на которого вы подписаны} other {# пользователей, на которых вы подписаны}}.",
@@ -707,7 +707,7 @@
  "onboarding.profile.display_name": "Отображаемое имя",
  "onboarding.profile.display_name_hint": "Ваше полное имя или псевдоним…",
  "onboarding.profile.note": "О себе",
-  "onboarding.profile.note_hint": "Вы можете @упоминать других людей или использовать #хештеги…",
+  "onboarding.profile.note_hint": "Вы можете @упоминать других людей, а также использовать #хештеги…",
  "onboarding.profile.save_and_continue": "Сохранить и продолжить",
  "onboarding.profile.title": "Создайте свой профиль",
  "onboarding.profile.upload_avatar": "Загрузить фото профиля",
@@ -741,16 +741,16 @@
  "refresh": "Обновить",
  "regeneration_indicator.please_stand_by": "Пожалуйста, подождите.",
  "regeneration_indicator.preparing_your_home_feed": "Готовим вашу ленту…",
-  "relative_time.days": "{number} д",
+  "relative_time.days": "{number} д.",
  "relative_time.full.days": "{number, plural, one {# день} many {# дней} other {# дня}} назад",
  "relative_time.full.hours": "{number, plural, one {# час} many {# часов} other {# часа}} назад",
  "relative_time.full.just_now": "только что",
  "relative_time.full.minutes": "{number, plural, one {# минуту} many {# минут} other {# минуты}} назад",
  "relative_time.full.seconds": "{number, plural, one {# секунду} many {# секунд} other {# секунды}} назад",
-  "relative_time.hours": "{number} ч",
+  "relative_time.hours": "{number} ч.",
  "relative_time.just_now": "только что",
-  "relative_time.minutes": "{number} мин",
-  "relative_time.seconds": "{number} с",
+  "relative_time.minutes": "{number} мин.",
+  "relative_time.seconds": "{number} с.",
  "relative_time.today": "сегодня",
  "reply_indicator.attachments": "{count, plural, one {# вложение} few {# вложения} other {# вложений}}",
  "reply_indicator.cancel": "Отмена",
@@ -836,7 +836,7 @@
  "server_banner.is_one_of_many": "{domain} — это один из многих независимых серверов Mastodon, которые вы можете использовать, чтобы присоединиться к сети Fediverse.",
  "server_banner.server_stats": "Статистика сервера:",
  "sign_in_banner.create_account": "Зарегистрироваться",
-  "sign_in_banner.follow_anyone": "Подписывайтесь на кого угодно в федивёрсе и читайте ленту в хронологическом порядке. Никаких алгоритмов, рекламы или кликбейта.",
+  "sign_in_banner.follow_anyone": "Подписывайтесь на кого угодно в федивёрсе и читайте ленту в хронологическом порядке. Никаких алгоритмов, рекламы и кликбейта.",
  "sign_in_banner.mastodon_is": "Mastodon — лучший способ быть в курсе всего происходящего.",
  "sign_in_banner.sign_in": "Войти",
  "sign_in_banner.sso_redirect": "Вход/Регистрация",