Page MenuHomePhabricator
Create Task
Maniphest T338184

Accordion: Add CSS-only version and update hover and active colors
Closed, ResolvedPublic3 Estimated Story Points
Actions

Description

Background goal

See T326665 for the main component task. Ideally the CSS-only implementation would use the native browser behavior of <details>. See the discussion at T326665#8877643.

Also, we've decided to update the hover and active background colors to the following ones:

  • Hover: @background-color-interactive-subtle
  • Active: @background-color-interactive

Design spec

Accordion's spec sheetFigma prototype

Acceptance criteria (or Done)

Design

  • Update the Figma exploration file with the new colors:
    • Hover: @background-color-interactive-subtle
    • Active: @background-color-interactive
  • Create the image to be updated in the Interaction states with the new colors for hover and active: accordion-interaction-states.svg
  • Update the component in the Figma library. This step will be done by a DST member.

Code

  • Implement the CSS-only version
  • Update the hover and active colors with the new proposal
  • Update the image, description and alt text in the Interaction states with the new hover and active:

Details

SubjectRepoBranchLines +/-
Update Codex from v1.3.1 to v1.3.2mediawiki/coremaster+65 -66
Update Codex from v1.2.1 to v1.3.0mediawiki/coremaster+10 K -10 K
Accordion: Update focus styles and docs image alt textdesign/codexmain+6 -6
Accordion: Remove click handler, work around test brokennessdesign/codexmain+25 -21
Accordion: Use <details> element for markupdesign/codexmain+569 -314
Accordion: Enable and demonstrate CSS-only usagedesign/codexmain+204 -80
Customize query in gerrit

Related Objects

Event Timeline

Catrope created this task.Jun 5 2023, 9:43 PM
Restricted Application added a project: Design-System-Team. · View Herald TranscriptJun 5 2023, 9:43 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Catrope mentioned this in T326665: Design and build Accordion component (MVP).Jun 5 2023, 10:19 PM
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Jun 5 2023, 10:52 PM
CCiufo-WMF moved this task from Inbox to Planned Component Updates on the Codex board.Jun 5 2023, 11:02 PM
CCiufo-WMF renamed this task from Build a CSS-only version of the Accordion component to Accordion: Build a CSS-only version of the Accordion component.Jun 22 2023, 2:06 PM
CCiufo-WMF moved this task from Backlog to Needs Refinement on the Design-System-Team board.
CCiufo-WMF triaged this task as Medium priority.Aug 14 2023, 8:05 PM
CCiufo-WMF set the point value for this task to 3.Aug 15 2023, 2:37 PM
CCiufo-WMF moved this task from Needs Refinement to Up Next on the Design-System-Team board.
Daimona mentioned this in T336855: [IMPLEMENTATION] Front end: Show aggregate data to organizers after the event is over.Aug 28 2023, 3:17 PM
egardner raised the priority of this task from Medium to Needs Triage.Oct 2 2023, 6:52 PM
egardner moved this task from Up Next to Backlog on the Design-System-Team board.
tyhopp subscribed.Nov 9 2023, 4:10 AM
CCiufo-WMF renamed this task from Accordion: Build a CSS-only version of the Accordion component to Accordion: Add CSS-only version.Dec 11 2023, 7:22 PM
CCiufo-WMF moved this task from Backlog to 2024 Quiet Week on the Design-System-Team board.
CCiufo-WMF removed the point value for this task.
CCiufo-WMF moved this task from 2024 Quiet Week to Up Next on the Design-System-Team board.Jan 8 2024, 6:43 PM
AnneT triaged this task as Low priority.Jan 8 2024, 6:46 PM
AnneT set the point value for this task to 3.
AnneT moved this task from Up Next to DST-Sprint-14 (2024-01-08 to 2024-01-19) on the Design-System-Team board.
AnneT edited projects, added Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)); removed Design-System-Team.
egardner claimed this task.Jan 9 2024, 9:58 PM
egardner moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.
gerritbot added a comment.Jan 10 2024, 10:48 PM

