fix(web): notification drawer adjustments

Bring back some styles for making it looks a bit better and allow
the drawer recieves the focus when open.

web/src/assets/styles/index.scss

@@ -95,6 +95,20 @@
   }
 }
 
+.agm-issues-drawer-body {
+  padding: var(--pf-t--global--spacer--lg);
+
+  h4 a {
+    text-decoration: underline;
+    font-weight: var(--pf-t--global--font--weight--400);
+  }
+
+  ul li.pf-m-info,
+  ul li.pf-m-warning {
+    --pf-v6-c-notification-drawer__list-item--before--BackgroundColor: none;
+  }
+}
+
 // PatternFly overrides
 
 .pf-v6-c-masthead__main {

web/src/components/core/IssuesDrawer.tsx

@@ -57,7 +57,7 @@ const IssuesDrawer = forwardRef(({ onClose }: { onClose: () => void }, ref) => {
   return (
     <NotificationDrawer ref={ref}>
       <NotificationDrawerHeader title={_("Pre-installation checks")} onClose={onClose} />
-      <NotificationDrawerBody className="agama-issues-drawer-body">
+      <NotificationDrawerBody className="agm-issues-drawer-body">
         <Stack hasGutter>
           <p>
             {_(

web/src/components/layout/Layout.tsx

@@ -20,7 +20,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useRef, useState } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { Masthead, Page, PageProps } from "@patternfly/react-core";
 import { Questions } from "~/components/questions";
@@ -35,6 +35,16 @@ export type LayoutProps = React.PropsWithChildren<{
   headerOptions?: HeaderProps;
 }>;
 
+const focusDrawer = (drawer: HTMLElement | null) => {
+  if (drawer === null) return;
+
+  const firstTabbableItem = drawer.querySelector("a, button") as
+    | HTMLAnchorElement
+    | HTMLButtonElement
+    | null;
+  firstTabbableItem?.focus();
+};
+
 /**
  * Component for laying out the application content inside a PF/Page that might
  * or might not mount a header and a sidebar depending on the given props.
@@ -47,6 +57,7 @@ const Layout = ({
   headerOptions = {},
   children,
 }: LayoutProps) => {
+  const drawerRef = useRef();
   const location = useLocation();
   const [issuesDrawerVisible, setIssuesDrawerVisible] = useState<boolean>(false);
   const closeIssuesDrawer = () => setIssuesDrawerVisible(false);
@@ -67,7 +78,7 @@ const Layout = ({
     );
     // notificationDrawer is open/close from the header, it does not make sense
     // to mount it if there is no header.
-    pageProps.notificationDrawer = <IssuesDrawer onClose={closeIssuesDrawer} />;
+    pageProps.notificationDrawer = <IssuesDrawer onClose={closeIssuesDrawer} ref={drawerRef} />;
     pageProps.isNotificationDrawerExpanded = issuesDrawerVisible;
   } else {
     // FIXME: render an empty Masthead instead of nothing, in order to have
@@ -78,7 +89,12 @@ const Layout = ({
 
   return (
     <>
-      <Page isContentFilled {...pageProps} className="agm-layout">
+      <Page
+        isContentFilled
+        {...pageProps}
+        onNotificationDrawerExpand={() => focusDrawer(drawerRef.current)}
+        className="agm-layout"
+      >
         <Suspense fallback={<Loading />}>{children || <Outlet />}</Suspense>
       </Page>
       {location.pathname !== ROOT.login && <Questions />}