fixed focustrap and accessibility

packages/core/admin/admin/src/pages/Admin/Onboarding/index.js

@@ -91,13 +91,20 @@ const Onboarding = () => {
   };
 
   return (
-    <FocusTrap onEscape={handleClick}>
-      <Wrapper onClick={handleClick}>
-        {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
-        {isOpen && <FontAwesomeIcon icon={faTimes} />}
-        {/* FIX ME - replace with popover when overflow popover is fixed 
-        + when v4 mockups for onboarding component are ready */}
-        {isOpen && (
+    <Wrapper
+      aria-label={formatMessage({
+        id: 'app.components.Onboarding.help.button',
+        defaultMessage: 'Help Button',
+      })}
+      type="button"
+      onClick={handleClick}
+    >
+      {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
+      {isOpen && <FontAwesomeIcon icon={faTimes} />}
+      {/* FIX ME - replace with popover when overflow popover is fixed 
+      + when v4 mockups for onboarding component are ready */}
+      {isOpen && (
+        <FocusTrap onEscape={handleClick}>
           <LinksWrapper
             background="neutral0"
             hasRadius
@@ -117,9 +124,9 @@ const Onboarding = () => {
               </StyledLink>
             ))}
           </LinksWrapper>
-        )}
-      </Wrapper>
-    </FocusTrap>
+        </FocusTrap>
+      )}
+    </Wrapper>
   );
 };
 

packages/core/admin/admin/src/translations/en.json

@@ -265,6 +265,7 @@
   "app.components.NotFoundPage.back": "Back to homepage",
   "app.components.NotFoundPage.description": "Not Found",
   "app.components.Official": "Official",
+  "app.components.Onboarding.help.button": "Help button",
   "app.components.Onboarding.label.completed": "% completed",
   "app.components.Onboarding.title": "Get Started Videos",
   "app.components.MarketplaceBanner": "Discover plugins built by the community, and many more awesome things to kickstart your project, on Strapi Awesome.",