Change 989620 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Accordion: Demonstrate CSS-only usage

https://gerrit.wikimedia.org/r/989620

gerritbot added a project: Patch-For-Review.Jan 10 2024, 10:48 PM
egardner moved this task from In Progress to Code Review on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.Jan 10 2024, 11:36 PM
gerritbot added a comment.Jan 11 2024, 12:05 PM

Change 989611 had a related patch set uploaded (by VolkerE; author: Eric Gardner):

[design/codex@main] Accordion: Use <details> element for markup

https://gerrit.wikimedia.org/r/989611

egardner moved this task from Code Review to Blocked ⛔ on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.Jan 11 2024, 9:46 PM

Releasing this feature should be considered blocked until we decide on whether <details> element fits Codex's browser support policy.

egardner added a comment.EditedJan 12 2024, 6:21 PM

This task should be considered blocked by T288287 (we'd also have to bump the versions of FF and Edge in Grade C, but IE11 is the biggest sticking point).

Since the content of <details> elements is still visible to IE11 users (see https://phabricator.wikimedia.org/T288287#9457169 for... details), we're going to allow this work to move forward and consider behavior as "graceful degradation". This task is no longer considered blocked.

CCiufo-WMF mentioned this in T288287: Remove IE11 from Basic support ("Grade C").Jan 12 2024, 7:13 PM
egardner moved this task from Blocked ⛔ to Code Review on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.Jan 12 2024, 9:10 PM
bmartinezcalvo renamed this task from Accordion: Add CSS-only version to Accordion: Add CSS-only version and update hover and active colors.Jan 15 2024, 6:50 PM
bmartinezcalvo updated the task description. (Show Details)
Catrope moved this task from Code Review to Blocked ⛔ on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.Jan 16 2024, 10:58 PM
Catrope moved this task from Blocked ⛔ to Code Review on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.
bmartinezcalvo updated the task description. (Show Details)Jan 17 2024, 6:29 PM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)
egardner updated the task description. (Show Details)Jan 18 2024, 9:45 PM
tyhopp unsubscribed.Jan 18 2024, 11:30 PM
Catrope added a subscriber: bmartinezcalvo.Jan 22 2024, 5:45 PM

@bmartinezcalvo Could you please do a design review of the preview of this patch? There are some code review comments that still need to be addressed, but those shouldn't affect the appearance or behavior of the component.

gerritbot added a comment.Jan 22 2024, 10:17 PM

Change 989611 merged by jenkins-bot:

[design/codex@main] Accordion: Use <details> element for markup

https://gerrit.wikimedia.org/r/989611

egardner moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.Jan 22 2024, 10:17 PM
gerritbot added a comment.Jan 22 2024, 10:20 PM

Change 989620 merged by jenkins-bot:

[design/codex@main] Accordion: Enable and demonstrate CSS-only usage

https://gerrit.wikimedia.org/r/989620

Maintenance_bot removed a project: Patch-For-Review.Jan 22 2024, 10:31 PM
gerritbot added a comment.Jan 22 2024, 10:40 PM

Change 992248 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] Accordion: Remove click handler, work around test brokenness

https://gerrit.wikimedia.org/r/992248

gerritbot added a project: Patch-For-Review.Jan 22 2024, 10:40 PM
Catrope moved this task from Pending Release to Design Sign-Off on the Design-System-Team (DST-Sprint-14 (2024-01-08 to 2024-01-19)) board.Jan 22 2024, 10:51 PM

The patches are now merged, the new Accordion behavior and the CSS-only version can now be viewed here: https://doc.wikimedia.org/codex/main/components/demos/accordion.html

gerritbot added a comment.Jan 22 2024, 11:54 PM

Change 992248 merged by jenkins-bot:

[design/codex@main] Accordion: Remove click handler, work around test brokenness

https://gerrit.wikimedia.org/r/992248

Maintenance_bot removed a project: Patch-For-Review.Jan 23 2024, 12:30 AM
bmartinezcalvo added a comment.EditedJan 23 2024, 10:17 AM

