Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-121559

As a developer I want to be able to validate my page accessibility conformance

    Details

      Description

      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


      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 the a11y tool is disabled in the system settings  the a11y tool is disabled in com.liferay.frontend.js.a11y.web.internal.configuration.FFA11yConfiguration.config with enable=B"false"
      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 DOM element where rule violation takes place 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        

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              jose.balsas Chema Balsas
              Recent user:
              Bruno Fernández
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package