Fix double border in closed widget wrapper
Summary
The Child items box on issues has a double border in its closed state.
Steps to reproduce
- Go to an issue
- Close the Child items box with the chevron on the right
Relevant logs and/or screenshots
Current | Expected |
---|---|
Implementation Guide
The component responsible for collapsing the Child items is the widget wrapper, found at app/assets/javascripts/work_items/components/widget_wrapper.vue
. We should:
- Add
:aria-expanded="isOpen.toString()"
to the top-levelgl-new-card
in the widget wrapper.
For reference,aria-expanded=false
is used in GitLab UI to hide the superfluous bottom border if the card is collapsed:.gl-new-card[aria-expanded=false] .gl-new-card-header { border-bottom: 0; border-radius: .25rem }
- Follow the Steps to reproduce above to see if the fix worked
- We can optionally add a test in
spec/frontend/work_items/components/widget_wrapper_spec.js
to see thataria-expanded
isfalse
if collapsed, andtrue
if not collapsed. You can add adata-testid
to thegl-new-card
(where you added thearia-expanded
) and use thewrapper.findByTestId
method to access the element like thewidget-body
.