update basic example and aria

Author: kmcfaul

packages/react-core/src/components/Compass/examples/CompassBasic.tsx

@@ -8,8 +8,10 @@ import {
 } from '@patternfly/react-core';
 
 export const CompassBasic: React.FunctionComponent = () => {
-  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
-  const panelStartContent = <div>Panel start</div>;
+  const headerContent = (
+    <CompassHeader logo={<div>Logo</div>} nav={<CompassSection>Nav</CompassSection>} profile={<div>Profile</div>} />
+  );
+  const panelStartContent = <CompassSection>Panel start</CompassSection>;
   const mainContent = (
     <>
       <CompassHero>
@@ -21,8 +23,8 @@ export const CompassBasic: React.FunctionComponent = () => {
       </CompassContent>
     </>
   );
-  const panelEndContent = <div>Panel end</div>;
-  const footerContent = <div>Footer</div>;
+  const panelEndContent = <CompassSection>Panel end</CompassSection>;
+  const footerContent = <CompassSection>Footer</CompassSection>;
 
   return (
     <Compass

packages/react-core/src/components/Compass/examples/CompassDemo.tsx

@@ -24,7 +24,7 @@ import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/o
 export const CompassBasic: React.FunctionComponent = () => {
   const subTabs = (
     <CompassSection isGlass>
-      <Tabs activeKey={0} isSubtab onSelect={() => {}}>
+      <Tabs activeKey={0} isSubtab onSelect={() => {}} aria-label="Compass navigation subtabs">
         <Tab eventKey={0} title={<TabTitleText>Subtab 1</TabTitleText>} />
         <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
         <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
@@ -35,7 +35,7 @@ export const CompassBasic: React.FunctionComponent = () => {
   const navContent = (
     <CompassSection isGlass>
       <Tabs activeKey={0} onSelect={() => {}} component={TabsComponent.nav} aria-label="Compass navigation tabs">
-        <Tab eventKey={0} title={<TabTitleText>Tab 1</TabTitleText>}>
+        <Tab eventKey={0} title={<TabTitleText>Tab 1</TabTitleText>} aria-label="Compass tab with subtabs">
           {subTabs}
         </Tab>
         <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />