Skip to content

A11y design enhancements #6563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndelangen merged 23 commits into from
Apr 25, 2019
Merged

A11y design enhancements #6563

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4e043eb
made global checkbox responsive
CodeByAlex Apr 12, 2019
4cb4de8
modified empty text for each accessibility status
CodeByAlex Apr 12, 2019
bdbd153
added badge to make the severity display more accessible
CodeByAlex Apr 12, 2019
d1e8ccc
removed passes from props and used type to determine the badge needed
CodeByAlex Apr 12, 2019
321ba10
fixed spacing issues between checkbox and element path
CodeByAlex Apr 12, 2019
a28dd42
a11y: added padding next to rule text to allow for more space below c…
CodeByAlex Apr 12, 2019
e9320b7
modified styling of a11y severity badges
CodeByAlex Apr 16, 2019
827898e
added critical badge color
CodeByAlex Apr 18, 2019
0782de0
added react resize-me to allow for automatic flowing of the global ch…
CodeByAlex Apr 18, 2019
6c84cbb
Used resize-me to auto flow the badges when the width of the addon pa…
CodeByAlex Apr 18, 2019
f1521ef
made the badge slimmer for the a11y rules
CodeByAlex Apr 18, 2019
de96c0f
fixed ts issues
CodeByAlex Apr 18, 2019
3bdf885
added a constant for Item width in the the a11y rules
CodeByAlex Apr 19, 2019
8095c23
Merge branch 'next' into a11y-design-enhancements
CodeByAlex Apr 19, 2019
c74bd00
updated storyshots and badge options
CodeByAlex Apr 19, 2019
bfe6df8
ran yarn bootstrap --reset --core and added changes
CodeByAlex Apr 20, 2019
c245294
updated snapshots
CodeByAlex Apr 20, 2019
c453929
Capitalized colorblindness emulation text
CodeByAlex Apr 23, 2019
e5550aa
Capitalized mono for color blindness emulation
CodeByAlex Apr 23, 2019
b80728c
Merge branch 'next' into a11y-design-enhancements
CodeByAlex Apr 24, 2019
0a7146d
inserted the es lint disable comments originally added by ndelangen w…
CodeByAlex Apr 24, 2019
71791b5
modified color blindness logic to use lowercase version of visual tit…
CodeByAlex Apr 25, 2019
4426529
modified color blindness logic to set the first character of title to…
CodeByAlex Apr 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
modified color blindness logic to use lowercase version of visual tit… 
…le to check against filters
  • Loading branch information
@CodeByAlex
CodeByAlex committed Apr 25, 2019
commit 71791b529a9aa1a05ff91d8ebb9cf1e563dc0f27
6 changes: 3 additions & 3 deletions addons/a11y/src/components/ColorBlindness.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const getFilter = (filter: string | null) => {
if (filter === null) {
return 'none';
}
if (filter === 'Mono') {
if (filter === 'mono') {
return 'grayscale(100%)';
}
return `url('#${filter}')`;
Expand Down Expand Up @@ -85,9 +85,9 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
id: i,
Copy link
Member

@shilman shilman Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this id used anywhere?

Copy link
Member

@shilman shilman Apr 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggest:

id: i.toLowerCase()
...
  this.setFilter(this.id)

Copy link
Member Author

@CodeByAlex CodeByAlex Apr 25, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after I modified the array of types, its back to being lowercase by default and only the first char is capitalized in the title. Not sure if the id is being used but I can check.

UPDATE: the Id is used in the TooltipLinkList: key={id || (title as string)}

title: i,
onClick: () => {
this.setFilter(i);
this.setFilter(i.toLowerCase());
},
right: <ColorIcon filter={i} />,
right: <ColorIcon filter={i.toLowerCase()} />,
active: filter === i,
}));

Expand Down
16 changes: 8 additions & 8 deletions addons/a11y/src/register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,56 +20,56 @@ const PreviewWrapper: FunctionComponent<{}> = p => (
<Hidden>
<svg key="svg">
<defs>
<filter id="Protanopia">
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Protanomaly">
<filter id="protanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Deuteranopia">
<filter id="deuteranopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Deuteranomaly">
<filter id="deuteranomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Tritanopia">
<filter id="tritanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Tritanomaly">
<filter id="tritanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Achromatopsia">
<filter id="achromatopsia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="Achromatomaly">
<filter id="achromatomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
Expand Down