userTooltip and popoverMenu components#29
Open
khamer wants to merge 6 commits into
Open
Conversation
✅ Deploy Preview for imarc-pronto ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds two HTML/CSS-only UI components for displaying user details and compact action menus, plus supporting style exports and a danger color alias.
Changes:
- Adds
userTooltipatom demo and styles using the native Popover API. - Adds
popoverMenumolecule demo and styles using popover/anchor positioning. - Exports the new components and adds small circular button sizing plus
.dangercolor utility support.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
resources/styles/utilities/colors/index.scss |
Adds .danger as an alias for error accent colors. |
resources/styles/molecules/popoverMenu/popoverMenu.html |
Adds demo markup for end/start aligned popover menus. |
resources/styles/molecules/popoverMenu/index.scss |
Adds popover menu panel/list/action styles. |
resources/styles/molecules/index.scss |
Forwards the new popover menu molecule. |
resources/styles/atoms/userTooltip/userTooltip.html |
Adds demo markup for user detail popovers. |
resources/styles/atoms/userTooltip/index.scss |
Adds user tooltip/avatar/card styles. |
resources/styles/atoms/index.scss |
Forwards the new user tooltip atom. |
resources/styles/atoms/button/index.scss |
Adds a small size modifier for circle/square buttons. |
Comments suppressed due to low confidence (7)
resources/styles/molecules/popoverMenu/popoverMenu.html:39
- This second example repeats the ARIA menu pattern without
menuitemroles or menu keyboard behavior. Becauserole="menu"changes the expected semantics, the actions should either implement the ARIA menu pattern fully or remain ordinary list/buttons without menu roles.
<button type="button" class="popoverMenu__trigger button -circle -small -ghost" popovertarget="demo-popover-2" aria-controls="demo-popover-2" aria-haspopup="menu" aria-label="Open menu" style="anchor-name: --demo-popover-2">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" aria-hidden="true">
<path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" />
</svg>
</button>
<div id="demo-popover-2" class="popoverMenu__panel -startAligned" popover="auto">
<ul class="popoverMenu__list" role="menu">
resources/styles/atoms/userTooltip/userTooltip.html:23
- This trigger also declares a dialog popup while the referenced popover has no dialog semantics. Keeping
aria-haspopup="dialog"here can mislead assistive technology unless the panel is exposed as a named dialog.
<button type="button" class="userTooltip__trigger button -circle -small accent-secondary" popovertarget="demo-user-tooltip-2" aria-controls="demo-user-tooltip-2" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-2">
M
</button>
<div id="demo-user-tooltip-2" class="userTooltip__panel" popover="auto">
resources/styles/atoms/userTooltip/userTooltip.html:39
- This trigger advertises a dialog popup, but the target remains a generic popover
div. Align the ARIA with the actual semantics so screen reader users are not told to expect a dialog where none is exposed.
<button type="button" class="userTooltip__trigger button -circle -small accent-tertiary" popovertarget="demo-user-tooltip-3" aria-controls="demo-user-tooltip-3" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-3">
K
</button>
<div id="demo-user-tooltip-3" class="userTooltip__panel" popover="auto">
resources/styles/atoms/userTooltip/userTooltip.html:23
- This wrapper repeats the invalid
spancontaining a block-leveldivpanel pattern. A flow-content wrapper should be used so the component markup remains valid.
<span class="userTooltip">
<button type="button" class="userTooltip__trigger button -circle -small accent-secondary" popovertarget="demo-user-tooltip-2" aria-controls="demo-user-tooltip-2" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-2">
M
</button>
<div id="demo-user-tooltip-2" class="userTooltip__panel" popover="auto">
resources/styles/atoms/userTooltip/userTooltip.html:39
- This
spanalso contains the block-level popover panel, which is invalid HTML. Use adivor another flow-content wrapper for the component container.
<span class="userTooltip">
<button type="button" class="userTooltip__trigger button -circle -small accent-tertiary" popovertarget="demo-user-tooltip-3" aria-controls="demo-user-tooltip-3" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-3">
K
</button>
<div id="demo-user-tooltip-3" class="userTooltip__panel" popover="auto">
resources/styles/atoms/userTooltip/userTooltip.html:22
- The accessible name for this trigger is just "M", which is ambiguous when several user tooltip buttons are present. It should include the user's name or a clear action label.
<button type="button" class="userTooltip__trigger button -circle -small accent-secondary" popovertarget="demo-user-tooltip-2" aria-controls="demo-user-tooltip-2" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-2">
M
</button>
resources/styles/atoms/userTooltip/userTooltip.html:38
- This trigger is announced only by the initial "K", which is not descriptive enough to tell users which profile/details will open. Provide a full accessible label for the user tooltip button.
<button type="button" class="userTooltip__trigger button -circle -small accent-tertiary" popovertarget="demo-user-tooltip-3" aria-controls="demo-user-tooltip-3" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-3">
K
</button>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+6
to
+12
| <button type="button" class="popoverMenu__trigger button -circle -small -ghost" popovertarget="demo-popover-1" aria-controls="demo-popover-1" aria-haspopup="menu" aria-label="Open menu" style="anchor-name: --demo-popover-1"> | ||
| <svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" aria-hidden="true"> | ||
| <path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" /> | ||
| </svg> | ||
| </button> | ||
| <div id="demo-popover-1" class="popoverMenu__panel -endAligned" popover="auto"> | ||
| <ul class="popoverMenu__list" role="menu"> |
Comment on lines
+4
to
+7
| <button type="button" class="userTooltip__trigger button -circle -small" popovertarget="demo-user-tooltip-1" aria-controls="demo-user-tooltip-1" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-1"> | ||
| J | ||
| </button> | ||
| <div id="demo-user-tooltip-1" class="userTooltip__panel" popover="auto"> |
Comment on lines
+3
to
+7
| <span class="userTooltip"> | ||
| <button type="button" class="userTooltip__trigger button -circle -small" popovertarget="demo-user-tooltip-1" aria-controls="demo-user-tooltip-1" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-1"> | ||
| J | ||
| </button> | ||
| <div id="demo-user-tooltip-1" class="userTooltip__panel" popover="auto"> |
Comment on lines
+4
to
+6
| <button type="button" class="userTooltip__trigger button -circle -small" popovertarget="demo-user-tooltip-1" aria-controls="demo-user-tooltip-1" aria-haspopup="dialog" style="anchor-name: --demo-user-tooltip-1"> | ||
| J | ||
| </button> |
Comment on lines
+85
to
+88
| &[disabled], | ||
| &.-disabled { | ||
| color: var(--root-background-color-inactive); | ||
| cursor: initial; |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
| <path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" /> | ||
| </svg> | ||
| </button> | ||
| <div id="demo-popover-1" class="popoverMenu__panel -endAligned" popover="auto"> |
| <path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" /> | ||
| </svg> | ||
| </button> | ||
| <div id="demo-popover-2" class="popoverMenu__panel -startAligned" popover="auto"> |
| <button type="button" class="userTooltip__trigger button -circle -small" popovertarget="demo-user-tooltip-1" aria-controls="demo-user-tooltip-1" aria-label="View Jane Smith's profile" style="anchor-name: --demo-user-tooltip-1"> | ||
| <span aria-hidden="true">J</span> | ||
| </button> | ||
| <div id="demo-user-tooltip-1" class="userTooltip__panel" popover="auto"> |
| <button type="button" class="userTooltip__trigger button -circle -small accent-secondary" popovertarget="demo-user-tooltip-2" aria-controls="demo-user-tooltip-2" aria-label="View Marcus Johnson's profile" style="anchor-name: --demo-user-tooltip-2"> | ||
| <span aria-hidden="true">M</span> | ||
| </button> | ||
| <div id="demo-user-tooltip-2" class="userTooltip__panel" popover="auto"> |
| <button type="button" class="userTooltip__trigger button -circle -small accent-tertiary" popovertarget="demo-user-tooltip-3" aria-controls="demo-user-tooltip-3" aria-label="View Kevin Hamer's profile" style="anchor-name: --demo-user-tooltip-3"> | ||
| <span aria-hidden="true">K</span> | ||
| </button> | ||
| <div id="demo-user-tooltip-3" class="userTooltip__panel" popover="auto"> |
Comment on lines
+32
to
+35
| @supports (position-anchor: --popover-menu-trigger) { | ||
| left: anchor(left); | ||
| position: absolute; | ||
| top: calc(anchor(bottom) + 0.5rem); |
Comment on lines
+84
to
+90
| &[aria-disabled="true"], | ||
| &[disabled], | ||
| &.-disabled { | ||
| color: var(--root-background-color-inactive); | ||
| cursor: initial; | ||
| pointer-events: none; | ||
| } |
| @@ -0,0 +1,92 @@ | |||
| @use '@/core' as *; | |||
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Member
Author
|
Hey chief of accessibility police @MSchak - I think this is ready for your review. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two new components, pulled back from a recent client project. Both are HTML/CSS only.