Screenreader focus escapes active subNavigation overlay in mobile DBHeader

[d-koppenhagen]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

When using the <DBNavigationItem> component with a subNavigation in the secondaryAction of <DBHeader>, there is a focus management issue in the mobile view:
If a sub-navigation overlay is open, screenreader and keyboard focus do not remain trapped within the visible overlay. Instead, it is possible to navigate with screenreader or keyboard to background navigation items that are visually hidden behind the overlay. This allows users to access hidden elements that should not be focusable at this point.

Reproduction link:

https://stackblitz.com/edit/db-ux-design-system-examples-buxxqega?file=src%2FApp.tsx,src%2FPageHeader.tsx

Minimal reproduction code:

import { useState } from 'react';
import {
  DBHeader,
  DBNavigation,
  DBNavigationItem,
} from '@db-ux/react-core-components';

const PageHeader = () => {
  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);

  return (
    <DBHeader
      forceMobile="true"
      burgerMenuLabel="Navigation anzeigen"
      closeButtonText="Schließen"
      drawerOpen={drawerOpen}
      onToggle={setDrawerOpen}
      secondaryAction={
        <DBNavigation>
          <DBNavigationItem
            subNavigation={
              <>
                <DBNavigationItem>
                  <a href="#">Subitem A</a>
                </DBNavigationItem>
                <DBNavigationItem>
                  <a href="#">Subitem B</a>
                </DBNavigationItem>
              </>
            }
          >
            Feature A
          </DBNavigationItem>
        </DBNavigation>
      }
    >
      <DBNavigation>
        <DBNavigationItem>
          <a href="#">Page 1</a>
        </DBNavigationItem>
        <DBNavigationItem>
          <a href="#">Page 2</a>
        </DBNavigationItem>
      </DBNavigation>
    </DBHeader>
  );
};

export default PageHeader;

Expected Behaviour

When a sub-navigation overlay is open in mobile view, the keyboard and screenreader focus should be strictly trapped within the overlay. Any navigation items or links visually hidden behind the overlay must not be accessible via keyboard or screenreader until the sub-navigation overlay is closed.

Screenshots

Browser version

None

Add any other context about the problem here.

This bug impacts accessibility for screenreader and keyboard users. When focus is not properly trapped in overlays, users can access content that should be temporarily inaccessible, leading to confusion and compliance issues. A proper focus trap for overlays/sub-navigations should be considered.

Which DB business unit do you work for?

DB Systel GmbH (please name your customer below)

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

DB InfraGo

What project are you working on?

Mobilty4All

[nmerget]

We started to refactor the DBHeader and DBNavigation here.

But in this case: The DBNavigation shouldn't be used as child inside secondaryAction.
It was only tested as a "main" navigation.

If you want to have some navigation inside secondaryAction you should implement it by yourself. You could use DBPopover for this. Or you could use details and summary with db-button class and a DBCard inside summary. Or you could use the popover API with anchor positioning.

[d-koppenhagen]

The problem also occurs when the items are not put in secondaryAction. The problem is the same: The focus is probably behind the visible overlay within the drawer (I prepared a second playground for this example).

Attached you'll find a record I made. Please notice the voice over output and focussed elements. Also I actived keycastr app, so pressed keys are shown in the bottom left corner.

Bildschirmaufnahme.2026-01-23.um.13.41.28.mov