feat: 1723 wcag landing dashboard (#1751)

Co-authored-by: DustyD <[email protected]> Co-authored-by: mgaseta <[email protected]>
bcgov · Dec 10, 2024 · d784ec6 · d784ec6
1 parent 1f465c1
commit d784ec6
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 50 deletions.
diff --git a/frontend/src/components/Card/FavouriteCard/index.tsx b/frontend/src/components/Card/FavouriteCard/index.tsx
@@ -105,7 +105,7 @@ const FavouriteCard = ({
         {ActionBtn}
       </div>
       <div className="fav-card-content">
-        <p className="fav-card-title-large">{favObject.header}</p>
+        <p className="fav-card-title-large" role="heading" aria-level={2}>{favObject.header}</p>
       </div>
     </Tile>
   );

diff --git a/frontend/src/components/Card/SmallCard/index.tsx b/frontend/src/components/Card/SmallCard/index.tsx
@@ -26,7 +26,7 @@ const SmallCard = ({
     <Tile className={favClassName ? `${favClassName} small-card` : 'small-card'} onClick={() => navigate(path)}>
       <div className="image-header">
         <Img className="image" />
-        <p className="header">{header}</p>
+        <p className="header" role="heading" aria-level={2}>{header}</p>
       </div>
       <div className="action-btn">
         {actionBtn}

diff --git a/frontend/src/components/EmptySection/index.tsx b/frontend/src/components/EmptySection/index.tsx
@@ -34,10 +34,10 @@ const EmptySection = ({
   return (
     <div className="empty-section-container">
       <Img className="empty-section-icon" />
-      <p className="empty-section-title">
+      <p id="empty-section-heading" role="heading" aria-level={2} className="empty-section-title">
         {title}
       </p>
-      <Subtitle className="empty-section-subtitle" text={description} />
+      <Subtitle className="empty-section-subtitle" text={description} aria-describedby="empty-section-heading" />
     </div>
   );
 };

diff --git a/frontend/src/components/FavouriteActivities/index.tsx b/frontend/src/components/FavouriteActivities/index.tsx
@@ -51,7 +51,13 @@ const FavouriteActivities = () => {
       <Column sm={4} md={8} lg={16} xlg={12} className="favourite-activities-cards">
         <Row>
           {
-            favActQuery.isLoading ? <Loading withOverlay={false} /> : null
+            favActQuery.isLoading
+              ? (
+                <Loading role="status" aria-live="polite" withOverlay={false}>
+                  <span className="visually-hidden">Loading, please wait...</span>
+                </Loading>
+              )
+              : null
           }
           {
             favActQuery.isSuccess

diff --git a/frontend/src/components/FavouriteActivities/styles.scss b/frontend/src/components/FavouriteActivities/styles.scss
@@ -33,6 +33,17 @@
   }
 
   .favourite-activities-cards {
+    .visually-hidden{
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip-path: inset(0);
+      border: 0;
+    }
+
     padding-inline: 0;
   }
 

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/index.tsx
@@ -35,13 +35,15 @@ interface SingleOwnerInfoProps {
   setState: Function,
   readOnly?: boolean,
   isReview?: boolean
+  isOwnershipStep?: boolean
 }
 
 const SingleOwnerInfo = ({
   ownerInfo, defaultAgency, defaultCode, fundingSourcesQuery,
   methodsOfPaymentQuery, deleteAnOwner, checkPortionSum, setState,
-  readOnly, isReview
+  readOnly, isReview, isOwnershipStep
 }: SingleOwnerInfoProps) => {
+  const isReadOnly = readOnly && (isOwnershipStep || !isReview);
   const [ownerPortionInvalidText, setOwnerPortionInvalidText] = useState<string>(
     inputText.portion.invalidText
   );
@@ -151,7 +153,7 @@ const SingleOwnerInfo = ({
                   locationCode: StringInputType
                 ) => setClientAndCode(client, locationCode)
               }
-              readOnly={readOnly}
+              readOnly={isReadOnly}
             />
           </Column>
           <Column className={`single-owner-info-col ${colsClass}`} xs={4} sm={4} md={4} lg={4}>
@@ -169,7 +171,7 @@ const SingleOwnerInfo = ({
               }}
               invalid={ownerInfo.ownerPortion.isInvalid}
               invalidText={ownerPortionInvalidText}
-              readOnly={readOnly}
+              readOnly={isReadOnly}
             />
           </Column>
           <Column className={`single-owner-info-col ${colsClass}`} xs={4} sm={4} md={4} lg={4}>
@@ -189,7 +191,7 @@ const SingleOwnerInfo = ({
                   onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
                   invalid={ownerInfo.reservedPerc.isInvalid}
                   invalidText={reservedInvalidText}
-                  readOnly={readOnly}
+                  readOnly={isReadOnly}
                 />
               </div>
               <div className="reserved-surplus-input">
@@ -207,7 +209,7 @@ const SingleOwnerInfo = ({
                   onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
                   invalid={ownerInfo.surplusPerc.isInvalid}
                   invalidText={surplusInvalidText}
-                  readOnly={readOnly}
+                  readOnly={isReadOnly}
                 />
               </div>
             </div>
@@ -234,7 +236,7 @@ const SingleOwnerInfo = ({
                     onChange={(e: ComboBoxEvent) => handleFundingSource(e.selectedItem)}
                     invalid={ownerInfo.fundingSource.isInvalid}
                     invalidText={inputText.funding.invalidText}
-                    readOnly={readOnly}
+                    readOnly={isReadOnly}
                   />
                 )
             }
@@ -259,7 +261,7 @@ const SingleOwnerInfo = ({
                     onChange={(e: ComboBoxEvent) => handleMethodOfPayment(e.selectedItem)}
                     invalid={ownerInfo.methodOfPayment.isInvalid}
                     invalidText={inputText.payment.invalidText}
-                    readOnly={readOnly}
+                    readOnly={isReadOnly}
                   />
 
                 )
@@ -277,7 +279,7 @@ const SingleOwnerInfo = ({
                     className="owner-mod-btn"
                     renderIcon={TrashCan}
                     onClick={() => deleteAnOwner(ownerInfo.id)}
-                    disabled={readOnly}
+                    disabled={isReadOnly}
                   >
                     Delete owner
                   </Button>

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/index.tsx
@@ -12,7 +12,6 @@ import { Add } from '@carbon/icons-react';
 
 import ClassAContext from '../../../views/Seedlot/ContextContainerClassA/context';
 import getMethodsOfPayment from '../../../api-service/methodsOfPaymentAPI';
-import { ForestClientType } from '../../../types/ForestClientTypes/ForestClientType';
 import MultiOptionsObj from '../../../types/MultiOptionsObject';
 import { getForestClientByNumberOrAcronym } from '../../../api-service/forestClientsAPI';
 import { EmptyMultiOptObj } from '../../../shared-constants/shared-constants';
@@ -40,6 +39,7 @@ import {
 import { MAX_OWNERS } from './constants';
 
 import './styles.scss';
+import { ForestClientType } from '../../../types/ForestClientTypes/ForestClientType';
 
 type OwnershipStepProps = {
   isReview?: boolean
@@ -48,7 +48,7 @@ type OwnershipStepProps = {
 /*
   Component
 */
-const OwnershipStep = ({ isReview = false }: OwnershipStepProps) => {
+const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
   const {
     allStepData: { ownershipStep: state },
     setStepData,
@@ -59,7 +59,6 @@ const OwnershipStep = ({ isReview = false }: OwnershipStepProps) => {
   } = useContext(ClassAContext);
 
   const [accordionControls, setAccordionControls] = useState<AccordionCtrlObj>({});
-  const [originalSeedQty, setOriginalSeedQty] = useState<number>(0);
 
   const refControl = useRef<any>({});
 
@@ -110,11 +109,11 @@ const OwnershipStep = ({ isReview = false }: OwnershipStepProps) => {
     cacheTime: THREE_HALF_HOURS
   });
 
-  const getSeedlotBySeedlotNumberQuery = useQuery({
-    queryKey: ['get-seedlot-by-seedlotNumber', seedlotNumber],
-    queryFn: () => getSeedlotFromOracleDbBySeedlotNumber(seedlotNumber ?? ''),
-    enabled: isReview && !!seedlotNumber
-  });
+  const getSeedlotBySeedlotNumberQuery = useQuery(
+    ['get-seedlot-by-seedlotNumber', seedlotNumber],
+    () => getSeedlotFromOracleDbBySeedlotNumber(seedlotNumber ?? ''),
+    { enabled: !!seedlotNumber }
+  );
 
   // Set default method of payment for the first owner.
   useEffect(() => {
@@ -150,14 +149,10 @@ const OwnershipStep = ({ isReview = false }: OwnershipStepProps) => {
     }))
   });
 
-  useEffect(() => {
-    if (getSeedlotBySeedlotNumberQuery.status === 'success') {
-      setOriginalSeedQty(getSeedlotBySeedlotNumberQuery.data.data.originalSeedQty);
-    }
-  }, [getSeedlotBySeedlotNumberQuery.status, getSeedlotBySeedlotNumberQuery.fetchStatus]);
-
   const getFcQuery = (clientNumber: string): ForestClientType | undefined => qc.getQueryData(['forest-clients', clientNumber]);
 
+  const originalSeedQty = getSeedlotBySeedlotNumberQuery.data?.data?.originalSeedQty ?? 0;
+
   return (
     <div>
       <ScrollToTop enabled={!isReview} />
@@ -226,6 +221,7 @@ const OwnershipStep = ({ isReview = false }: OwnershipStepProps) => {
                   }
                   readOnly={isFormSubmitted || originalSeedQty > 0}
                   isReview={isReview}
+                  isOwnershipStep
                 />
               </AccordionItem>
             ))

diff --git a/frontend/src/components/Subtitle/index.tsx b/frontend/src/components/Subtitle/index.tsx
@@ -8,7 +8,7 @@ interface SubtitleProps {
 }
 
 const Subtitle = ({ text, className }: SubtitleProps) => (
-  <div className={className ? `${className} subtitle-section` : 'subtitle-section'}>
+  <div role="heading" aria-level={2} className={className ? `${className} subtitle-section` : 'subtitle-section'}>
     {text}
   </div>
 );

diff --git a/frontend/src/views/Seedlot/SeedlotRegFormClassA/RegPage.tsx b/frontend/src/views/Seedlot/SeedlotRegFormClassA/RegPage.tsx
@@ -60,12 +60,6 @@ const RegPage = () => {
 
   const { isTscAdmin } = useContext(AuthContext);
 
-  const disableSubmit = !allStepCompleted
-    || saveStatus === 'conflict'
-    || !seedlotData
-    || (seedlotData.seedlotStatus.seedlotStatusCode !== 'PND'
-    && seedlotData.seedlotStatus.seedlotStatusCode !== 'INC');
-
   return (
     <div className="seedlot-registration-page">
       <FlexGrid fullWidth>
@@ -182,21 +176,6 @@ const RegPage = () => {
           </Column>
         </Row>
         <Row className="seedlot-registration-button-row">
-          {
-            formStep === 5 && disableSubmit
-              ? (
-                <Column sm={4} md={8} lg={16} xlg={12}>
-                  <InlineNotification
-                    lowContrast
-                    kind="warning"
-                    title="Missing fields:"
-                    subtitle="Submit registration is disabled until mandatory fields are filled in
-                              correctly. You can check for blank or invalid fields on every step."
-                  />
-                </Column>
-              )
-              : null
-          }
           <Grid narrow>
             <Column sm={4} md={3} lg={3} xlg={4}>
               {
@@ -258,7 +237,13 @@ const RegPage = () => {
                     <SubmitModal
                       btnText="Submit Registration"
                       renderIconName="CheckmarkOutline"
-                      disableBtn={disableSubmit}
+                      disableBtn={
+                        !allStepCompleted
+                        || saveStatus === 'conflict'
+                        || !seedlotData
+                        || (seedlotData.seedlotStatus.seedlotStatusCode !== 'PND'
+                        && seedlotData.seedlotStatus.seedlotStatusCode !== 'INC')
+                      }
                       submitFn={() => {
                         submitSeedlot.mutate(
                           getSeedlotPayload(
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ interface SubtitleProps { @@
     }
     const Subtitle = ({ text, className }: SubtitleProps) => (
-      <div className={className ? `${className} subtitle-section` : 'subtitle-section'}>
+      <div role="heading" aria-level={2} className={className ? `${className} subtitle-section` : 'subtitle-section'}>
         {text}
       </div>
     );
@@ Expand Down @@