The first section in main doesn't come to landmarks

kelbitskaya commented 3 years ago

Steps to reproduce:

Create simple layout such as:

<html lang="en-US" dir="ltr">
<head>
<title>Test page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="">

<header>Header</header>
<main>
  <section aria-label="Section">My section</section>
</main>
<footer>Footer</footer>
</body>
</html>

Where <section> should be first child in <main>.

Open Elements list in NVDA.
Observe landmarks tab

Actual behavior:

In case when <section> first child of <main>, it doesn't show in landmarks list.

Expected behavior:

In case when <section> first child of <main>, it should be shown in landmarks list.

System configuration

NVDA installed/portable/running from source:

NVDA version:

Windows version:

2021.1

Windows version:

10

Other information about your system:

Other comments

If <section> isn't first child of <main> (for example: when <section> is second child of <main>) landmarks includes <section>. Was checked next layout:

<html lang="en-US" dir="ltr"><head>
  <title>Test page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="">

  <header>Header</header>
  <main><h1>Title</h1>

      <section aria-label="Section">My section</section>
  </main>
  <footer>Footer</footer>
</body>
</html>

seanbudd commented 3 years ago

cc @feerrenrut Just to confirm - what browser and browser version is this issue occurring on?

kelbitskaya commented 3 years ago

cc @feerrenrut Just to confirm - what browser and browser version is this issue occurring on?

I checked this behavior in next browsers Win10 + IE11 Win10 + Edge Win10 + Chrome 89 Win10 + Firefox 90

UncleJart commented 2 years ago

This issue is also reproduced for first landmark inside footer element (content info role), it also does not matter if landmark is direct child or nested inside any number of containers.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Landmarks test</title>
  </head>
  <body>
    <main>
      <div>
        <section aria-label="First section">Content</section>
      </div>
      <p>Paragraph</p>
      <div>
        <section aria-label="Second section">Content</section>
      </div>
    </main>
    <footer>
      <div>
        <nav aria-label="First">
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </nav>
      </div>
      <div>
        <nav aria-label="Second">
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </nav>
      </div>
    </footer>
  </body>
</html>

2022-04-14_11h40_22

Tested on Windows 10 21H2, NVDA 2021.3.5 in:

Google Chrome 100.0.4896.75
Mozilla Firefox 99.0.1
Microsoft Edge 100.0.1185.39
Internet Explorer 11

It should also be mentioned that all landmarks are accessible by using NVDA keyboard shortcuts D and Shift + D

Abdull commented 2 years ago

I can confirm this issue still exists with NVDA version 2022.1.

I also noticed that empty landmarks in general don't create any entries in the NVDA landmark outline (tested with Chrome 102.0.5005.63 and Firefox 100.0.2 on Windows 10):

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Test page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <header aria-label="Header label">Header</header>
    <main aria-label="Main label" role="main"></main>
    <footer aria-label="Footer label" role="contentinfo"></footer>
  </body>
</html>

screenshot of NVDA browse mode elements landmark list (NVDA+F7) for previous HTML document. It incorrectly lists only the landmark "Header label; Banner" (German locale), the header and main landmarks are missing

I tried a workaround for older Safari versions recommended by mdn for <footer> elements, but this still did not expose the empty landmarks to the NVDA landmarks outline.

Maybe related, the WebKit issue tracker mentions a similar bug.

feerrenrut commented 2 years ago

We can reproduce this. Using Code pen

sulyok-daniel commented 3 months ago

Issue still exists in NVDA 2022.3.1, tested in Edge 126.0.2592.81 (win 11). First <nav> inside <footer> is not displayed in elements list if it's the first non-hidden content inside footer. As soon as any type of content is added before, the nav is listed correctly in elements list.

Adriani90 commented 3 months ago

Is it also occuring with NVDA 2024.2 stable or 2024.3 Beta?

sulyok-daniel commented 3 months ago

Same behaviour after update to NVDA 2024.2.

brianhrowe commented 1 week ago

It definitely seems to be the case for any landmark nested inside another. Nav inside of a header or footer, for example, seems to be a pretty common pattern that doesn't get displayed in the elements list.

nvaccess / nvda