Add "skip to content", "skip to navigation" links (#38006)

app/javascript/mastodon/components/column_back_button.tsx

@@ -4,8 +4,11 @@ import { FormattedMessage } from 'react-intl';
 
 import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
 import { Icon } from 'mastodon/components/icon';
+import { getColumnSkipLinkId } from 'mastodon/features/ui/components/skip_links';
 import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
 
+import { useColumnIndexContext } from '../features/ui/components/columns_area';
+
 import { useAppHistory } from './router';
 
 type OnClickCallback = () => void;
@@ -28,9 +31,15 @@ export const ColumnBackButton: React.FC<{ onClick?: OnClickCallback }> = ({
   onClick,
 }) => {
   const handleClick = useHandleClick(onClick);
+  const columnIndex = useColumnIndexContext();
 
   const component = (
-    <button onClick={handleClick} className='column-back-button' type='button'>
+    <button
+      onClick={handleClick}
+      id={getColumnSkipLinkId(columnIndex)}
+      className='column-back-button'
+      type='button'
+    >
       <Icon
         id='chevron-left'
         icon={ArrowBackIcon}

app/javascript/mastodon/components/column_header.tsx

@@ -16,6 +16,9 @@ import { Icon } from 'mastodon/components/icon';
 import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
 import { useIdentity } from 'mastodon/identity_context';
 
+import { useColumnIndexContext } from '../features/ui/components/columns_area';
+import { getColumnSkipLinkId } from '../features/ui/components/skip_links';
+
 import { useAppHistory } from './router';
 
 export const messages = defineMessages({
@@ -33,10 +36,11 @@ export const messages = defineMessages({
 });
 
 const BackButton: React.FC<{
-  onlyIcon: boolean;
-}> = ({ onlyIcon }) => {
+  hasTitle: boolean;
+}> = ({ hasTitle }) => {
   const history = useAppHistory();
   const intl = useIntl();
+  const columnIndex = useColumnIndexContext();
 
   const handleBackClick = useCallback(() => {
     if (history.location.state?.fromMastodon) {
@@ -50,8 +54,9 @@ const BackButton: React.FC<{
     <button
       onClick={handleBackClick}
       className={classNames('column-header__back-button', {
-        compact: onlyIcon,
+        compact: hasTitle,
       })}
+      id={!hasTitle ? getColumnSkipLinkId(columnIndex) : undefined}
       aria-label={intl.formatMessage(messages.back)}
       type='button'
     >
@@ -60,7 +65,7 @@ const BackButton: React.FC<{
         icon={ArrowBackIcon}
         className='column-back-button__icon'
       />
-      {!onlyIcon && (
+      {!hasTitle && (
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       )}
     </button>
@@ -221,7 +226,7 @@ export const ColumnHeader: React.FC<Props> = ({
     !pinned &&
     ((multiColumn && history.location.state?.fromMastodon) || showBackButton)
   ) {
-    backButton = <BackButton onlyIcon={!!title} />;
+    backButton = <BackButton hasTitle={!!title} />;
   }
 
   const collapsedContent = [extraContent];
@@ -260,6 +265,7 @@ export const ColumnHeader: React.FC<Props> = ({
   const hasIcon = icon && iconComponent;
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   const hasTitle = (hasIcon || backButton) && title;
+  const columnIndex = useColumnIndexContext();
 
   const component = (
     <div className={wrapperClassName}>
@@ -272,6 +278,7 @@ export const ColumnHeader: React.FC<Props> = ({
               onClick={handleTitleClick}
               className='column-header__title'
               type='button'
+              id={getColumnSkipLinkId(columnIndex)}
             >
               {!backButton && hasIcon && (
                 <Icon