fix(#900): Add missing aria-labels

Add hasOverflowScroll to pageSections in JMX and Quartz. (cherry picked from commit 4f57205)
hawtio · Apr 26, 2024 · e588e7a · e588e7a
1 parent 6e04311
commit e588e7a
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
   )
 }