开发Azure扩展时Ibiza框架清理tabindex问题求助

我之前开发Azure Portal扩展时也碰到过一模一样的问题——Ibiza的安全DOM清理机制会自动过滤掉tabindex这类属性，尤其是直接插入HTML字符串的场景。下面是几个我亲测有效的解决办法，你可以根据自己的开发场景选择：

1. 通过React组件直接声明tabindex（推荐） #

如果你的扩展是用React构建的（这是Ibiza扩展的主流开发方式），别直接在HTML模板里写tabindex，而是在React元素上直接设置这个属性：

<div tabindex={0} role="button" onClick={handleClick}>
  可聚焦的自定义元素
</div>

Ibiza的清理机制主要针对未经框架处理的原始HTML字符串，而React是通过虚拟DOM同步到真实DOM的，这种方式下的属性会被框架正确识别并保留，不会被过滤。

2. 配置Sanitizer白名单（针对原生HTML场景） #

如果你必须通过dangerouslySetInnerHTML或者其他方式插入原始HTML字符串，那需要把tabindex添加到Ibiza sanitizer的允许属性列表里。在扩展初始化的代码中（比如init函数里）添加这段配置：

import * as MsPortalFx from "MsPortalFx";

// 一定要在UI渲染前执行这个配置
MsPortalFx.Configuration.Sanitizer.allowedAttributes.push("tabindex");

这样sanitizer处理HTML时就会保留tabindex属性了，注意必须在渲染UI之前完成配置，否则不会生效。

3. 改用Ibiza内置的无障碍组件 #

如果你的div是用来实现可交互功能（比如按钮、导航项），其实完全没必要自己手动设置tabindex——Ibiza提供了一系列符合Azure Portal无障碍标准的内置组件，比如Controls.Button、Controls.Link等，这些组件已经内置了正确的tabindex和role属性，既能保证功能正常，又能和Portal的风格统一：

import { Controls } from "MsPortalFx";

<Controls.Button onClick={handleClick} text="内置按钮组件" />

小提示 #

设置tabindex的时候尽量遵循无障碍最佳实践：

• 使用tabindex={0}让元素按照DOM顺序参与键盘焦点导航
• 使用tabindex={-1}让元素可以通过JavaScript聚焦，但不参与默认的键盘导航顺序
• 避免设置大于0的tabindex，这会打乱默认的焦点顺序，影响无障碍体验

内容的提问来源于stack exchange，提问作者Himanshu Lilha