Bug 1846742 Comment 3 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Their JS code does handle the key event, but ultimately does nothing more than hide the suggestions panel, and then rely on the enter keypress to activate the inside `<a>` link with its default action:
```
<li class="c-menu-item" role="presentation" title="Surface Laptop, Copilot+ PC" data-is-searchable="false" data-selected="true">
  <a role="option" aria-label="Surface Laptop, Copilot+ PC - Link" aria-setsize="11" aria-posinset="3" class="f-product" href="//www.microsoft.com/en-us/d/surface-laptop-copilot-pc/8tq2hq5xxkj9" aria-selected="true">
    <img class="c-image" src="//img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RW1j1Tr?ver=64d8&amp;w=272&amp;h=223&amp;o=f&amp;m=6&amp;f=jpg" role="none" alt="Surface Laptop, Copilot+ PC">
    <div><span><b>Surface</b> Laptop, Copilot+ PC</span></div>
  </a>
</li>
```

However, their code to hide the panel somehow prevents Firefox from doing that default action.

It seems tied to this line of code which is called by their `t.prototype.selectSuggestion` function:
```
          t.prototype.hide = function () {
            this.menu.setAttribute(t.ariaHidden, 'true'); // where t.ariaHidden is just "aria-hidden"
```

If I comment that line out in their script, then Firefox works fine. But I can't seem to make a reduced test-case out of this, so it's unclear to me what's happening.
Their JS code does handle the key event, but ultimately does nothing more than hide the suggestions panel, and then rely on the enter keypress to activate the inside `<a>` link with its default action:
```
<li class="c-menu-item" role="presentation" title="Surface Laptop, Copilot+ PC" data-is-searchable="false" data-selected="true">
  <a role="option" aria-label="Surface Laptop, Copilot+ PC - Link" aria-setsize="11" aria-posinset="3" class="f-product" href="//www.microsoft.com/en-us/d/surface-laptop-copilot-pc/8tq2hq5xxkj9" aria-selected="true">
    <img class="c-image" src="//img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RW1j1Tr?ver=64d8&amp;w=272&amp;h=223&amp;o=f&amp;m=6&amp;f=jpg" role="none" alt="Surface Laptop, Copilot+ PC">
    <div><span><b>Surface</b> Laptop, Copilot+ PC</span></div>
  </a>
</li>
```

However, their code to hide the panel somehow prevents Firefox from doing that default action.

It seems tied to this line of code which is called by their `t.prototype.selectSuggestion` function:
```
          t.prototype.hide = function () {
            this.menu.setAttribute(t.ariaHidden, 'true'); // where t.ariaHidden is just "aria-hidden"
```

If I comment that line out in their script, then Firefox works fine. But I can't seem to make a reduced test-case out of this, so it's unclear to me what's happening.

The aria-hidden hides the menu because of this CSS:
```
.m-auto-suggest .c-menu[aria-hidden="true"], .c-auto-suggest .c-menu[aria-hidden="true"] {
  display: none;
}
```
Their JS code does handle the key event, but ultimately does nothing more than hide the suggestions panel, and then rely on the enter keypress to activate the inside `<a>` link with its default action:
```
<li class="c-menu-item" role="presentation" title="Surface Laptop, Copilot+ PC" data-is-searchable="false" data-selected="true">
  <a role="option" aria-label="Surface Laptop, Copilot+ PC - Link" aria-setsize="11" aria-posinset="3" class="f-product" href="//www.microsoft.com/en-us/d/surface-laptop-copilot-pc/8tq2hq5xxkj9" aria-selected="true">
    <img class="c-image" src="//img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RW1j1Tr?ver=64d8&amp;w=272&amp;h=223&amp;o=f&amp;m=6&amp;f=jpg" role="none" alt="Surface Laptop, Copilot+ PC">
    <div><span><b>Surface</b> Laptop, Copilot+ PC</span></div>
  </a>
</li>
```

However, their code to hide the panel somehow prevents Firefox from doing that default action.

It seems tied to this line of code which is called by their `t.prototype.selectSuggestion` function:
```
          t.prototype.hide = function () {
            this.menu.setAttribute(t.ariaHidden, 'true'); // where t.ariaHidden is just "aria-hidden"
```

If I comment that line out in their script, then Firefox works fine. But I can't seem to make a reduced test-case out of this, so it's unclear to me what's happening.

The aria-hidden hides the menu because of this CSS:
```
.m-auto-suggest .c-menu[aria-hidden="true"], .c-auto-suggest .c-menu[aria-hidden="true"] {
  display: none;
}
```

If I disable that, then the enter keypresses work for me as well.

Back to Bug 1846742 Comment 3