A11y design enhancements

[CodeByAlex]

What I did

I have modified the X and check marks to be more accessible because the color of the X alone is difficult extract meaning from if you are visually impaired. They now are colored and list out the severity/urgency of the issue (which really provides better information anyway).
OLD:

NEW:

I also updated the text that appears when there aren't any rules within a tab. It used to use the word "A11y" and now it uses the word "accessibility". This helps people that don't understand what a11y means.
OLD:

NEW:

The global checkbox and all of the badges now respond nicely (when the addons panel is mobile, vertical, or horizontal).
OLD:

NEW:

Capitalized the first character in colorblindness emulation text

How to test

• Is this testable with Jest or Chromatic screenshots? Sure
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? no

If your answer is yes to any of these, please make sure to include it in your PR.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-codebyalex-a11y-design-e.storybook.now.sh

[Armanio]

Wow! Looks good!

Firstly, I think need to fix conflicts.

[CodeByAlex]

Shoot I removed that magic number constant when I was testing something. Nice catch! I’ll make sure to add that back in. I originally had media queries but media queries aren’t responsive when the addon panel is shortened in width in the vertical view.

…

On Thu, Apr 18, 2019 at 4:07 PM Arman ***@***.***> wrote: ***@***.**** requested changes on this pull request. ------------------------------ In addons/a11y/src/components/Report/Rules.tsx <#6563 (comment)>: > fontWeight: '400', } as any); -const Item = styled.div({ - display: 'flex', - flexDirection: 'row', - marginBottom: '6px', -}); +const Item = styled.div(({ elementWidth }: { elementWidth: number }) => ({ + flexDirection: elementWidth > 407 ? 'row' : 'inherit', hmm, the magic number why 407? what is it? ------------------------------ In addons/a11y/src/components/Report/Rules.tsx <#6563 (comment)>: > + switch (rule.impact) { + case ImpactValue.CRITICAL: + badgeType = 'critical'; + break; + case ImpactValue.SERIOUS: + badgeType = 'negative'; + break; + case ImpactValue.MODERATE: + badgeType = 'warning'; + break; + case ImpactValue.MINOR: + badgeType = 'neutral'; + break; + default: + break; + } ⬇️ Suggested change - } +const badgeType = rule.impact in ImpactValue ? rule.impact : null; can simplify? ------------------------------ In addons/a11y/src/components/Tabs.tsx <#6563 (comment)>: > - }, -})); +const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => { + const maxElementWidth = 450; + return { + cursor: 'pointer', + fontSize: '14px', + padding: elementWidth > maxElementWidth ? '12px 15px 10px 0' : '12px 0px 3px 12px', + height: '40px', + border: 'none', + marginTop: elementWidth > maxElementWidth ? '-40px' : '0px', + float: elementWidth > maxElementWidth ? 'right' : 'left', + display: elementWidth > maxElementWidth ? 'flex' : 'block', + alignItems: 'center', + width: elementWidth > maxElementWidth ? 'auto' : '100%', + borderBottom: elementWidth > maxElementWidth ? 'none' : '1px solid rgba(0,0,0,.1)', why you didn't use media queries? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6563 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHDCQBRRUFITHIZWYC6OPODPRDIJPANCNFSM4HG6OIUQ> .

[CodeByAlex]

I did try to find a css solution before going with a JS solution but nothing came up for what I needed for this use case. On Thu, Apr 18, 2019 at 4:10 PM Alexander Wilson < [email protected]> wrote:

…

Shoot I removed that magic number constant when I was testing something. Nice catch! I’ll make sure to add that back in. I originally had media queries but media queries aren’t responsive when the addon panel is shortened in width in the vertical view. On Thu, Apr 18, 2019 at 4:07 PM Arman ***@***.***> wrote: > ***@***.**** requested changes on this pull request. > ------------------------------ > > In addons/a11y/src/components/Report/Rules.tsx > <#6563 (comment)> > : > > > fontWeight: '400', > > } as any); > > > > -const Item = styled.div({ > > - display: 'flex', > > - flexDirection: 'row', > > - marginBottom: '6px', > > -}); > > +const Item = styled.div(({ elementWidth }: { elementWidth: number }) => ({ > > + flexDirection: elementWidth > 407 ? 'row' : 'inherit', > > > hmm, the magic number > why 407? what is it? > ------------------------------ > > In addons/a11y/src/components/Report/Rules.tsx > <#6563 (comment)> > : > > > + switch (rule.impact) { > > + case ImpactValue.CRITICAL: > > + badgeType = 'critical'; > > + break; > > + case ImpactValue.SERIOUS: > > + badgeType = 'negative'; > > + break; > > + case ImpactValue.MODERATE: > > + badgeType = 'warning'; > > + break; > > + case ImpactValue.MINOR: > > + badgeType = 'neutral'; > > + break; > > + default: > > + break; > > + } > > > ⬇️ Suggested change > > - } > > +const badgeType = rule.impact in ImpactValue ? rule.impact : null; > > > can simplify? > ------------------------------ > > In addons/a11y/src/components/Tabs.tsx > <#6563 (comment)> > : > > > - }, > > -})); > > +const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => { > > + const maxElementWidth = 450; > > + return { > > + cursor: 'pointer', > > + fontSize: '14px', > > + padding: elementWidth > maxElementWidth ? '12px 15px 10px 0' : '12px 0px 3px 12px', > > + height: '40px', > > + border: 'none', > > + marginTop: elementWidth > maxElementWidth ? '-40px' : '0px', > > + float: elementWidth > maxElementWidth ? 'right' : 'left', > > + display: elementWidth > maxElementWidth ? 'flex' : 'block', > > + alignItems: 'center', > > + width: elementWidth > maxElementWidth ? 'auto' : '100%', > > + borderBottom: elementWidth > maxElementWidth ? 'none' : '1px solid rgba(0,0,0,.1)', > > > why you didn't use media queries? > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#6563 (review)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AHDCQBRRUFITHIZWYC6OPODPRDIJPANCNFSM4HG6OIUQ> > . >