Backport of Rishabh gupta/UI/a11y fix non functional icons into release/1.22.x (#23355)

backport of commit 1939aa3

Co-authored-by: Rishabh Gupta <rishabh.gupta@hashicorp.com>

Author: hc-github-team-consul-core

ui/packages/consul-ui/app/components/app-view/README.mdx

@@ -8,7 +8,7 @@ state: needs-love
 the app chrome), every 'top level main section/template' should have one of
 these.
 
-This component will potentially be renamed to `Page` or `View` or similar now
+This component will potentially be renamed to  `Page` or `View` or similar now
 that we don't need two words.
 
 Other than that it provides the basic layout/slots for our main title, search

ui/packages/consul-ui/app/components/app-view/index.scss

@@ -29,7 +29,7 @@
   @extend %button-compact;
 }
 
-/* toggleable toolbar for short screens */
+/* toggleable toolbar for short  screens */
 [for='toolbar-toggle'] {
   @extend %with-search-color-icon;
   background-position: 0 4px;

ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss

@@ -85,7 +85,7 @@ section[data-route='dc.show.serverstatus'] {
   @extend %display-300-semibold;
   color: var(--token-color-hashicorp-brand);
 }
-%server-failure-tolerance header span::before {
+%server-failure-tolerance .optimistic-tolerance header span::before {
   --icon-name: icon-info;
   --icon-size: icon-300;
   --icon-color: var(--token-color-foreground-faint);