From ed7c6bbe8e71308af86a0076b346caf628b1fb59 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Wed, 24 Apr 2024 14:19:32 +0200
Subject: [PATCH] fix(#900): Add missing aria-labels Add hasOverflowScroll to
 pageSections in JMX and Quartz.

---
 .../hawtio/src/plugins/camel/CamelContent.tsx |  1 +
 .../hawtio/src/plugins/jmx/JmxContent.css     |  3 ++
 .../hawtio/src/plugins/jmx/JmxContent.tsx     | 25 +++++++-------
 .../src/plugins/quartz/QuartzContent.css      |  4 +++
 .../src/plugins/quartz/QuartzContent.tsx      | 33 +++++++++++--------
 5 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/hawtio/src/plugins/camel/CamelContent.tsx b/packages/hawtio/src/plugins/camel/CamelContent.tsx
index b1a5a55b..2e2fa169 100644
--- a/packages/hawtio/src/plugins/camel/CamelContent.tsx
+++ b/packages/hawtio/src/plugins/camel/CamelContent.tsx
@@ -177,6 +177,7 @@ export const CamelContent: React.FunctionComponent = () => {
         variant={pathname.includes('chart') ? PageSectionVariants.default : PageSectionVariants.light}
         padding={{ default: pathname.includes('chart') ? 'padding' : 'noPadding' }}
         hasOverflowScroll
+        aria-label='camel-content-main'
       >
         {navItems.length > 0 && (
           <Routes>
diff --git a/packages/hawtio/src/plugins/jmx/JmxContent.css b/packages/hawtio/src/plugins/jmx/JmxContent.css
index 8c8b82e6..2d43c550 100644
--- a/packages/hawtio/src/plugins/jmx/JmxContent.css
+++ b/packages/hawtio/src/plugins/jmx/JmxContent.css
@@ -1,3 +1,6 @@
 #jmx-content-main > article {
   overflow: auto;
 }
+#jmx-content {
+  height: 100%;
+}
diff --git a/packages/hawtio/src/plugins/jmx/JmxContent.tsx b/packages/hawtio/src/plugins/jmx/JmxContent.tsx
index 3eab340d..452c49ad 100644
--- a/packages/hawtio/src/plugins/jmx/JmxContent.tsx
+++ b/packages/hawtio/src/plugins/jmx/JmxContent.tsx
@@ -80,29 +80,28 @@ export const JmxContent: React.FunctionComponent = () => {
   ))
 
   return (
-    <React.Fragment>
-      <PageGroup>
-        <PageSection id='jmx-content-header' variant={PageSectionVariants.light}>
-          <Title headingLevel='h1'>{selectedNode.name}</Title>
-          <Text component='small'>{selectedNode.objectName}</Text>
-        </PageSection>
-        <Divider />
-        <PageSection type='tabs' variant={PageSectionVariants.light} hasShadowBottom>
-          {mbeanNav}
-        </PageSection>
-        <Divider />
-      </PageGroup>
+    <PageGroup id='jmx-content'>
+      <PageSection id='jmx-content-header' variant={PageSectionVariants.light}>
+        <Title headingLevel='h1'>{selectedNode.name}</Title>
+        <Text component='small'>{selectedNode.objectName}</Text>
+      </PageSection>
+      <Divider />
+      <PageSection type='tabs' variant={PageSectionVariants.light} hasShadowBottom>
+        {mbeanNav}
+      </PageSection>
+      <Divider />
       <PageSection
         id='jmx-content-main'
         variant={pathname.includes('chart') ? PageSectionVariants.default : PageSectionVariants.light}
         padding={{ default: pathname.includes('chart') ? 'padding' : 'noPadding' }}
         hasOverflowScroll
+        aria-label='jmx-content-main'
       >
         <Routes>
           {mbeanRoutes}
           <Route key='root' path='/' element={<Navigate to={navItems[0]?.id ?? ''} />} />
         </Routes>
       </PageSection>
-    </React.Fragment>
+    </PageGroup>
   )
 }
diff --git a/packages/hawtio/src/plugins/quartz/QuartzContent.css b/packages/hawtio/src/plugins/quartz/QuartzContent.css
index 52a7cb42..5a605065 100644
--- a/packages/hawtio/src/plugins/quartz/QuartzContent.css
+++ b/packages/hawtio/src/plugins/quartz/QuartzContent.css
@@ -1,3 +1,7 @@
 #quartz-content-main > article {
   overflow: auto;
 }
+
+#quartz-content {
+  height: 100%;
+}
diff --git a/packages/hawtio/src/plugins/quartz/QuartzContent.tsx b/packages/hawtio/src/plugins/quartz/QuartzContent.tsx
index 85563a81..302ddae5 100644
--- a/packages/hawtio/src/plugins/quartz/QuartzContent.tsx
+++ b/packages/hawtio/src/plugins/quartz/QuartzContent.tsx
@@ -81,24 +81,29 @@ export const QuartzContent: React.FunctionComponent = () => {
   const routes = navItems.map(nav => <Route key={nav.id} path={nav.id} element={React.createElement(nav.component)} />)
 
   return (
-    <React.Fragment>
-      <PageGroup>
-        <PageSection id='quartz-content-header' variant={PageSectionVariants.light}>
-          <Title headingLevel='h1'>{selectedNode.name}</Title>
-          <Text component='small'>{selectedNode.objectName}</Text>
-        </PageSection>
-        <Divider />
-        <PageSection type='tabs' hasShadowBottom>
-          {nav}
-        </PageSection>
-        <Divider />
-      </PageGroup>
-      <PageSection variant='light' id='quartz-content-main' padding={{ default: 'noPadding' }}>
+    <PageGroup id='quartz-content'>
+      <PageSection id='quartz-content-header' variant={PageSectionVariants.light}>
+        <Title headingLevel='h1'>{selectedNode.name}</Title>
+        <Text component='small'>{selectedNode.objectName}</Text>
+      </PageSection>
+      <Divider />
+      <PageSection type='tabs' hasShadowBottom>
+        {nav}
+      </PageSection>
+      <Divider />
+
+      <PageSection
+        variant='light'
+        id='quartz-content-main'
+        padding={{ default: 'noPadding' }}
+        hasOverflowScroll
+        aria-label='quartz-content-main'
+      >
         <Routes>
           {routes}
           <Route key='root' path='/' element={<Navigate to={navItems[0]?.id ?? ''} />} />
         </Routes>
       </PageSection>
-    </React.Fragment>
+    </PageGroup>
   )
 }