[Bug]: Addon-a11y displays visual bug when running the tests

[yannbf]

Describe the bug

The "Highlight results" checkbox gets misplaced as you run the a11y tests:

To Reproduce

1. Access any Storybook with addon-a11y, for instance this one: https://mealdrop.vercel.app/storybook/?path=/story/components-iconbutton--default
2. Open Accessibility panel
3. Open the "Passes" tab, where "Highlight results" is shown
4. Click on "Tests completed" at the bottom right
5. Experience the bug!

System

No response

Additional context

No response

[Nevnet99]

Will also take this one :) if it's going :)

[tajbaba999]

Hey @yannbf can you please tell me the steps to produce this bug? can you please assign me this issue?

[yoshi2no]

Hi! @yannbf

I'm working on this issue, but I have a question regarding the solution. It seems that with this change in #6563, the Highlight results section is moved when the width of the Container is small(450px). However, when clicking on Tests completed, the value of width from useResizeDetector becomes undefined, causing it to be perceived as having a small width even on a PC display.

file: code/addons/a11y/src/components/Tabs.tsx

To resolve this issue, We could hide the Highlight results element until the width of the Container is obtained. However, it disappears every time Tests completed is clicked.

width-undefined.mp4

Alternatively, we could stop moving the Highlight results based on the Container's width and fix its position. Then, if it's less than 450px, it can be viewed through scrolling. Which approach seems better? Thanks!

[yannbf]

Hey @yoshi2no thanks for working on it! I'll leave it up for @cdedreuille to give his opinion design-wise.

[cdedreuille]

I think your second option seems the most appropriate since we need horizontal scrolling anyway. The only thing I would add based on what your shared is that we need to add padding on the right to make sure the checkbox is not touching the sides.

[JohannesFischer]

I don't even think this needs the resize observer and this can be fixed in a CSS only solution. Happy to work on this if someone assigns this to me.

[yannbf]

@JohannesFischer feel free to propose a PR, we'd love to see it :)