Visually-hidden refresh button in Field UI fails WCAG Focus Visible.

This patch replaces the .visually-hidden class with a custom class, which gets CSS display:none.

First I tried using Drupal core's existing .hidden class, but it wasn't specific enough and was overridden by button styles. Feel free to suggest a better class or selector.

The patch here adds the new style rule to the Stable theme. I hope that's OK - we've allowed accessibility bug fixes in Stable theme before now.

Will this need cross-browser testing? So far I've only tested this in Firefox 61 (Linux). It seems a mousedown event can still be programatically triggered on a button with display:none, which is good. I used a few console.log lines in field_ui.js and ajax.js to check this.

The previous patch only worked on "manage form display", not "manage display", so I've updated the selectors and button class.

Manually tested in Firefox 61 (Linux) and Chrome 68 (Linux), with Seven and Stark themes.

Will this need cross-browser testing?

Re. #6 - Thanks @shaal, I see you tested the tabbing order.

Did you test whether the FIeld UI Javascript behaviours still work?

The part we need to know about is whether the hidden refresh button still works. Does triggering a mousedown programatically still work for a button with dispay: none? I think that warrants cross-browser testing too.

See my comment in #2 about this. The mousedown is triggered in Drupal.fieldUIOverview.AJAXRefreshRows(). It's a while since I had my head in this issue, and I find our AJAX system hard to grok. I'm not really clear what the refresh button if for. I can't recall where I put the console.log lines I mentioned. Manual testing involves changing formatter, formatter settings, etc.

Re. #7-10
That's certainly a good suggestion to consider, but I'd be very cautious about changing the implementation of .hidden in a minor release. It would potentially break things far beyond the refresh button in this issue, including existing sites. I'd defer to the framework managers about that. Can we file a follow-up issue about it making .hidden more robust generally, and keep this issue scoped to this button.

Also, my own ideas further to. #2

First I tried using Drupal core's existing .hidden class, but it wasn't specific enough and was overridden by button styles. Feel free to suggest a better class or selector.

I also noticed that other modules (contextual, toolbar, off-canvas) have run into the problem of .hidden being overridden. They all solve it like this, with a more specific selector for the .hidden class like this:

.toolbar .toolbar-bar .toolbar-tab.hidden {
  display: none;
}

So perhaps we should follow that pattern instead of the custom class I used in #2. It has the advantage of being easy to understand in the HTML without looking up the styles.

I don't recall if I tried using the HTML5 hidden attribute. That would allow us to avoid a custom class to the stylesheets. However the hidden attribute is typically implemented as display:none in user-agent styles, so they might also get overridden by author style. Adding that as something to try.

Updating the issue summary. Confirming the JS behaviour still works is the most important thing for review.