So as I am going through and writing some tests, I am noticing that the many components share the functionality of hiding or displaying element / content and I was just wondering what the ideas behind this functionality are for this library?

Per WebAIM there are two widely accepted techniques on this.

Techniques for hiding content
There are several mechanisms that can be used for hiding content. It's important that a technique be implemented that results in the desired outcome and accessibility.

display:none or visibility: hidden
These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you want hidden from all users.

hidden attribute
The HTML hidden attribute is relatively new and not supported on older browsers like IE11. When supported, it functions the same as CSS display:none—elements with this attribute will not be presented to any user.

I understand that this could be intentional as to leave the implementation up to the developer, but it certainly makes testing a bit more difficult. For example, I am using jest-dom to test components as though they exist on the DOM. I am running into the issue of not being able to use semantic test matchers like expect( elem ).toBeVisible( ) because several of the components seem to be reliant on styling for this. Which I could probably change the test to pass with certain conditions, but that would make the test brittle, and not semantic or readable.

For reference, this is what the toBeVisible( ) function looks for.

This allows you to check if an element is currently visible to the user.

An element is visible if all the following conditions are met:

it does not have its css property display set to none
it does not have its css property visibility set to either hidden or collapse
it does not have its css property opacity set to 0
its parent element is also visible (and so on up to the top of the DOM tree)
it does not have the hidden attribute
if <details /> has the open attribute

It begs the question as to whether this should be more of a directive that can be used across components or whether the expectation is for developers to just use a v-if or v-show . In either case I think we need to define the standard to do this that makes the unit tests more understandable in this fashion.

I am thinking a directive would be best because perhaps we can squeeze the logic in to handle modern hidden attribute cases as well as the IE11 support of display: none. Leaving it as a directive also makes it optional and tree shakable. The downside is perhaps components might slowly over time become tied to the implementation of that directive.

In my opinion though it would greatly help to clarify the testing for both screen, and screen-readers contexts from the unit tests and give a more clear defined way for developers to distinguish between these functionalities.

Just some of my thoughts. Perhaps I am off base?