Angular路由跳转后焦点未定位至页面主体的问题求助

问题原因 #

单页应用路由切换属于页面局部更新，浏览器不会像刷新页面那样自动将焦点重置到内容区域，导致首次按Tab时焦点会跳到浏览器搜索栏等外部元素，这是SPA场景下常见的无障碍适配问题。

解决方案 #

通过监听Angular路由导航完成事件，手动将焦点定位到页面顶部的无障碍锚点或首个可聚焦元素，模拟页面刷新时的焦点行为。

步骤1：修改父组件代码

在RentalContractsPageComponent中注入Router和ElementRef，监听路由导航结束事件并设置焦点：

import { Component, OnInit, ElementRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-rental-contracts-page',
  template: `
    <!-- 无障碍隐藏锚点，作为路由跳转后的焦点目标 -->
    <a #focusAnchor class="sr-only" tabindex="-1"></a>
    <router-outlet></router-outlet>
  `,
  host: {
    class:'lc-grid__item--wrapper'
  }
})
export class RentalContractsPageComponent implements OnInit {

  constructor(
    private router: Router,
    private el: ElementRef
  ) { }

  ngOnInit() {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 定位到隐藏锚点并设置焦点
      const focusAnchor = this.el.nativeElement.querySelector('#focusAnchor');
      if (focusAnchor) {
        focusAnchor.focus();
      }
    });
  }

}

步骤2：添加隐藏锚点样式（推荐）

在全局样式或组件样式中添加无障碍隐藏类，确保锚点不可见但可被聚焦：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

替代方案：聚焦到页面首个可聚焦元素

如果不想添加隐藏锚点，也可以直接查找页面内第一个可聚焦元素（如按钮、输入框等）：

// 替换NavigationEnd回调中的代码
const firstFocusable = this.el.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (firstFocusable) {
  firstFocusable.focus();
}

原理说明 #

路由跳转完成后手动设置焦点，相当于模拟了页面刷新时浏览器的默认焦点行为，确保视障用户通过Tab键能从页面内容区域开始导航，符合WCAG无障碍规范。

内容的提问来源于stack exchange，提问作者Hager Khaled