fix(doc): brand warning accessibility

docs-orange/assets/scss/_boosted-docs.scss

@@ -80,7 +80,7 @@
 
 .bd-navbar {
   font-size: 1.8rem;
-  min-height: 10rem;
+  min-height: $navbar-height;
   padding: 0;
 
   @include media-breakpoint-down(sm) {
@@ -137,21 +137,52 @@
 
 }
 
-#outline-buttons::after,
-#supported-content::after,
-#brand::after,
-#nav::after,
-#color-schemes::after,
-#containers::after,
-#placement::after {
-  content: "\e91e";
-  color: $brand-danger;
-  font-family: "icon-orange" !important;
-  font-size: inherit;
-  padding-left: 0.6rem;
-  vertical-align: bottom;
+@mixin brand-warning {
+  &::before {
+    @include sr-only;
+    content: "warning, not brand compliant";
+  }
+
+  &::after {
+    content: "\e91e";
+    color: $brand-danger;
+    font-family: "icon-orange" !important;
+    font-size: inherit;
+    padding-left: 0.6rem;
+    vertical-align: bottom;
+  }
 }
 
+#outline-buttons,
+#supported-content,
+#brand,
+#nav,
+#color-schemes,
+#containers,
+#placement {
+    @include brand-warning;
+}
+
+// #outline-buttons::after,
+// #supported-content::after,
+// #brand::after,
+// #nav::after,
+// #color-schemes::after,
+// #containers::after,
+// #placement::after {
+//   content: "\e91e";
+//   color: $brand-danger;
+//   font-family: "icon-orange" !important;
+//   font-size: inherit;
+//   padding-left: 0.6rem;
+//   vertical-align: bottom;
+// }
+
+// #outline-buttons::before {
+//     @include sr-only;
+//     content: "warning, not brand compliant";
+// }
+
 //
 // Font icons
 //
@@ -163,7 +194,7 @@
 .doc-fonticon-list {
   padding-left: 0;
   list-style: none;
-  font-size: 3rem;  
+  font-size: 3rem;
 }
 .doc-fonticon li {
   float: left;
@@ -180,6 +211,7 @@
   display: block;
   text-align: center;
   word-wrap: break-word; // Help out IE10+ with class names
+  font-size: $font-size-base;
 }
 .doc-fonticon li:hover {
   color: #fff;
@@ -218,7 +250,7 @@ $back-top-btn-height: 6rem;
     z-index: 100;
     text-decoration: none;
     display: none;
-    span[class*="icon-"] {    
+    span[class*="icon-"] {
       font-size: 3rem;
     }
     &:visited {

docs-orange/getting-started/introduction.md

@@ -16,7 +16,7 @@ Here's how to quickly get started with the necessary Booted files and a template
 
 ## About Orange Brand
 
-All Boosted components are compliant with Orange Brand Guidelines. Some bootstrap features may not support the brand guidelines, partially or entirely. They are tagged in this documentation with the following <span class="icon-anti-spam" style="color: #dc3c14; font-size: 2rem"></span>, use them at your own risks.
+All Boosted components are compliant with Orange Brand Guidelines. Some bootstrap features may not support the brand guidelines, partially or entirely. They are tagged in this documentation with the following <span class="sr-only">warning, not brand compliant</span><span class="icon-anti-spam" style="color: #dc3c14; font-size: 2rem" aria-hidden="true"></span>, use them at your own risks.
 
 ## Quick start