Various places use <span class=sr-only> to have "invisible" text that are actually redundant or better exposed with aria-label attribute. We can clean this up at the same time we're converting strings to fluent.

Jotting down some notes:

For the "Seach" button, looks like the title attribute is enough to make it show up in the accessibility devtools view, so we can just remove the sr-only button child.

Similarly for the "Search the Web" exposed as 1) label with text child and 2) on the input box entry itself. It looks like (2) is sufficient so (1) can be removed.

There's various other uses mostly for context menu it seems.

Do we want to remove the sr-only spans that contain localized <FormattedMessage/> components? I'm tempted to leave them, only because I don't think aria-label will accept a component and we probably don't want to lose that behaviour.

EDIT: I think I've answered my own question - the titles contain the localized messages, so it should be okay to remove the components. That's what I'll do for now!

Right, in some places we might need something other than title attribute in fluent. The purpose of fluent migration is to get rid of both <FormattedMessage> declarations and the js API .formatMessage calls, so it's not an issue that the jsx attribute doesn't accept a component because it's not how we would do it with fluent.

https://hg.mozilla.org/mozilla-central/rev/885c1d54bcb9

I have verified that this issue is no longer reproducible with the latest Firefox Nightly (69.0a1 Build ID - 20190630214222) installed, on Windows 10 x64, Arch Linux and Mac 10.14.5. Now if we set the "browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar" pref to false, we will observe that the "aria-label="Search the Web"" string is added.