Minimize the use of JS for layout in the VAudioTrack component
obulat opened this issue · comments
Problem
We use the prop
s on the VAudioTrack to conditionally change the layout based on 1. the JS-set properties such as isFilterVisible or the parent page and 2. the screen breakpoint. To improve the performance, as well as to simplify the JS code, it is better to move the handling of the second point to CSS, as much as possible.
Description
To simplify the VAudioTrack's row layout, use CSS grid and arrange the elements differently depending on the breakpoint. This will allow us only to have the m
and l
sizes (the s
layout is the same for both, and used for xs
and sm
and maybe md
breakpoints)
Additional context
Normally, the CSS grid causes the source order not to match the document order. This means that when you use keyboard to navigate, the focus order becomes different than what you expect. An example of the old mobile header: pressing the Tab key, you go to the search input on the second row, and then to the menu buttons in the first row. This can be very confusing for the user.
With the VAudioTrack, we don't have to worry about the tabbing order because we handle and change the tab order in the code anyways.
Implementation
- 🙋 I would be interested in implementing this feature.