Skip to content
This repository was archived by the owner on Jan 24, 2024. It is now read-only.

Conversation

@aurooba
Copy link
Member

@aurooba aurooba commented Aug 30, 2023

Closes #46.

Description

Right now there's a list pattern used in the home template for TT4 that uses paragraphs with checkmarks to simulate a list. This is an accessibility issue as described in #46:

  1. This doesn't convey to Screen Readers that the content is in a list or the number of list items in each list.
  2. Checkmarks are read out loud as "checkmark" by the screenreader.

This PR registers a new custom block style for Lists called Checkmarks to fix that issue.

Screenshots

Desktop view:

desktop view of the new checkmark list style in place on the homepage template

Mobile view:
mobile view of the new checkmark list style in place on the homepage template

Design discussion/question:

  • the original design has considerable gap between the list items since they were paragraphs. Do we want to add spacing between list items when they are in this checkmark style or leave it be?

Testing Instructions

  1. Activate the theme. -->
  2. Create a new post or page.
  3. Add a list and choose the checkmark list style.

@carolinan
Copy link
Contributor

Do we not need a separate block pattern for this?

@aurooba
Copy link
Member Author

aurooba commented Aug 30, 2023

@carolinan It's a change in two existing block patterns Left Aligned Call to Action with Image and home. I didn't see an existing block pattern just for the checkmark list style.

If we wanted to offer an easy to use checkmark list, a block variation might be a better fit perhaps?

@carolinan
Copy link
Contributor

I don't see any updates made to left-aligned-cta-image.php?

@aurooba
Copy link
Member Author

aurooba commented Aug 30, 2023

@carolinan Ooh, that's right, my bad. The original left-aligned-cta-image.php didn't have any checkmarks in it (although I thought it would be a good fit) so I never committed that.

Here's what left-aligned-cta-image.php looks like currently with a regular unordered list:

Screen Shot 2023-08-30 at 5 42 14 PM

Here's what it could look like with the checkmarks style:
Screen Shot 2023-08-30 at 5 42 23 PM

Should we get design feedback on this?

@carolinan
Copy link
Contributor

@aurooba
Copy link
Member Author

aurooba commented Aug 31, 2023

Thanks for linking to the pattern in the design file directly, @carolinan. Much appreciated. The pattern has been updated, and I also overall tweaked the styling of checkmark lists globally so they better match the design:

Screen Shot 2023-08-31 at 9 41 28 AM

@aurooba
Copy link
Member Author

aurooba commented Sep 13, 2023

Noting that we need to incorporate an RTL solution as well as per the slack conversation today with @MaggieCabrera

@MaggieCabrera
Copy link
Collaborator

the pattern Features with Images also needs the same implementation

@MaggieCabrera
Copy link
Collaborator

#292 is working on adding some design adjustments after the pattern was reviewed. The markup provided in the adjustment turns the list into a paragraph block, which is not what we want, but it's the look we are aiming for. Let's keep the spacing, line height and layout from those adjustments when we make changes to the markup here.

MaggieCabrera added a commit that referenced this pull request Sep 15, 2023
@MaggieCabrera
Copy link
Collaborator

I tried rebasing, had a hard time, figured it was better to just start over. Closing in favor of #369, let's continue there, but I basically picked up the changes from here and moved them to trunk manually with a couple of tweaks

richtabor added a commit that referenced this pull request Sep 17, 2023
* adds changes from #150

* Checkmarks -> Checkmark

---------

Co-authored-by: Rich Tabor <hi@richtabor.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Home page pattern - paragraphs are used for lists

3 participants