From e5d23e914b76c0d5ccbe4bb98ae97f16f50831dc Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 11:50:16 -0500 Subject: [PATCH 01/41] Create aria-aria-description.md --- .../solutions-index/aria-aria-description.md | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/aria-aria-description.md diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-description.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-description.md new file mode 100644 index 00000000..69bde2b1 --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-description.md @@ -0,0 +1,122 @@ +# ARIA - ARIA description +- WAVE Category: ARIA +- WAVE ARIA: ARIA description + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on ARIA description may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aria_describedby + + > ### WAVE Category + > ARIA + > ### WAVE Error + > ARIA description + > ### What It Means + > An aria-describedby attribute is present. + > ### Why It Matters + > ARIA descriptions provide additional information about interface elements, primarily form controls. + > ### What To Do + > Ensure the aria-describedby attribute references an element that provides a correct description. + > ### The Algorithm... in English + > An aria-describedby attribute is present. + > ### Standards and Guidelines + > - [1.3.1 Info and Relationships (Level A)](https://webaim.org/standards/wcag/checklist#sc1.3.1) + > - [4.1.2 Name, Role, Value (Level A)](https://webaim.org/standards/wcag/checklist#sc4.1.2) + +## Example of a DOM Snippet Generated From WAVE Tool + +> ```html +> [HTML snippet showing the problematic code structure that WAVE detected] +> ``` + + +## Project Team Error guidance + +The following material covers how the Project Team has provided a solution to the [Alert/ARIA/Contrast Error/Error Name] WAVE [Alert/ARIA/Contrast Error/Error]. + +### Project Page Details +- Project Page name: [INSERT PAGE NAME or "ALL"] +- Project Dev URL: [INSERT URL or "N/A"] +- Requires sign in: [TRUE OR FALSE] + - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin] + - Can access page directly from URL: [TRUE OR FALSE] + - Accepts URL parameters: [TRUE OR FALSE] + +### Project Team Issue and PR details +- Related GitHub Issue(s): + - [INSERT ISSUE URL] +- Related Pull Request(s): + - [INSERT PR URL] +- React Component(s) + - [INSERT PATH: e.g. path/to/Component.jsx] + +### Project Team Solution + +#### What is the specific problem that was occurring? + +[INSERT CONTENT] + +#### What is the proposed solution to this problem? + +[INSERT CONTENT] + +#### Step-By-Step Guide + + +??? Info "Click to see step-by-step guide" + + [ADD DETAILED INSTRUCTIONS HERE] + +#### Other Technical Details + + +??? Info "Click to see other technical details" + + [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] + + ```jsx + [Code example showing the fix/solution] + ``` + +#### Why the Fix Works + +[INSERT CONTENT] + +#### Where this solution is applicable + +- [INSERT SCENARIO 1] +- [INSERT SCENARIO 2] +- [INSERT SCENARIO N] + +#### Screenshots of WAVE Error + + + +??? Info "1. Descriptive Title for Screenshot Set 1" + + Description/text for image + + [INSERT IMAGE HERE] + +## Credits/Authors + +- @Rabia2219 +- [INCLUDE Contributor 2] +- [INCLUDE Contributor N] From 0b1b53c1a1ef9ddd65cc4502afcf1a0cad9a22e5 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 11:55:08 -0500 Subject: [PATCH 02/41] Create aria-aria-expanded.md add new file --- .../solutions-index/aria-aria-expanded.md | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md new file mode 100644 index 00000000..f4ed3aec --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md @@ -0,0 +1,121 @@ +# ARIA - ARIA expanded +- WAVE Category: ARIA +- WAVE ARIA: ARIA expanded + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on ARIA expanded may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aria_expanded + + > ### WAVE Category + > ARIA + > ### WAVE Error + > ARIA expanded + > ### What It Means + > An aria-expanded attribute is present. + > ### Why It Matters + > The aria-expanded attribute indicates the status of content that can be expanded and collapsed. + > ### What To Do + > Ensure that aria-expanded is used correctly (typically on a button that controls expandable content) and that the value (true or false) reflects the expansion state. + > ### The Algorithm... in English + > An element with an aria-expanded attribute is present. + > ### Standards and Guidelines + > - [4.1.2 Name, Role, Value (Level A)](https://webaim.org/standards/wcag/checklist#sc4.1.2) + +## Example of a DOM Snippet Generated From WAVE Tool + +> ```html +> [HTML snippet showing the problematic code structure that WAVE detected] +> ``` + + +## Project Team Error guidance + +The following material covers how the Project Team has provided a solution to the [Alert/ARIA/Contrast Error/Error Name] WAVE [Alert/ARIA/Contrast Error/Error]. + +### Project Page Details +- Project Page name: [INSERT PAGE NAME or "ALL"] +- Project Dev URL: [INSERT URL or "N/A"] +- Requires sign in: [TRUE OR FALSE] + - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin] + - Can access page directly from URL: [TRUE OR FALSE] + - Accepts URL parameters: [TRUE OR FALSE] + +### Project Team Issue and PR details +- Related GitHub Issue(s): + - [INSERT ISSUE URL] +- Related Pull Request(s): + - [INSERT PR URL] +- React Component(s) + - [INSERT PATH: e.g. path/to/Component.jsx] + +### Project Team Solution + +#### What is the specific problem that was occurring? + +[INSERT CONTENT] + +#### What is the proposed solution to this problem? + +[INSERT CONTENT] + +#### Step-By-Step Guide + + +??? Info "Click to see step-by-step guide" + + [ADD DETAILED INSTRUCTIONS HERE] + +#### Other Technical Details + + +??? Info "Click to see other technical details" + + [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] + + ```jsx + [Code example showing the fix/solution] + ``` + +#### Why the Fix Works + +[INSERT CONTENT] + +#### Where this solution is applicable + +- [INSERT SCENARIO 1] +- [INSERT SCENARIO 2] +- [INSERT SCENARIO N] + +#### Screenshots of WAVE Error + + + +??? Info "1. Descriptive Title for Screenshot Set 1" + + Description/text for image + + [INSERT IMAGE HERE] + +## Credits/Authors + +- [INCLUDE Contributor 1] +- [INCLUDE Contributor 2] +- [INCLUDE Contributor N] From 7bc3dec0f9c7e54d3966ed425c850cc39af46e68 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 11:55:58 -0500 Subject: [PATCH 03/41] Update aria-aria-expanded.md --- .../solutions-index/aria-aria-expanded.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md index f4ed3aec..426a4717 100644 --- a/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-expanded.md @@ -116,6 +116,6 @@ The following material covers how the Project Team has provided a solution to th ## Credits/Authors -- [INCLUDE Contributor 1] +- @Rabia2219 - [INCLUDE Contributor 2] - [INCLUDE Contributor N] From 1be1751bd5d296ac4e8c8b15d4fd752bd1a70047 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 11:59:25 -0500 Subject: [PATCH 04/41] Create aria-aria-hidden.md add new file --- .../solutions-index/aria-aria-hidden.md | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/aria-aria-hidden.md diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-hidden.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-hidden.md new file mode 100644 index 00000000..b9bff8c0 --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-hidden.md @@ -0,0 +1,121 @@ +# ARIA - ARIA hidden +- WAVE Category: ARIA +- WAVE ARIA: ARIA hidden + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on ARIA hidden may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aria_hidden + + > ### WAVE Category + > ARIA + > ### WAVE Error + > ARIA hidden + > ### What It Means + > Content is hidden with ARIA. + > ### Why It Matters + > Content hidden with aria-hidden="true" is not presented to screen reader users. + > ### What To Do + > Ensure the content is intended to be hidden from screen reader users. The hidden content must not contain any navigable elements (such as links or form controls). + > ### The Algorithm... in English + > An element with aria-hidden="true" is present. + > ### Standards and Guidelines + > - [4.1.2 Name, Role, Value (Level A)](https://webaim.org/standards/wcag/checklist#sc4.1.2) + +## Example of a DOM Snippet Generated From WAVE Tool + +> ```html +> [HTML snippet showing the problematic code structure that WAVE detected] +> ``` + + +## Project Team Error guidance + +The following material covers how the Project Team has provided a solution to the [Alert/ARIA/Contrast Error/Error Name] WAVE [Alert/ARIA/Contrast Error/Error]. + +### Project Page Details +- Project Page name: [INSERT PAGE NAME or "ALL"] +- Project Dev URL: [INSERT URL or "N/A"] +- Requires sign in: [TRUE OR FALSE] + - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin] + - Can access page directly from URL: [TRUE OR FALSE] + - Accepts URL parameters: [TRUE OR FALSE] + +### Project Team Issue and PR details +- Related GitHub Issue(s): + - [INSERT ISSUE URL] +- Related Pull Request(s): + - [INSERT PR URL] +- React Component(s) + - [INSERT PATH: e.g. path/to/Component.jsx] + +### Project Team Solution + +#### What is the specific problem that was occurring? + +[INSERT CONTENT] + +#### What is the proposed solution to this problem? + +[INSERT CONTENT] + +#### Step-By-Step Guide + + +??? Info "Click to see step-by-step guide" + + [ADD DETAILED INSTRUCTIONS HERE] + +#### Other Technical Details + + +??? Info "Click to see other technical details" + + [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] + + ```jsx + [Code example showing the fix/solution] + ``` + +#### Why the Fix Works + +[INSERT CONTENT] + +#### Where this solution is applicable + +- [INSERT SCENARIO 1] +- [INSERT SCENARIO 2] +- [INSERT SCENARIO N] + +#### Screenshots of WAVE Error + + + +??? Info "1. Descriptive Title for Screenshot Set 1" + + Description/text for image + + [INSERT IMAGE HERE] + +## Credits/Authors + +- @Rabia2219 +- [INCLUDE Contributor 2] +- [INCLUDE Contributor N] From 0972c62566ac3cfc2d0fc26ed816f85e376cc807 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 12:04:19 -0500 Subject: [PATCH 05/41] Create aria-aria-menu.md add new file --- .../solutions-index/aria-aria-menu.md | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/aria-aria-menu.md diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-menu.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-menu.md new file mode 100644 index 00000000..a5c1864a --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-menu.md @@ -0,0 +1,122 @@ +# ARIA - ARIA menu +- WAVE Category: ARIA +- WAVE ARIA: ARIA menu + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on ARIA menu may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aria_menu + + > ### WAVE Category + > ARIA + > ### WAVE Error + > ARIA menu + > ### What It Means + > An ARIA menu is present. + > ### Why It Matters + > ARIA menus are application menus (like those used in software menu) with a specific keyboard interactions. They are NOT for navigation links on a web site. + > ### What To Do + > Ensure that the menu is an application menu and has the appropriate keyboard interactions (menu items are navigated via the arrow keys, not via the Tab key), otherwise remove the menu role. + > ### The Algorithm... in English + > An element with role="menu" or role="menubar" is present. + > ### Standards and Guidelines + > - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1) + > - [4.1.2 Name, Role, Value (Level A)](https://webaim.org/standards/wcag/checklist#sc4.1.2) + +## Example of a DOM Snippet Generated From WAVE Tool + +> ```html +> [HTML snippet showing the problematic code structure that WAVE detected] +> ``` + + +## Project Team Error guidance + +The following material covers how the Project Team has provided a solution to the [Alert/ARIA/Contrast Error/Error Name] WAVE [Alert/ARIA/Contrast Error/Error]. + +### Project Page Details +- Project Page name: [INSERT PAGE NAME or "ALL"] +- Project Dev URL: [INSERT URL or "N/A"] +- Requires sign in: [TRUE OR FALSE] + - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin] + - Can access page directly from URL: [TRUE OR FALSE] + - Accepts URL parameters: [TRUE OR FALSE] + +### Project Team Issue and PR details +- Related GitHub Issue(s): + - [INSERT ISSUE URL] +- Related Pull Request(s): + - [INSERT PR URL] +- React Component(s) + - [INSERT PATH: e.g. path/to/Component.jsx] + +### Project Team Solution + +#### What is the specific problem that was occurring? + +[INSERT CONTENT] + +#### What is the proposed solution to this problem? + +[INSERT CONTENT] + +#### Step-By-Step Guide + + +??? Info "Click to see step-by-step guide" + + [ADD DETAILED INSTRUCTIONS HERE] + +#### Other Technical Details + + +??? Info "Click to see other technical details" + + [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] + + ```jsx + [Code example showing the fix/solution] + ``` + +#### Why the Fix Works + +[INSERT CONTENT] + +#### Where this solution is applicable + +- [INSERT SCENARIO 1] +- [INSERT SCENARIO 2] +- [INSERT SCENARIO N] + +#### Screenshots of WAVE Error + + + +??? Info "1. Descriptive Title for Screenshot Set 1" + + Description/text for image + + [INSERT IMAGE HERE] + +## Credits/Authors + +- @Rabia2219 +- [INCLUDE Contributor 2] +- [INCLUDE Contributor N] From ddda032d662c0770a67f2e8efdb31c620e01c061 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 12:19:08 -0500 Subject: [PATCH 06/41] Create aria-aria-popup.md add new file --- .../solutions-index/aria-aria-popup.md | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/aria-aria-popup.md diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-popup.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-popup.md new file mode 100644 index 00000000..530c3fdf --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-popup.md @@ -0,0 +1,121 @@ +# ARIA - ARIA popup +- WAVE Category: ARIA +- WAVE ARIA: ARIA popup + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on ARIA popup may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aria_haspopup + + > ### WAVE Category + > ARIA + > ### WAVE Error + > ARIA popup + > ### What It Means + > An element triggers a popup menu, dialog, or other element. + > ### Why It Matters + > The aria-haspopup element, when applied to a button, indicates that triggering the element will open an ARIA menu, dialog, listbox, tree, or grid. + > ### What To Do + > Ensure that the element triggers an ARIA menu, dialog, listbox, tree, or grid and that the aria-haspop attribute value aligns with the type of element that is opened. + > ### The Algorithm... in English + > An aria-haspopup attribute is present. + > ### Standards and Guidelines + > - [4.1.2 Name, Role, Value (Level A)](https://webaim.org/standards/wcag/checklist#sc4.1.2) + +## Example of a DOM Snippet Generated From WAVE Tool + +> ```html +> [HTML snippet showing the problematic code structure that WAVE detected] +> ``` + + +## Project Team Error guidance + +The following material covers how the Project Team has provided a solution to the [Alert/ARIA/Contrast Error/Error Name] WAVE [Alert/ARIA/Contrast Error/Error]. + +### Project Page Details +- Project Page name: [INSERT PAGE NAME or "ALL"] +- Project Dev URL: [INSERT URL or "N/A"] +- Requires sign in: [TRUE OR FALSE] + - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin] + - Can access page directly from URL: [TRUE OR FALSE] + - Accepts URL parameters: [TRUE OR FALSE] + +### Project Team Issue and PR details +- Related GitHub Issue(s): + - [INSERT ISSUE URL] +- Related Pull Request(s): + - [INSERT PR URL] +- React Component(s) + - [INSERT PATH: e.g. path/to/Component.jsx] + +### Project Team Solution + +#### What is the specific problem that was occurring? + +[INSERT CONTENT] + +#### What is the proposed solution to this problem? + +[INSERT CONTENT] + +#### Step-By-Step Guide + + +??? Info "Click to see step-by-step guide" + + [ADD DETAILED INSTRUCTIONS HERE] + +#### Other Technical Details + + +??? Info "Click to see other technical details" + + [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] + + ```jsx + [Code example showing the fix/solution] + ``` + +#### Why the Fix Works + +[INSERT CONTENT] + +#### Where this solution is applicable + +- [INSERT SCENARIO 1] +- [INSERT SCENARIO 2] +- [INSERT SCENARIO N] + +#### Screenshots of WAVE Error + + + +??? Info "1. Descriptive Title for Screenshot Set 1" + + Description/text for image + + [INSERT IMAGE HERE] + +## Credits/Authors + +- @Rabia2219 +- [INCLUDE Contributor 2] +- [INCLUDE Contributor N] From d71897785f0d5a58f18e62ffda5e0918163f2228 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 12:21:55 -0500 Subject: [PATCH 07/41] Create aria-aria-tabindex.md add new file --- .../solutions-index/aria-aria-tabindex.md | 121 ++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/aria-aria-tabindex.md diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-tabindex.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-tabindex.md new file mode 100644 index 00000000..05d1a26e --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/aria-aria-tabindex.md @@ -0,0 +1,121 @@ +# ARIA - ARIA tabindex +- WAVE Category: ARIA +- WAVE ARIA: ARIA tabindex + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on ARIA tabindex may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aria_tabindex + + > ### WAVE Category + > ARIA + > ### WAVE Error + > ARIA tabindex + > ### What It Means + > A tabindex value of 0 or less is present. + > ### Why It Matters + > Tabindex can facilitate keyboard navigation for interactive elements. A tabindex attribute value of 0 places an item into the keyboard navigation order (i.e., you can navigate to it using the Tab key). A value of less than 0 (typically -1) removes an element from the keyboard flow (you cannot Tab to it), but allows it to receive programmatic focus (e.g., via scripting). + > ### What To Do + > Ensure that tabindex is being used correctly by navigating and interacting with the elements using only the keyboard. Positive tabindex values specify a distinct tab order and should typically be avoided. + > ### The Algorithm... in English + > A tabindex attribute is present and has a value of 0 or less. + > ### Standards and Guidelines + > - [2.1.1 Keyboard (Level A)](https://webaim.org/standards/wcag/checklist#sc2.1.1) + +## Example of a DOM Snippet Generated From WAVE Tool + +> ```html +> [HTML snippet showing the problematic code structure that WAVE detected] +> ``` + + +## Project Team Error guidance + +The following material covers how the Project Team has provided a solution to the [Alert/ARIA/Contrast Error/Error Name] WAVE [Alert/ARIA/Contrast Error/Error]. + +### Project Page Details +- Project Page name: [INSERT PAGE NAME or "ALL"] +- Project Dev URL: [INSERT URL or "N/A"] +- Requires sign in: [TRUE OR FALSE] + - Required User Role: [INSERT ONE OF: Visitor, Logged in user, Admin, Security Admin] + - Can access page directly from URL: [TRUE OR FALSE] + - Accepts URL parameters: [TRUE OR FALSE] + +### Project Team Issue and PR details +- Related GitHub Issue(s): + - [INSERT ISSUE URL] +- Related Pull Request(s): + - [INSERT PR URL] +- React Component(s) + - [INSERT PATH: e.g. path/to/Component.jsx] + +### Project Team Solution + +#### What is the specific problem that was occurring? + +[INSERT CONTENT] + +#### What is the proposed solution to this problem? + +[INSERT CONTENT] + +#### Step-By-Step Guide + + +??? Info "Click to see step-by-step guide" + + [ADD DETAILED INSTRUCTIONS HERE] + +#### Other Technical Details + + +??? Info "Click to see other technical details" + + [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] + + ```jsx + [Code example showing the fix/solution] + ``` + +#### Why the Fix Works + +[INSERT CONTENT] + +#### Where this solution is applicable + +- [INSERT SCENARIO 1] +- [INSERT SCENARIO 2] +- [INSERT SCENARIO N] + +#### Screenshots of WAVE Error + + + +??? Info "1. Descriptive Title for Screenshot Set 1" + + Description/text for image + + [INSERT IMAGE HERE] + +## Credits/Authors + +- @Rabia2219 +- [INCLUDE Contributor 2] +- [INCLUDE Contributor N] From 313ab256eb571f485021e960fe45bb1900eae3d4 Mon Sep 17 00:00:00 2001 From: Rabia Shaikh Date: Mon, 23 Mar 2026 12:25:09 -0500 Subject: [PATCH 08/41] Create structural-elements-aside.md add new file --- .../structural-elements-aside.md | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 docs/known-issues-and-solutions/solutions-index/structural-elements-aside.md diff --git a/docs/known-issues-and-solutions/solutions-index/structural-elements-aside.md b/docs/known-issues-and-solutions/solutions-index/structural-elements-aside.md new file mode 100644 index 00000000..7c326733 --- /dev/null +++ b/docs/known-issues-and-solutions/solutions-index/structural-elements-aside.md @@ -0,0 +1,122 @@ +# Structural Elements - Aside +- WAVE Category: Structural Elements +- WAVE Structural Elements: Aside + +## Page Content Status +- [X] WAVE Error guidance text +- [ ] Example of a DOM Snippet Generated From WAVE Tool +- Project Team Error guidance + - [ ] Project Team Page Details + - [ ] Project Team Issue and PR details + - [ ] Project Team Solution +- [ ] Credits/Authors + +## WAVE Guidance + +WAVE Tool's Reference material on Aside may not specifically address your problem. We provide it here for optional reading. + +??? Info "Click to see WAVE Tool Reference" + + This content added 2026-03-23. Check for updated guidance at: https://wave.webaim.org/api/docs?format=html#aside + + > ### WAVE Category + > Structural Elements + > ### WAVE Error + > Aside + > ### What It Means + > An `