From 0d2a31ad2ee078471c25ec45c155f2ffceb3da89 Mon Sep 17 00:00:00 2001 From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com> Date: Fri, 3 Apr 2026 13:57:14 -0700 Subject: [PATCH 1/3] fix: added solution details --- .../alert-skipped-heading-level.md | 56 ++++++++++++++----- 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md index e3c6cd4..d377ba6 100644 --- a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md +++ b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md @@ -96,49 +96,78 @@ The following material covers how the Project Team has provided a solution to th - React Component(s) - [INSERT PATH: e.g. path/to/Component.jsx] +### Project Page Details 4 +- Project Page name: About Page +- Project Dev URL: https://tdm-dev.azurewebsites.net/about +- Requires sign in: FALSE + - Required User Role: All Users + - Can access page directly from URL: TRUE + - Accepts URL parameters: FALSE + +### Project Team Issue and PR details 4 +- Related GitHub Issue(s): + - https://github.com/hackforla/tdm-calculator/issues/2960 +- Related Pull Request(s): + - https://github.com/hackforla/tdm-calculator/pull/3033 +- React Component(s) + - client/src/components/About/DefaultView.jsx + ### Project Team Solution #### What is the specific problem that was occurring? -[INSERT CONTENT] +The issues above were caused by a skip in sequential heading level within a page's html. For example, if a page had a

and

, but no

. This is problematic for assistive technology users because heading levels serve as a table of contents for understanding the structure of information on a web page. When a heading level is skipped, a user may assume there is missing information or that there are no further heading levels to explore when they encounter a heading level with no content. It is a major break in expected behavior and is disruptive for a user's ability to understand a page quickly. #### What is the proposed solution to this problem? -[INSERT CONTENT] +This can be resolved by updated the heading levels so that no levels are skipped. In the example provided above, the

heading should be updated to

. In addition, we should double check that this update does not create a new skipped heading level for the rest of the page and if so, update accordingly. #### Step-By-Step Guide -??? Info "Click to see step-by-step guide" - - [ADD DETAILED INSTRUCTIONS HERE] +N/A #### Other Technical Details -??? Info "Click to see other technical details" +N/A - [INSERT OTHER DETAILS e.g. Prop References, Return Value ] #### Code Snippet With Solution ??? Info "Click to see code snippets" - [INSERT PATH file/path/to/Snippet.jsx] + client/src/components/About/DefaultView.jsx ```jsx - [Code example showing the fix/solution] + [const DefaultView = ({ aboutList }) => { + const classes = useStyles(); + if (!aboutList || aboutList?.length === 0) { + return null; + } + return ( + <> + {aboutList.map(about => ( +
+

{about.title}

+ +
+ ))} + + ); +};] ``` #### Why the Fix Works -[INSERT CONTENT] +This fix becuase it removes the gap in sequential heading levels within a single page. #### Where this solution is applicable -- [INSERT SCENARIO 1] -- [INSERT SCENARIO 2] -- [INSERT SCENARIO N] +- Any page of the website since all pages should have an h1 and then require sequential heading levels for any subheadings. #### Screenshots of WAVE Error @@ -164,4 +193,5 @@ The following material covers how the Project Team has provided a solution to th - @experimentsinhonesty - @Rabia2219 +- @ColinBuyck - [INCLUDE Contributor N] From 7768c0f19068592b5f1484f2f858070055c23866 Mon Sep 17 00:00:00 2001 From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com> Date: Fri, 3 Apr 2026 14:03:05 -0700 Subject: [PATCH 2/3] fix: add wave image and description Updated the image description and removed redundant sections. --- .../alert-skipped-heading-level.md | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md index d377ba6..c9f3b88 100644 --- a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md +++ b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md @@ -173,21 +173,11 @@ This fix becuase it removes the gap in sequential heading levels within a single -??? Info "1. Descriptive Title for Screenshot Set 1" - - Description/text for image - - [INSERT IMAGE HERE] +??? Info "1. Image showing WAVE heading level skipped error with

tag highlighted within page. " + + Screenshot 2026-03-18 191647 - Description/text for image - - [INSERT IMAGE HERE] - -??? Info "1. Descriptive Title for Screenshot Set 2" - - Descriptoin/text for image - [INSERT IMAGE HERE] ## Credits/Authors From 676565d71ba5a6d9afde61998ef720b98e33a2f4 Mon Sep 17 00:00:00 2001 From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com> Date: Fri, 3 Apr 2026 14:24:49 -0700 Subject: [PATCH 3/3] Update formatting and snippets for clarity --- .../alert-skipped-heading-level.md | 59 ++++++++++--------- 1 file changed, 32 insertions(+), 27 deletions(-) diff --git a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md index c9f3b88..41120b3 100644 --- a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md +++ b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md @@ -41,7 +41,11 @@ WAVE Tool's Reference material on Skipped heading level may not specifically add ## Example of a DOM Snippet Generated From WAVE Tool > ```html -> [HTML snippet showing the problematic code structure that WAVE detected] +>

About the TDM Calculator

+>
+>

What does TDM mean?

+> ... +>
> ``` ## Project Team Error guidance @@ -116,11 +120,13 @@ The following material covers how the Project Team has provided a solution to th #### What is the specific problem that was occurring? -The issues above were caused by a skip in sequential heading level within a page's html. For example, if a page had a

and

, but no

. This is problematic for assistive technology users because heading levels serve as a table of contents for understanding the structure of information on a web page. When a heading level is skipped, a user may assume there is missing information or that there are no further heading levels to explore when they encounter a heading level with no content. It is a major break in expected behavior and is disruptive for a user's ability to understand a page quickly. + +`The issues above were caused by a skip in sequential heading level within a page's html. For example, if a page had a

and

, but no

. This is problematic for assistive technology users because heading levels serve as a table of contents for understanding the structure of information on a web page. When a heading level is skipped, a user may assume there is missing information or that there are no further heading levels to explore when they encounter a heading level with no content. It is a major break in expected behavior and is disruptive for a user's ability to understand a page quickly` #### What is the proposed solution to this problem? -This can be resolved by updated the heading levels so that no levels are skipped. In the example provided above, the

heading should be updated to

. In addition, we should double check that this update does not create a new skipped heading level for the rest of the page and if so, update accordingly. + +`This can be resolved by updated the heading levels so that no levels are skipped. In the example provided above, the

heading should be updated to

. In addition, we should double check that this update does not create a new skipped heading level for the rest of the page and if so, update accordingly.` #### Step-By-Step Guide @@ -135,35 +141,33 @@ N/A #### Code Snippet With Solution -??? Info "Click to see code snippets" - client/src/components/About/DefaultView.jsx ```jsx [const DefaultView = ({ aboutList }) => { - const classes = useStyles(); - if (!aboutList || aboutList?.length === 0) { - return null; - } - return ( - <> - {aboutList.map(about => ( -
-

{about.title}

- -
- ))} - - ); -};] + const classes = useStyles(); + if (!aboutList || aboutList?.length === 0) { + return null; + } + return ( + <> + {aboutList.map(about => ( +
+

{about.title}

+ +
+ ))} + + ); + };] ``` #### Why the Fix Works -This fix becuase it removes the gap in sequential heading levels within a single page. +- This fix becuase it removes the gap in sequential heading levels within a single page. #### Where this solution is applicable @@ -173,9 +177,10 @@ This fix becuase it removes the gap in sequential heading levels within a single -??? Info "1. Image showing WAVE heading level skipped error with

tag highlighted within page. " - - Screenshot 2026-03-18 191647 +Info 1. + WAVE tool showing skipped heading level error + +