Fixed info icon tabbing

TIER · Jun 4, 2021 · 149231c · 149231c
1 parent 5243d47
commit 149231c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
-    <meta charset="utf-8">
     <title>Shibboleth IDP UI</title>
-    <base href="/">
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="/">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon-96x96.png">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/ui/src/app/App.js b/ui/src/app/App.js
@@ -43,7 +43,7 @@ function App() {
             },
             response: async ({response}) => {
                 if (response.type === "opaqueredirect") {
-                    setShowTimeout(true);
+                    //setShowTimeout(true);
                 }
 
                 return response;

diff --git a/ui/src/app/form/component/InfoIcon.js b/ui/src/app/form/component/InfoIcon.js
@@ -3,16 +3,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import Popover from 'react-bootstrap/Popover';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
+import { useTranslator } from '../../i18n/hooks';
 
 export function InfoIcon ({ value, placement='left', ...props }) {
+    const translate = useTranslator();
     return(
-        <OverlayTrigger trigger={['hover', 'focus']} placement={placement} overlay={(
+        <OverlayTrigger trigger={['hover', 'focus', 'click']} placement={placement} overlay={(
             <Popover variant="info">
                 <Popover.Content><Translate value={value} /></Popover.Content>
             </Popover>
-        )}>
-            <FontAwesomeIcon className="text-primary" icon={faInfoCircle} size="lg" {...props} />
+        )}
+        aria-label={translate('tooltip.instruction')}>
+            <Button variant="text">
+                <FontAwesomeIcon className="text-primary" icon={faInfoCircle} size="lg" {...props} />
+            </Button>
         </OverlayTrigger>
     );
 }