Page MenuHomePhabricator

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

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

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:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
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.
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.
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.
AnneT triaged this task as Low priority.Jan 8 2024, 6:46 PM
AnneT set the point value for this task to 3.

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

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

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

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.

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)
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)

@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.

Change 989611 merged by jenkins-bot:

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

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

Change 989620 merged by jenkins-bot:

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

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

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

Change 992248 merged by jenkins-bot:

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

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

@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?

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

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

CCiufo-WMF added a subscriber: CCiufo-WMF.

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

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

@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 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.

Change 992810 merged by jenkins-bot:

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

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

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

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

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