Incorrect focus outline in audio waveform when used in row layout

[dhruvkb]

Description

The focus outline of the waveform does not render correctly when it's connected to the right with the play pause button in the row layout.

Notice how

• the left edge is rounded when it should not be
• the yellow bleeds out of the top-left corner
• the black bleeds out of the bottom-left corner

Additional context

The focus outline is currently drawn using SVG <rect> so it's not possible to use different radii for each corner. Changing that to <path> would solve this but generating the paths programmatically is not trivial.

Resolution

• [ ] 🙋 I would be interested in resolving this bug.

[zackkrida]

@dhruvkb am I understanding correctly that with the composite component work in #1297 the waveform itself would no longer have a focus ring, instead the whole audio track would?

[dhruvkb]

Yes @zackkrida that's true. Once that is implemented, we can remove all focus-related ornamentation from the component and close the issue.