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..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 @@ -96,72 +100,93 @@ 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 -??? Info "1. Descriptive Title for Screenshot Set 1" +Info 1. + WAVE tool showing skipped heading level error - Description/text for image - [INSERT IMAGE HERE] - Description/text for image - - [INSERT IMAGE HERE] - -??? Info "1. Descriptive Title for Screenshot Set 2" - - Descriptoin/text for image - [INSERT IMAGE HERE] ## Credits/Authors - @experimentsinhonesty - @Rabia2219 +- @ColinBuyck - [INCLUDE Contributor N]