Change Details

== 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 | [[ https://www.figma.com/file/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?type=design&node-id=2116-30889&mode=design&t=mrcsDCXw6uHK3DxU-11 | Accordion's spec sheet ]] | [[ https://www.figma.com/proto/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?page-id=2116%3A8188&type=design&node-id=2116-34551&t=mrcsDCXw6uHK3DxU-0&scaling=min-zoom&starting-point-node-id=2116%3A34551 | Figma prototype ]] | ### Acceptance criteria (or Done) **Design** [x] Update the Figma exploration file with the new colors: [x] Hover: `@background-color-interactive-subtle` [x] Active: `@background-color-interactive` [x] Create the image to be updated in the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html#interaction-states | Interaction states ]] with the new colors for hover and active: [[ https://drive.google.com/file/d/1xJRgP7XrO-_K90h5yPUfUaul0iGQZY8t/view?usp=sharing | accordion-interaction-states.svg ]] [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | 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 and text in the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html#interaction-states | Interaction states ]] with the new colors for hover and active: [] Image [[ https://drive.google.com/file/d/1xJRgP7XrO-_K90h5yPUfUaul0iGQZY8t/view?usp=sharing | accordion-interaction-states.svg ]] [] Image's description and alt text in this [[ https://docs.google.com/document/d/1ijapYGCW_0MP3PT5A6DyDooUtcq_ndp4gbK1-A3io7k/edit | doc ]]

== 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 | [[ https://www.figma.com/file/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?type=design&node-id=2116-30889&mode=design&t=mrcsDCXw6uHK3DxU-11 | Accordion's spec sheet ]] | [[ https://www.figma.com/proto/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?page-id=2116%3A8188&type=design&node-id=2116-34551&t=mrcsDCXw6uHK3DxU-0&scaling=min-zoom&starting-point-node-id=2116%3A34551 | Figma prototype ]] | ### Acceptance criteria (or Done) **Design** [x] Update the Figma exploration file with the new colors: [x] Hover: `@background-color-interactive-subtle` [x] Active: `@background-color-interactive` [x] Create the image to be updated in the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html#interaction-states | Interaction states ]] with the new colors for hover and active: [[ https://drive.google.com/file/d/1xJRgP7XrO-_K90h5yPUfUaul0iGQZY8t/view?usp=sharing | accordion-interaction-states.svg ]] [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | 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 [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html#interaction-states | Interaction states ]] with the new colors for hover and active: [] Image [[ https://drive.google.com/file/d/1xJRgP7XrO-_K90h5yPUfUaul0iGQZY8t/view?usp=sharing | accordion-interaction-states.svg ]] [] Image's description and alt text in this [[ https://docs.google.com/document/d/1ijapYGCW_0MP3PT5A6DyDooUtcq_ndp4gbK1-A3io7k/edit | doc ]]

== 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 | [[ https://www.figma.com/file/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?type=design&node-id=2116-30889&mode=design&t=mrcsDCXw6uHK3DxU-11 | Accordion's spec sheet ]] | [[ https://www.figma.com/proto/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?page-id=2116%3A8188&type=design&node-id=2116-34551&t=mrcsDCXw6uHK3DxU-0&scaling=min-zoom&starting-point-node-id=2116%3A34551 | Figma prototype ]] | ### Acceptance criteria (or Done) **Design** [x] Update the Figma exploration file with the new colors: [x] Hover: `@background-color-interactive-subtle` [x] Active: `@background-color-interactive` [x] Create the image to be updated in the [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html#interaction-states | Interaction states ]] with the new colors for hover and active: [[ https://drive.google.com/file/d/1xJRgP7XrO-_K90h5yPUfUaul0iGQZY8t/view?usp=sharing | accordion-interaction-states.svg ]] [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | 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 [[ https://doc.wikimedia.org/codex/main/components/demos/accordion.html#interaction-states | Interaction states ]] with the new colors for hover and active: [] Image [[ https://drive.google.com/file/d/1xJRgP7XrO-_K90h5yPUfUaul0iGQZY8t/view?usp=sharing | accordion-interaction-states.svg ]] [] Image's description and alt text in this [[ https://docs.google.com/document/d/1ijapYGCW_0MP3PT5A6DyDooUtcq_ndp4gbK1-A3io7k/edit | doc ]]