[Dashboard] [Controls] Make floating actions keyboard accessible (#152155)

Closes https://github.com/elastic/kibana/issues/135458
Unblocks https://github.com/elastic/kibana/issues/151233

## Summary

This PR adds the floating actions back into the regular HTML tree by
removing the `EuiPortal` that surrounded them, thus making them keyboard
accessible via some added CSS.

![Mar-02-2023
11-54-13](https://user-images.githubusercontent.com/8698078/222524586-8051b8e5-fe1e-48b2-bd83-30a90f9b3417.gif)


In order to do this, however, there were a few changes that had to be
made to the overall Dashboard HTML structure. Previously, as part of
[relocating the Dashboard
scrollbar](https://github.com/elastic/kibana/pull/145628), the
scrollable section of the app was moved to the Dashboard viewport, like
so:



https://user-images.githubusercontent.com/8698078/222511861-8707917c-9edc-4292-a182-58924bb00c8a.mov


<br>

While this had a lot of visual appeal, because of the structure of the
HTML tree, the floating actions had to be moved to an `EuiPortal` as
part of this change so that they would continue to float above the top
navigation bar rather than clipping behind it alongside the other
contents of the viewport - this made it impossible to add native
keyboard accessibility since they were removed from the natural HTML
structure.

Unfortunately, by removing the `EuiPortal` in order to allow for
keyboard accessibility, this meant that the scrollable section could
**no longer** be constrained to the viewport - this is because the
`z-index` of child of a given scrollable `div` is **always relative** to
its parent, which means that the floating actions would clip behind the
top nav bar regardless of how high you set their `z-index`:

<p align="center"><img
src="https://user-images.githubusercontent.com/8698078/222518354-80f1df75-69e5-4433-a256-d0b7dc57cd97.gif"/></p>



Therefore, in order to avoid this clipping, the scrollable section had
to remain at the top of the app, like so:


https://user-images.githubusercontent.com/8698078/222512203-60a88fc5-dd68-47ba-aeab-2425afc60a67.mov


<br>

In order to keep the benefit of the top query bar remaining in place,
the top nav bar was added to a **fixed position** `div` that floats
above the contents of the viewport as the user scrolls - this ensures
that the floating actions, which are now also positioned via a `fixed`
container, can still float above the nav bar while remaining part of the
natural order of the HTML tree.

As a follow up, we should also address
https://github.com/elastic/kibana/issues/152609.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

examples/portable_dashboards_example/public/static_by_reference_example.tsx

@@ -41,11 +41,13 @@ export const StaticByReferenceExample = ({
       </EuiText>
       <EuiSpacer size="m" />
       <EuiPanel
+        className="eui-scrollBar"
         hasBorder={true}
-        // By specifying the height of the EuiPanel, we make it so that the dashboard height is
+        // By specifying the height + overflow of the EuiPanel, we make it so that the dashboard height is
         // constrained to the container - so, the dashboard is rendered with a vertical scrollbar
         css={css`
           height: 600px;
+          overflow-y: auto;
         `}
       >
         <DashboardContainerRenderer