improve(a11y): visibility accessibility via aria-label (#4127)

* Added aria-label for visual readers.

* Increased font weight for Models section span to meet contrast ratio visibility requirements.

Author: maryscar

src/core/components/auth/authorize-operation-btn.jsx

@@ -20,7 +20,9 @@ export default class AuthorizeOperationBtn extends React.Component {
     let { isAuthorized } = this.props
 
     return (
-      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
+      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"}
+        aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
+        onClick={this.onClick}>
         <svg width="20" height="20">
           <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
         </svg>

src/style/_variables.scss

@@ -175,7 +175,7 @@ $section-models-border-color: $gray-custom-2 !default;
 
 $section-models-isopen-h4-border-bottom-color: $section-models-border-color !default;
 
-$section-models-h4-font-color: $gray-500 !default;
+$section-models-h4-font-color: $gray-600 !default;
 $section-models-h4-background-color-hover: $gray-base !default;
 
 $section-models-h5-font-color: $gray-500 !default;