fix: decorative image takes focus

Decorative image on /login, /register and /reset page was taking focus on IE11

VAN-510

src/base-component/AuthExtraLargeLayout.jsx

@@ -23,13 +23,17 @@ const AuthExtraLargeLayout = (props) => {
           <div>
             <Row>
               <Col xs={3}>
-                <svg className={classNames(
-                  'ml-5 mt-5',
-                  {
-                    'extra-large-svg-line': variant === 'xl',
-                    'extra-extra-large-svg-line': variant === 'xxl',
-                  },
-                )}
+                <svg
+                  role="img"
+                  aria-label=""
+                  focusable={false}
+                  className={classNames(
+                    'ml-5 mt-5',
+                    {
+                      'extra-large-svg-line': variant === 'xl',
+                      'extra-extra-large-svg-line': variant === 'xxl',
+                    },
+                  )}
                 >
                   <line x1="60" y1="0" x2="5" y2="220" />
                 </svg>

src/base-component/AuthMediumLayout.jsx

@@ -22,7 +22,12 @@ const AuthMediumLayout = (props) => {
           <div>
             <Row>
               <Col xs={3}>
-                <svg className="medium-svg-line ml-5 mt-5">
+                <svg
+                  role="img"
+                  aria-label=""
+                  focusable={false}
+                  className="medium-svg-line ml-5 mt-5"
+                >
                   <line x1="60" y1="0" x2="5" y2="220" />
                 </svg>
               </Col>

src/base-component/AuthSmallLayout.jsx

@@ -22,13 +22,17 @@ const AuthSmallLayout = (props) => {
         <div>
           <Row>
             <Col xs={3}>
-              <svg className={classNames(
-                'mt-4\.5', // eslint-disable-line no-useless-escape
-                {
-                  'extra-small-svg-line': variant === 'xs',
-                  'small-svg-line': variant === 'sm',
-                },
-              )}
+              <svg
+                role="img"
+                aria-label=""
+                focusable={false}
+                className={classNames(
+                  'mt-4\.5', // eslint-disable-line no-useless-escape
+                  {
+                    'extra-small-svg-line': variant === 'xs',
+                    'small-svg-line': variant === 'sm',
+                  },
+                )}
               >
                 <line x1="60" y1="0" x2="5" y2="220" />
               </svg>

src/base-component/LargeLeftLayout.jsx

@@ -26,14 +26,18 @@ const LargeLeftLayout = (props) => {
         >
           {intl.formatMessage(messages['code.copied'])}
         </Toast>
-        <svg className={classNames(
-          'large-screen-svg-line',
-          {
-            'variation1-bar-color mt-n6 pt-0 ml-5': experimentName === 'variation1' && isRegistrationPage,
-            'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
-            'ml-5': experimentName !== 'variation1' || !isRegistrationPage,
-          },
-        )}
+        <svg
+          role="img"
+          aria-label=""
+          focusable={false}
+          className={classNames(
+            'large-screen-svg-line',
+            {
+              'variation1-bar-color mt-n6 pt-0 ml-5': experimentName === 'variation1' && isRegistrationPage,
+              'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
+              'ml-5': experimentName !== 'variation1' || !isRegistrationPage,
+            },
+          )}
         >
           <line x1="50" y1="0" x2="10" y2="215" />
         </svg>

src/base-component/MediumLayout.jsx

@@ -36,13 +36,17 @@ const MediumLayout = (props) => {
           <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
         <div className="row mt-4 justify-content-center">
-          <svg className={classNames(
-            'medium-screen-svg-line pl-5',
-            {
-              'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
-              'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
-            },
-          )}
+          <svg
+            role="img"
+            aria-label=""
+            focusable={false}
+            className={classNames(
+              'medium-screen-svg-line pl-5',
+              {
+                'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
+                'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
+              },
+            )}
           >
             <line x1="50" y1="0" x2="10" y2="215" />
           </svg>

src/base-component/SmallLayout.jsx

@@ -30,13 +30,17 @@ const SmallLayout = (props) => {
           <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
         <div className="d-flex mt-3">
-          <svg className={classNames(
-            'small-screen-svg-line',
-            {
-              'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
-              'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
-            },
-          )}
+          <svg
+            role="img"
+            aria-label=""
+            focusable={false}
+            className={classNames(
+              'small-screen-svg-line',
+              {
+                'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
+                'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
+              },
+            )}
           >
             <line x1="55" y1="0" x2="40" y2="65" />
           </svg>