ardakaracizmeli / design-system-checklist Goto Github PK

The links at the foot of each category page are not linking through to the right target pages.

Great checklist.

Core / List / Divided variant states:
"Lists with dividers are the best practice advised by many platform guidelines (especially on mobile)."
I am unable to find the resources or sources that illustrates, verify or details this statement.
Checked: Material, Apple Human Interface Guidelines, Foundation, Bootstrap, Fluent, Equinor, DNB.

The Development section under Tooling could use more resources (links)

Hey big fan of the overall idea of this, one suggestion:
Under https://designsystemchecklist.com/category/tooling/ "Figma" is listed as checkbox. There are alternative tools out there to design teams such as Sketch, FramerX, AdobeXD and others. It shouldn't really matter which is used. At the moment it kind of reads like an advertisement Figma.
Was just wondering the thinking behind this, and whether it could be reworded to be more neutral.

Hi!! I use and really like your checklist, but I don't know where to open this topic, I'm sorry if I open the discussion in the wrong environment.

I would like to contribute with the translation into Portuguese (Brazil)/PT-BR if possible.

For interactive components such as:

• Button
• Dropdown
• Input Checkbox
• Input Radio
• Input Text
• Input Switch
• Tabs

there should be focused state for keyboard accessibility

What do you think about evolving the project even further? Adding new patterns, updating dependencies, and more?

Can we do internationalization? I'm willing to do the pt-BR translation. Any idea on how so i can start a PR?

BTW, I'm loving this project! Already shared it across some ppl at my team and we're eager to start using!

Not an issue, really, but since Design Systems are about uniformity and all that I'm sure I'm not the first one to notice that the last user handle link on About page is, rather surprisingly, a mailto:

Hello, we're @ardakaracizmeli, @DmitryBelyaev and @StevenBaguley.

Great work btw! <3

Correct me if I'm wrong, but there's only dark theme right?

Would be nice to have light mode, especially during working hours, I prefer light mode.

Thanks!

Small correction (or refinement) about icon names.

Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability.

Hmm. I pretty much disagree here. A standard "play" button icon should be called "play" not "triangle". Perhaps the checklist copy could be clearer about what is meant by naming? And what do I mean by naming?

I work primarily with accessibility, and have instructed our designers to make sure that all icons have an 'accessible name'. Our design system has a large collection of icons, and the Figma project associates each one with such a name. UI controls should always have accessible names, and if the control has an icon instead of a text label, the easiest way to do this is to name the icon itself.

We have gone so far as to hard-code these names into an aria-label on the SVG assets themselves. (You need to add role="img" as well for this trick to work). Here's an example, it's an icon used to label a button which clears an input field (circle with cross inside).

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Clear" height="24px" width="24px">
<g fill="currentColor"><path d="M8.795 8.794a1.005 1.005 0 0 1 1.421 0L12 10.578l1.784-1.783a1.005 1.005 0 1 1 1.422 1.421L13.422 12l1.784 1.784a1.005 1.005 0 0 1-1.422 1.421L12 13.422l-1.784 1.784a1.005 1.005 0 0 1-1.421-1.422L10.579 12l-1.784-1.784a1.005 1.005 0 0 1 0-1.422Z"></path>
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"></path>
</g>
</svg>`

If a dev uses those assets (e.g inside a <button>), they get an accessible name "for free".

This is only a partial solution to the problem of naming icons accessibly. An icon may be used in an unconventional way, requiring a different name, or may be "purely decorative" (in which case, wrap it in a div or span with aria-hidden="true") International versions will need to change the attribute value too.

But having a default accessible name is almost always better than no accessible name at all.