Skip to content

Include axe checks on branches page spec

Annabel Dunstone Gray requested to merge 430164-axe-download_buttons_spec into master

What does this MR do and why?

Include axe checks in spec/features/projects/branches/download_buttons_spec.rb feature test

Failures:

  1) Download buttons in branches page when checking branches with artifacts passes axe automated accessibility testing
     Failure/Error: expect(page).to be_axe_clean.within('.project-action-button')

       Found 3 accessibility violations:

       1) aria-required-children: Certain ARIA roles must contain particular children (critical)
           https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
           The following 1 node violate this rule:

               Selector: .dropdown-menu
               HTML: <ul class="dropdown-menu dropdown-menu-right show" role="menu">
               Fix any of the following:
               - Element has children which are not allowed (see related nodes)
               - Element has no aria-busy="true" attribute

       2) heading-order: Heading levels should only increase by one (moderate)
           https://dequeuniversity.com/rules/axe/4.6/heading-order?application=axeAPI
           The following 1 node violate this rule:

               Selector: .gl-dropdown-item:nth-child(1) > h5
               HTML: <h5 class="m-0 dropdown-bold-header">Download source code</h5>
               Fix any of the following:
               - Heading order invalid

       3) listitem: <li> elements must be contained in a <ul> or <ol> (serious)
           https://dequeuniversity.com/rules/axe/4.6/listitem?application=axeAPI
           The following 5 nodes violate this rule:

               Selector: .gl-dropdown-item:nth-child(1)
               HTML: <li class="gl-dropdown-item">
               Fix any of the following:
               - List item does not have a <ul>, <ol> parent element without a role, or a role="list"

               Selector: .divider.mt-2:nth-child(3)
               HTML: <li class="divider mt-2"></li>
               Fix any of the following:
               - List item does not have a <ul>, <ol> parent element without a role, or a role="list"

               Selector: .gl-dropdown-item:nth-child(4)
               HTML: <li class="gl-dropdown-item"><h5 class="m-0 dropdown-bold-header">Download artifacts</h5></li>
               Fix any of the following:
               - List item does not have a <ul>, <ol> parent element without a role, or a role="list"

               Selector: .divider.mt-2:nth-child(5)
               HTML: <li class="divider mt-2"></li>
               Fix any of the following:
               - List item does not have a <ul>, <ol> parent element without a role, or a role="list"

               Selector: .gl-dropdown-item:nth-child(6)
               HTML: <li class="gl-dropdown-item">
               Fix any of the following:
               - List item does not have a <ul>, <ol> parent element without a role, or a role="list"

✂️ UX Paper Cuts 16.7 → Project page (#430244 - closed)

Related to #430164 (closed)

Edited by Annabel Dunstone Gray

Merge request reports