Closed Bug 1676710 Opened 3 years ago Closed 11 months ago

Table with visually hidden heading row does not announce headings via VoiceOver

Categories

(Core :: Disability Access APIs, defect)

Firefox 83
Desktop
All
defect

Tracking

()

VERIFIED FIXED
113 Branch
Tracking Status
firefox83 --- wontfix
firefox84 --- wontfix
firefox113 --- verified
firefox114 --- verified
firefox115 --- verified

People

(Reporter: web, Unassigned)

References

(Blocks 1 open bug)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:83.0) Gecko/20100101 Firefox/83.0

Steps to reproduce:

Consider this code pen:

https://codepen.io/bennyp/pen/ZEOmgMZ

<template id="table-tpl">
  <table>
    <thead>
      <tr part="column-headings">
        <th part="column name first">Name</th>
        <th part="column city">City</th>
        <th part="column countryCode">Country</th>
        <th part="column carbonFootprint last">TCO₂ (all-time)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row" data-id="site-m002">
        <td part="cell data name site-m002 first">
          <span>ABCD-D (UK)</span>
        </td>
        <td part="cell data city site-m002">London</td>
        <td part="cell data countryCode site-m002">🇬🇧</td>
        <td part="cell data carbonFootprint site-m002 last">12,828</td>
      </tr>
      <tr class="row" data-id="site-m001">
        <td part="cell data name site-m001 first">
          <span>ABCD-B (UK)</span> 
        </td>
        <td part="cell data city site-m001">London</td>
        <td part="cell data countryCode site-m001">🇬🇧</td>
        <td part="cell data carbonFootprint site-m001 last">0</td>
      </tr>
    </tbody>
  </table>
</template>

<main>
  
  <section id="light">
    <h2>Example: Light DOM with normal headings</h2>
  </section>

  <section id="hidden">
    <h2>Example: Light DOM with visually headings</h2>
  </section>
  
  <section id="shadow">
    <h2>Example: Shadow DOM with visually hidden headings</h2>
    <shadow-table></shadow-table>
  </section>

<style>
/* a11y hack */
#hidden [part="column-headings"],
shadow-table::part(column-headings) {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
</style>

<script>
document.getElementById('light')
  .append(document.getElementById('table-tpl').content.cloneNode(true));

document.getElementById('hidden')
  .append(document.getElementById('table-tpl').content.cloneNode(true));

customElements.define('shadow-table', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).append(document.getElementById('table-tpl').content.cloneNode(true));
  }
});
</script>


Actual results:

When navigating the table, VoiceOver announces the table headings row for Example 1, but skips over the (visually hidden) table headings in examples 2 and 3


Expected results:

VoiceOver should have announced the visually hidden table headings in all three examples, and this is the behaviour in Chrome, although Safari exhibits the same behaviour as FireFox

A few things here, I Was able to reproduce this issue easily in Nightly using the Voice Over on MacOS but in Beta 83 I was only able to select that table by accident where I noticed that the issue occurs there as well but for Release I just cant reach those tables or select them with any commands, Im not sure how I should update the flag for the Release version.

I was also using NVDA on Windows but that only works If I move my mouse cursor over any visible text, any hidden headings would not work on Windows.

If someone can provide a test page with a table that has hidden titles and can be reached in Release and Beta , I would be more than happy to test there as well.

Status: UNCONFIRMED → NEW
Component: Untriaged → Disability Access APIs
Ever confirmed: true
OS: Unspecified → macOS
Product: Firefox → Core
Hardware: Unspecified → Desktop

Jamie, quick analysis shows that NVDA is theoretically able to traverse all three tables in full sequentially using the virtual cursor, but when using table navigation commands, there is no way to get from row 2 up to row 1. Also, when traversing columns using table navigation commands in examples 2 and 3, the column headers are not read.

This is a more general problem than just Mac, so setting operating system to all. The column header accessibles are there, and they have text leaves, but no names.

Flags: needinfo?(jteh)
OS: macOS → All

The table rows end up with display: block because they're being repositioned, so we probably use ARIARowAccessible and ARIAGridCellAccessible internally. ARIA Table accessibles and HTML table accessibles don't play together nicely, thus the breakage. Unfortunately, I think we're only going to see more and more of this kind of breakage going forward... and I think the only fix is to stop relying on layout for HTML tables and converge on a single implementation done purely in the a11y engine.

Blocks: tablea11y
Severity: -- → S3
Flags: needinfo?(jteh)
Depends on: 1686391

This is resolved by Cache the World, which is enabled by default in Firefox 113.

Status: NEW → RESOLVED
Closed: 11 months ago
Resolution: --- → FIXED

This issue is Verified as fixed in our latest Release, Beta and Nightly Builds.

Target Milestone: --- → 113 Branch

Updating the Main status flag.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.