Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

ObjectPage: tabIndex=0 set on first ObjectPageSection even for single-section layout causing WCAG 2.1.1 keyboard accessibility violation

未关闭
#9,080 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@Lukas742 已经在做这个了。

开始于 2026年10月23日。

  • #9093 来自 @Lukas742 —— 未关闭

评估

这个 Issue 还没有评估数据。

描述

Bug Description

When ObjectPage is used with a single ObjectPageSection, the component sets tabIndex=0 on that section after mount, making a non-interactive region focusable via the keyboard Tab key.

The library already handles the single section case — hasOnlySingleSection is calculated and used to hide the tab navigation bar. However, the tabIndex effect does not check hasOnlySingleSection and sets tabIndex=0 unconditionally. This is the roving tabindex pattern designed for navigating between multiple sections, which has no purpose when there is only one section.

This causes a WCAG 2.1.1 violation — a non-interactive

element appears as a wasted Tab stop in the keyboard tab order.

Affected Component

ObjectPage, ObjectPageSection

Expected Behaviour

When there is only one ObjectPageSection, the section should not be added to the keyboard Tab order. The tabIndex should remain -1 since there are no other sections to navigate between.

Isolated Example

No response

Steps to Reproduce
  1. Render an ObjectPage with a single ObjectPageSection
  2. Open the page in a browser
  3. Open DevTools and inspect the element with data-component-name="ObjectPageSection"
  4. Press Tab to navigate through the page
  5. Observe that the element receives keyboard focus and has tabindex="0" set on it
Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.27.2

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP Labs

Declaration
  • I’m not disclosing any internal or sensitive information.
主要语言
TypeScript
星标
541
派生
114
平均合并
21 小时 26 分钟
30 天内合并 PR
82

环境准备

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

UI5/webcomponents-react 的其他 Issue

查看 UI5/webcomponents-react 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。