Fixes #13583: Move .sr-only and .sr-only-focusable to mixins, then use them to create classes in _utilities.scss

As per discussion on https://github.com/w3c/wai-wcag-quickref/issues/2
and #13554

[skip sauce]

[skip sauce]

Also, use id rather class name for the navigation, as it's unique and
lets us use correct aria-controls (and without the use of id,
aria-expanded does not get updated correctly by the current dropdown
toggle script)

Before, most callouts hierarchically came under Examples > Four
directions, which is not appropriate. Now they're under Markup

Include callout explicitly mentioning tooltips should only be added to
focusable elements. Closes #16134

Closes #16113
Closes #16114

[skip sauce]

Refs #15947