Bug: Several show-all-link in Firefox View search results are marked up as focusable static text
Status: VERIFIED
Priority: --
Resolution: FIXED
Created: 2023-12-27 19:03:32+00:00
Resolved: 2024-02-17 18:54:08+00:00

Several `show-all-link` controls lack interactive role - this would prevent users of speech-to-text/Voice Control from being able to send a click to it by calling its label and screen reader users and users of other assistive technology would not be able to get to this control via shortcuts like a list of controls, etc. Being focusable with keyboard does not guarantee that assistive technology could guess that this programmatically static text is, in fact, interactive.

### How to activate the controls:
(In reply to Jonathan Sudiaman [:jsudiaman] from [comment #6 in bug 1851447](https://bugzilla.mozilla.org/show_bug.cgi?id=1851447#c6))
> User must enable `browser.firefox-view.search.enabled` in `about:config` in order for the search bar to appear. This preference will be enabled by default in Firefox 123.

### Current markup:
1. https://searchfox.org/mozilla-central/rev/fc00627e34639ef1014e87d9fa24091905e9dc5d/browser/components/firefoxview/syncedtabs.mjs#461-467
```js
<div
  class="show-all-link"
  @click=${this.enableShowAll}
  @keydown=${this.enableShowAll}
  data-l10n-id="firefoxview-show-all"
  tabindex="0"
></div>
```
2. https://searchfox.org/mozilla-central/rev/fc00627e34639ef1014e87d9fa24091905e9dc5d/browser/components/firefoxview/recentlyclosed.mjs#392-399
```js
() => html` <div
  @click=${this.enableShowAll}
  @keydown=${this.enableShowAll}
  data-l10n-id="firefoxview-show-all"
  ?hidden=${!this.isShowAllLinkVisible()}
  slot="footer"
  tabindex="0"
></div>`
```
3. https://searchfox.org/mozilla-central/rev/fc00627e34639ef1014e87d9fa24091905e9dc5d/browser/components/firefoxview/opentabs.mjs#529-536
```js
() => html` <div
  @click=${this.enableShowAll}
  @keydown=${this.enableShowAll}
  data-l10n-id="firefoxview-show-all"
  ?hidden=${!this.isShowAllLinkVisible()}
  slot="footer"
  tabindex="0"
></div>`,
```

### a11y-checks fail log (one of affected):
```
Node is not accessible via accessibility API: id: , tagName: DIV, className: show-all-link - 
Stack trace:
chrome://mochikit/content/browser-test.js:test_ok:1591
chrome://mochikit/content/tests/SimpleTest/AccessibilityUtils.js:a11yFail:408
chrome://mochikit/content/tests/SimpleTest/AccessibilityUtils.js:assertCanBeClicked:740
chrome://mochikit/content/tests/SimpleTest/AccessibilityUtils.js:runIfA11YChecks/this.AccessibilityUtils:716
chrome://mochikit/content/tests/SimpleTest/AccessibilityUtils.js:handleEvent:833
chrome://mochitests/content/browser/browser/components/firefoxview/tests/browser/firefoxview-next/browser_syncedtabs_firefoxview_next.js:search_synced_tabs_recent_browsing/<:680
resource://testing-common/FirefoxViewTestUtils.sys.mjs:withFirefoxView:145
chrome://mochitests/content/browser/browser/components/firefoxview/tests/browser/firefoxview-next/browser_syncedtabs_firefoxview_next.js:search_synced_tabs_recent_browsing:653
chrome://mochikit/content/browser-test.js:handleTask:1138
chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1210
chrome://mochikit/content/browser-test.js:Tester_execTest:1352
chrome://mochikit/content/browser-test.js:nextTest/<:1127
chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
```