Bugzilla

(In reply to James Teh [:Jamie] from comment #11)
> In all the stale bounds cases, are you able to confirm whether there is an ancestor element with CSS position: fixed or position: sticky? I'm guessing there is. If so, we'll deal with that part over in bug 1809836.

The global navigation bar (id 'global-nav' as of time of writing this) is a header element with property `position: fixed`; the buttons of the main menu bar are descendants of that element.

The buttons on the direct message panel, on the other hand, don't appear to have position: fixed or position: sticky in their ancestors. The button text has `position: absolute` and the buttons are `position: relative` in a footer, in a `position: static` form.

> > For LinkedIn notifications, a situation where NVDA reads "article link" but not the actual text leaf descendant of the link, the bounds appear correct.
> 
> It'd be interesting to know whether the text leaf has correct bounds. To do that, you'll need to find the link with the browse mode cursor, then use NVDA's move to first object inside command (desktop NVDA+numpad2, laptop NVDA+shift+downArrow). That should get the review cursor/navigator to the text leaf, which should then get highlighted.

So, I'm a bit confused about this one. The bounds that NVDA reports for the text leaf are identical in Nightly and in Stable, but only Stable actually reads the text out when I move the mouse cursor over it. For what it's worth, the bounds look incorrect to me in both, at least for the notifications that don't get read out in Nightly. They do not tightly bound the text; rather, the bounds are offset such that the top of the bounding rectangle sits at the bottom of where the text appears visually. For notifications that _are_ read out properly in Nightly, the bounding box on the text looks correct. I'm trying to narrow down the differences between the HTML, since they're rather different between notifications.

Here are two example working notifications:
```
<!-- first -->
<button aria-label="Send message to Jane Doe" type="button">
  <span>
    Wish <strong>Jane Doe</strong> a happy birthday. (Jan 12)
  </span>
</button>

<!-- second -->
<a href="clipped link" tabindex="0">
  <span>
    <strong>1 person</strong> viewed your profile: Stay anonymous and see who's viewed your profile with Premium
  </span>
</a>
```
and here's an example broken notification:
```
<a href="clipped link" tabindex="0">
  <span>
    <span aria-hidden="true"><strong>John Doe</strong> has 8 new connections. View all John’s connections.</span>
    <span class="visually-hidden">John Doe has 8 new connections. View all John’s connections.</span>
  </span>
</a>
```

(In reply to James Teh [:Jamie] from comment #11)
> In all the stale bounds cases, are you able to confirm whether there is an ancestor element with CSS position: fixed or position: sticky? I'm guessing there is. If so, we'll deal with that part over in bug 1809836.

The global navigation bar (id 'global-nav' as of time of writing this) is a header element with property `position: fixed`; the buttons of the main menu bar are descendants of that element.

The buttons on the direct message panel, on the other hand, don't appear to have position: fixed or position: sticky in their ancestors. The button text has `position: absolute` and the buttons are `position: relative` in a footer, in a `position: static` form.

> > For LinkedIn notifications, a situation where NVDA reads "article link" but not the actual text leaf descendant of the link, the bounds appear correct.
> 
> It'd be interesting to know whether the text leaf has correct bounds. To do that, you'll need to find the link with the browse mode cursor, then use NVDA's move to first object inside command (desktop NVDA+numpad2, laptop NVDA+shift+downArrow). That should get the review cursor/navigator to the text leaf, which should then get highlighted.

So, I'm a bit confused about this one. The bounds that NVDA reports for the text leaf are identical in Nightly and in Stable, but only Stable actually reads the text out when I move the mouse cursor over it. For what it's worth, the bounds look incorrect to me in both, at least for the notifications that don't get read out in Nightly. They do not tightly bound the text; rather, the bounds are offset such that the top of the bounding rectangle sits at the bottom of where the text appears visually. For notifications that _are_ read out properly in Nightly, the bounding box on the text looks correct. I'm trying to narrow down the differences between the HTML, since they're rather different between notifications.

Here are two example working notifications:
```
<!-- first -->
<button aria-label="Send message to Jane Doe" type="button">
  <span>
    Wish <strong>Jane Doe</strong> a happy birthday. (Jan 12)
  </span>
</button>

<!-- second -->
<a href="clipped link" tabindex="0">
  <span>
    <strong>1 person</strong> viewed your profile: Stay anonymous and see who's viewed your profile with Premium
  </span>
</a>
```
and here's an example broken notification:
```
<a href="clipped link" tabindex="0">
  <span>
    <span aria-hidden="true"><strong>John Doe</strong> has 8 new connections. View all John’s connections.</span>
    <span class="visually-hidden">John Doe has 8 new connections. View all John’s connections.</span>
  </span>
</a>
```
The `visually-hidden` class provides the following CSS:
```
display: block !important;
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
```