Applying display:contents to the fieldset element appears to cause all other fieldset styles to be ignored. This can be ok on a base level because the USWDS styles are basically declaring a reset to 0. However, I get concerned that this will cause confusion with users who apply utility classes or styles to the fieldset element. It also looks like anchor ids aren't recognized.

Wanted to share this explanation for display:contents because I found the explanation helpful:

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. ¹

I do think that prioritizing usa-legend styles over usa-fieldset make sense because they are more substantive. I just wanted to check if this was the only path forward (does it make sense to apply the base style top margin to usa-fieldset instead of usa-legend?).

Regardless, we should find a way to document this very clearly.

One issue with moving the margin to usa-fieldset is that we offer two different legend options; usa-legend and usa-legend--large, which features larger text and a smaller margin.

I wonder if we could take a similar approach to prose and and set the margin using something like

.usa-fieldset {
   ...

   & > .usa-legend {
      margin-top: units(3);
   }
    
   & > + .usa-legend--large {
       margin-top: units(2);
   }
}

What do you think of that?

Ooh sorry I forgot there are limitations selecting a parent based on children. I'll look into using has() or other newer selectors to see if it's possible to set the margin on fieldset based on it's child element but we may be stuck there

Found my old notes on this issue and postcss rendering breaks when we attempt to target classes using :has().

Alternatively, we could consider creating classes for fieldset to handle the different legend sizes, but that would be a breaking change for users as well.

To me, this was the path of least resistance for users to utlize the margins set via usa-legend classes.

As far as documenting this change, do you thing we need to add guidance to our forms page or form elements that use fieldset such as checkbox / radio that users should be mindful when adding styles to fieldset/legend?

Ooh sorry I forgot there are limitations selecting a parent based on children. I'll look into using has() or other newer selectors to see if it's possible to set the margin on fieldset based on it's child element but we may be stuck there

This quirk is limited (or should be) to SASS mixins/functions.

@amyleadem @mahoneycm caniuse lists a resource ¹ for partial support. It has an important accessibility warning:

The display property has no effect on an element’s semantics: these are defined by the document language and are not affected by CSS. Aside from the none value, which also affects the aural/speech output and interactivity of an element and its descendants, the display property only affects visual layout: its purpose is to allow designers freedom to change the layout behavior of an element without affecting the underlying document semantics.

Looking at our sponsor list example, it means that the item is no longer seen as a list, but as something else (test case in CodePen).

It seems mostly resolved, but safari ² still has issues. Is there a quick alternative or should we bump from 3.7.0?