-
Type:
Epic
-
Status: Closed
-
Priority:
Minor
-
Resolution: Completed
-
Affects Version/s: None
-
Fix Version/s: None
-
Component/s: JS APIs and Utilities
-
Epic/Theme:
-
Epic Status:To Do
Getting accessibility right is a really tough and hard to maintain effort. As awareness increases, it becomes paramount that our product conforms to high accessibility standards to deliver as much possible value to our customers.
The goal of this epic is to create a visual tool to help find a11y issues.
In following epics, the component could be integrated as part of a development build for devs to validate their apps or as a user-facing feature to validate pages and sites. It would be good to sync with the Experience Management Product owners to validate our assumptions and make sure the solution fits their needs.
Acceptance Criteria (see each task acceptance criteria for detailed specs)
- The tool can be executed on runtime over a given page
- Tests the page for a given set of accessibility rules
- Runs automatically in the background
- Presents itself as a visual barrier to the experience
- Provides additional information about the a11y violations found an hints on how to address them
Additional Resources
- axe - Web Accessibility Testing
- @axe-core/react
- Making Facebook.com accessible to as many people as possible
Test Scenarios:
| Requirement | Test Case | Covered by frontend/backend unit test? (Yes/No) | Test Priority (business impact) | Chrome Pass/Fail |
|---|---|---|---|---|
| General Features | ||||
| 4. Presents itself as a visual barrier to the experience | Given a11y tool enabled And Given a highlighted violation is clicked When the user clicks outside of the pop-up panel Then the pop-up panel will close |
no | 4-major | |
| Activation | ||||
| 1. Tool can be executed on runtime over a given page 3. Runs automatically in the background |
Given portal bundle built with nodejs.node.env=development in the build.properties When bundle is started And open localhost:8080 (landing page) Then accessibility panel is present on the page |
no | 5-critical | |
| 1. Tool can be executed on runtime over a given page | Given any DXP bundle with nodejs.node.env=development in the build.properties And Given bundle is started and portal is loaded When Then accessibility panel is not present on the page |
no | 5-critical | |
| 1. Tool can be executed on runtime over a given page | Given any DXP bundle built with default build.properties When bundle is started and portal is loaded And open localhost:8080 (landing page) Then accessibility panel is not present on the page |
no | 5-critical | |
| Issues Related to Rule | ||||
| 2. Test the page for a given set of accessibility rules | Given a11y tool enabled When navigate to a page without any a11y violations Then side panel will list no violations on the page And Then there are no highlight elements present on the page And Then there are no icons present on the page |
no | 5-critical | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given a11y tool enabled And Given a fragment with a11y violation on a page When navigate to the page with a11y violations Then a side panel with violation is present on page |
no | 5-critical | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And Given a portal page with the panel in top-level view When there are violations on the page Then it will show a list of rules being violated sorted by descending impact |
no | 4-major | |
| 4. Presents itself as a visual barrier to the experience 5. Provides additional information about the a11y violations found as hints on how to address them |
Given a11y tool enabled And Given a fragment with 3 different a11y violation on a page When navigate to the page with a11y violations Then all elements that are in a11y violation will be highlighted And Then all elements with violation has an icon next to the highlight |
no | 4-major | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And Given a portal page with a rule violation When click on a rule in the accessibility panel Then accessibility panel contains info of accessibility rule violation: 1. rule name 2. impact level 3. link to Category rule (WCAG) And section that show details for the single rule being violated can be viewed And occurrences are listed on the accessibility panel |
no | 4-major | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given any portal page with a violation and a11y tool is enabled When violation icon is clicked Then pop up panel should appear And Rule name is present in pop up panel And Impact/severity indicating how serious the violation is, in a 3 or 4-value scale in pop up panel And Brief description of the rule is in pop up panel And Link to occurrence accessibility panel is in in pop up panel |
no | 3-medium | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given any portal page with a violation and a11y tool is enabled When violation icon is clicked And close button is clicked on pop up Then pop up panel should not be present |
no | 3-medium | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given a11y violations on a page And clicking the icon next to highlighted violation When click on a listed rule violation from pop up Then the side panel will show the violation occurrence And DOM element where rule violation takes place is in side panel |
no | 4-major | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And Given a portal page with a rule violation When click on a rule in the accessibility panel And click on a occurrence Then the correct target and code is displayed on the accessibility panel |
no | 4-major | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given a11y tool enabled and in top-level view And Given 2 of the same violations on the page And Given 1 different violation on the page When click the rule violation in the panel Then two occurrences are listed for the same violation And the 2 occurrences are highlighted on the page And the different violation is not listed nor highlighted |
no | 3-medium | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given a11y tool enabled and in top-level view And Given 2 of the same violations on the page When click the rule violation in the panel And click on occurrence 2 Then the occurrence 2 target and code information is correctly listed |
no | 3-medium | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And Given a portal page with no rule violations When a fragment with a rule violation is added to the page Then the rule violation will be highlighted and appear on the panel |
no | 4-major | |
| Filters | ||||
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given top-level view of accessibility panel When click on filter button Then toggles to change impact and category rule are available |
no | 5-critical | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And the portal page has a "Minor", "Moderate", "Serious", "Critical" set of violations When Impact filter is enabled on "Minor", "Moderate", "Serious", "Critical" set of violations Then it will show all four violations on the side panel And the elements with violation will be highlighted And the elements with violation have an icon next to the highlight |
no | 3-medium | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And the portal page has a "Minor", "Moderate", "Serious", "Critical" set of violations Then accessibility panel will order the violations from most important to less important |
no | 3-medium | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And the portal page has a "Minor", "Moderate", "Serious", "Critical" set of violations When Impact filter is set only for "Critical" Then it will show Critical violation on the side panel And the no other violations are present on side panel And the element with critical violation will be highlighted And there are no other highlights on the page And the element has an icon next to the highlight |
no | 5-critical | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given when a11y tool enabled And the portal page has a "Minor", "Moderate", "Serious", "Critical" set of violations When Impact filters are all turned off Then no violations are present on side panel And no elements highlights are present on page And no icons for violations are present on page |
no | 4-major | |
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given top-level view of side panel And Given in filter view is open When a filter is toggled/changed And refresh the page And When hover over the same accessibility issue that was toggled Then the filter is back to default setting |
no | 2-low | |
| Inspector | ||||
| 5. Provides additional information about the a11y violations found as hints on how to address them | Given a portal page with a rule violation When click on a rule in the accessibility panel And click on occurrence 1 in accessibility panel When the View In Inspector link is clicked in accessibility panel Then browser console will appear in element inspect mode And element that is in violation will be highlighted in the console |
no | 3-medium |
Exploratory Scenarios:
| Requirement | Test Case | Test Priority (business impact) | Chrome Pass/Fail |
Firefox Pass/Fail |
Edge Pass/Fail |
Safari Pass/Fail |
|---|---|---|---|---|---|---|
| 5. Provides additional information about the a11y violations found as hints on how to address them | Exploratory: Check that all filter toggles work as expected in all panel views | 2-low | ||||
| 5. Provides additional information about the a11y violations found as hints on how to address them | Exploratory: Identify a unique category rule (WCAG2.1 vs WCAG 2.0 and A/AA/AAA compliance) test that the filter works correctly. If you discover a good scenario that isn't already covered in automation/manual, write specific test scenario(s) for John to review. | 3-medium |
- is a dependency of
-
-
- Closed
-
- mentioned in
-
Page Loading...
-
-
-
-
-
-
-
-
-
-
-
(8 mentioned in)