[feat] <rh-disclosure>

[eyevana]

Description

The catalog has a need for an rh-disclosure element. It's currently classified as a pattern on ux.redhat.com, but after discussing in office hours, it's really an element.

Acceptance Criteria

• Design done
• Development done

Image

No response

Link to design doc

No response

Other resources

No response

[bennypowers]

I think we can crib a bunch of implementation from uxdot-toc (which is basically disclosure at mobile widths) and docs from docs/patterns/disclosure

[markcaron]

For clarification / posterity, I want to make sure we're pursuing a strict disclosure UI and not conflating disclosure with an expandable section ("view more" on truncated content). IMO, that's a completely different pattern and component.

[hellogreg]

Just some quick notes if disclosure is going to wrap <details>...

Do not...

• Don't add an explicit role to <summary>. This may be tempting, because different browsers assign different implicit roles to it (e.g., summary, button, pushbutton, disclosure triangle). But explicit roles actually break <summary> role and state announcements in Mac VoiceOver/Safari!
• Don't add an aria-expanded attribute to <summary>. It's unnecessary and will not have any effect on the element. Instead, rely on the open attribute on the <details> element and let the browsers do their thing.

You can...(but)

• Unlike with buttons, you can add headings within <summary>, according to the spec. But...
  • Be aware that, because some browsers and screen readers treat <summary> as a button, the heading's semantics may be squashed, at least a bit. All major screen readers will let you navigate via these headings, but they may not be read as headings.
  • Any headings within a <summary> will need a display: inline property, or you risk the disclosure triangle and heading winding up on different lines.

Consider...

• Unlike most custom expandable/collapsable elements, pressing the esc key while focus is on <summary> will not collapse an open <details> element. You should be able to add this functionality with JS.
• Be careful messing with the display: CSS property of <details>/<summary> — at least not without doing a ton of browser testing first. Trying to make one or the other a grid or flex has historically had undesirable results! (Update: looks like inline-block on <details> is pretty safe. Thanks, Adam and Steven!)

[markcaron]

Similar to rh-footer's hiding content/links bug, I want to make sure that content elements are also built in ways that degrade gracefully.

We don't want to hide content if JS doesn't load properly.

With that—hopefully—rh-disclosure will fail open.