@egardner design sign-off done. Just a couple of corrections:

  1. Update the alt text in the new Interaction States image: "Interaction states of Accordion for both collapsed and expanded: default, hover, active, and focus."
  2. Could the focus state be visible just after pressing the Accordion as we do with Button to avoid the active state being visible at the same time as the focus?
bmartinezcalvo updated the task description. (Show Details)Jan 23 2024, 10:42 AM
gerritbot added a comment.Jan 23 2024, 9:23 PM

Change 992533 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.2.1 to v1.3.0

https://gerrit.wikimedia.org/r/992533

gerritbot added a project: Patch-For-Review.Jan 23 2024, 9:23 PM
gerritbot added a comment.Jan 23 2024, 11:15 PM

Change 992533 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.2.1 to v1.3.0

https://gerrit.wikimedia.org/r/992533

Maintenance_bot removed a project: Patch-For-Review.Jan 23 2024, 11:32 PM
CCiufo-WMF closed this task as Resolved.Jan 24 2024, 2:58 PM
CCiufo-WMF subscribed.

This should have been closed because it went out in yesterday's release, right?

gerritbot added a comment.Jan 24 2024, 8:13 PM

Change 992810 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Accordion: Update focus styles and docs image alt text

https://gerrit.wikimedia.org/r/992810

gerritbot added a project: Patch-For-Review.Jan 24 2024, 8:13 PM
egardner reopened this task as Open.Jan 24 2024, 8:20 PM
In T338184#9480246, @bmartinezcalvo wrote:

@egardner design sign-off done. Just a couple of corrections:

  1. Update the alt text in the new Interaction States image: "Interaction states of Accordion for both collapsed and expanded: default, hover, active, and focus."
  2. Could the focus state be visible just after pressing the Accordion as we do with Button to avoid the active state being visible at the same time as the focus?

Hey @bmartinezcalvo, I've posted a new patch to make these last changes. Can you take a look here and let me know if this is what you want?
https://992810--wikimedia-codex.netlify.app/components/demos/accordion.html#demos

I'll re-close this task if so.

bmartinezcalvo added a comment.EditedJan 25 2024, 10:17 AM
In T338184#9486446, @egardner wrote:
In T338184#9480246, @bmartinezcalvo wrote:

@egardner design sign-off done. Just a couple of corrections:

  1. Update the alt text in the new Interaction States image: "Interaction states of Accordion for both collapsed and expanded: default, hover, active, and focus."
  2. Could the focus state be visible just after pressing the Accordion as we do with Button to avoid the active state being visible at the same time as the focus?

Hey @bmartinezcalvo, I've posted a new patch to make these last changes. Can you take a look here and let me know if this is what you want?
https://992810--wikimedia-codex.netlify.app/components/demos/accordion.html#demos

I'll re-close this task if so.

@egardner thank you, the alt text (1) is right now. Regarding the focus (2), let's leave it as it is and revisit the styles for :focus and :focus-visible in the different components in our system in a separate task if needed.

Catrope closed this task as Resolved.Jan 30 2024, 6:43 PM
gerritbot added a comment.Jan 30 2024, 7:18 PM

Change 992810 merged by jenkins-bot:

[design/codex@main] Accordion: Update focus styles and docs image alt text

https://gerrit.wikimedia.org/r/992810

gerritbot added a comment.Feb 6 2024, 5:50 PM

Change 997931 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v1.3.1 to v1.3.2

https://gerrit.wikimedia.org/r/997931

PatchDemoBot added a comment.Feb 6 2024, 5:56 PM

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2e8b582c42/w

gerritbot added a comment.Feb 6 2024, 6:54 PM

Change 997931 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.3.1 to v1.3.2

https://gerrit.wikimedia.org/r/997931

Maintenance_bot removed a project: Patch-For-Review.Feb 6 2024, 7:31 PM
PatchDemoBot added a comment.Thu, May 16, 8:39 PM

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2e8b582c42/w/

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL