Skip to content

Commit f37b6ac

Browse files
MaxWeisenMaxWeisen
authored
Merge pull request #28 from dieunity/accessLens
Accessibility Lens + Grayscale Implementation
2 parents b11457d + 161cf67 commit f37b6ac

File tree

3 files changed

+114
-68
lines changed

3 files changed

+114
-68
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "spearmint",
3-
"version": "0.5.0",
3+
"version": "0.6.0",
44
"description": "An open-source developer tool that simplifies testing and hopes to help increase awareness about web accessibility.",
55
"author": "spearmintjs",
66
"build": {
@@ -49,6 +49,7 @@
4949
"xterm-for-react": "^1.0.4"
5050
},
5151
"scripts": {
52+
"install-once": "npm install ; npm run electron-rebuild",
5253
"test": "react-app-rewired test --env=jsdom",
5354
"test:e2e": "./node_modules/mocha/bin/mocha src/__tests__/spec.e2e.js",
5455
"test:integra": "mocha src/__tests__/spec.integra.js",

‎src/components/BrowserView/BrowserView.jsx‎

Lines changed: 83 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React, { useContext, useState, useEffect } from 'react';
1+
import React, { useContext, useState } from 'react';
22
import FormControlLabel from '@material-ui/core/FormControlLabel';
33
import Checkbox from '@material-ui/core/Checkbox';
4+
import { makeStyles } from '@material-ui/core/styles';
45
import styles from './BrowserView.module.scss';
6+
57
import { GlobalContext } from '../../context/reducers/globalReducer';
68
import { setProjectUrl } from '../../context/actions/globalActions';
7-
import { isPropertySignature } from 'typescript';
89

910
const BrowserView = () => {
1011
const [{ url }, dispatchToGlobal] = useContext(GlobalContext);
@@ -13,28 +14,29 @@ const BrowserView = () => {
1314
const [checkedBoxes, setCheckBox] = useState({
1415
checkedMouse: false,
1516
muted: false,
17+
checkedGrayscale: false,
1618
});
17-
19+
1820
// Mute/Unmute webview
1921
const muteAudio = (muted) => {
2022
const webview = document.querySelector('webview');
21-
console.log(webview);
23+
// console.log(webview);
2224
webview.setAudioMuted(muted);
2325
};
24-
26+
2527
// helper function to add the https or http
2628
const addHttps = (url) => {
2729
if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) {
2830
return url;
2931
}
3032
if (url.startsWith('localhost')) {
31-
url = 'http://' + url;
33+
url = `http://${url}`;
3234
return url;
3335
}
34-
url = 'https://' + url;
36+
url = `https://${url}`;
3537
return url;
3638
};
37-
39+
3840
const handleChangeUrl = (e) => {
3941
if (e.keyCode === 13) {
4042
const testSiteURL = addHttps(e.target.value);
@@ -62,11 +64,11 @@ const BrowserView = () => {
6264
});
6365
break;
6466

65-
// checkedKeyboard state does not impact app usability
66-
case 'checkedKeyboard':
67+
// checkedGrayscale state does not impact app usability
68+
case 'checkedGrayscale':
6769
setCheckBox({
6870
...checkedBoxes,
69-
checkedKeyboard: !checkedBoxes.checkedKeyboard,
71+
checkedGrayscale: !checkedBoxes.checkedGrayscale,
7072
});
7173
break;
7274

@@ -75,61 +77,90 @@ const BrowserView = () => {
7577
}
7678
};
7779

80+
const useStyles = makeStyles(() => ({
81+
FormControlLabel: {
82+
// fontSize doesn't work, but color does work...
83+
fontSize: '1px',
84+
// color: 'white',
85+
// ,
86+
},
87+
}));
88+
89+
const classes = useStyles();
90+
7891
return (
79-
<div>
92+
<div id="Accessibility Lens">
93+
<div className={styles.accessLensContainer}>
94+
<div id={styles.accessLensLabel}>
95+
Accessibility Lens
96+
</div>
97+
{/* trying to put some sort of flex style or centered style here to center the 3 check boxes...but no avail */}
98+
<div
99+
id="Check Boxes"
100+
style={{
101+
display: 'flex',
102+
alignItems: 'center',
103+
justifyContent: 'center',
104+
// fontSize: 22,
105+
}}
106+
>
107+
<FormControlLabel
108+
// style={{fontSize:2}}
109+
id="Disable Mouse Checkbox"
110+
control={(
111+
<Checkbox
112+
// style={{fontSize:2}}
113+
value="disable mouse clicks"
114+
checked={checkedBoxes.checkedMouse}
115+
onChange={handleChangeCheckBox}
116+
name="checkedMouse"
117+
/>
118+
)}
119+
label="Disable Mouse Clicks"
120+
/>
121+
<FormControlLabel
122+
id="Grayscale Checkbox"
123+
control={(
124+
<Checkbox
125+
value="grayscale"
126+
checked={checkedBoxes.checkedGrayscale}
127+
onChange={handleChangeCheckBox}
128+
name="checkedGrayscale"
129+
/>
130+
)}
131+
label="Grayscale"
132+
/>
133+
<FormControlLabel
134+
id="Mute Audio Checkbox"
135+
control={(
136+
<Checkbox
137+
value="muted"
138+
checked={checkedBoxes.muted}
139+
onChange={handleChangeCheckBox}
140+
name="muted"
141+
/>
142+
)}
143+
label="Mute"
144+
/>
145+
</div>
146+
</div>
147+
{/* Search bar */}
80148
<input
81149
id={styles.browserAddress}
82150
placeholder="Enter a new URL (localhost:3000)"
83-
type='text'
151+
type="text"
84152
onKeyDown={handleChangeUrl}
85153
/>
86-
<div id={styles.FormControlContainer}>
87-
{/* Disable Mouse Checkbox */}
88-
<FormControlLabel
89-
control={
90-
<Checkbox
91-
value="disable mouse clicks"
92-
checked={checkedBoxes['checkedMouse']}
93-
onChange={handleChangeCheckBox}
94-
name="checkedMouse"
95-
/>
96-
}
97-
label="Disable Mouse Clicks"
98-
/>
99-
{/* Disable Keyboard Checkbox */}
100-
<FormControlLabel
101-
control={
102-
<Checkbox
103-
value="disable keyboard"
104-
checked={checkedBoxes['checkedKeyboard']}
105-
onChange={handleChangeCheckBox}
106-
name="checkedKeyboard"
107-
/>
108-
}
109-
label="Disable Keyboard Clicks"
110-
/>
111-
{/* Mute Audio Checkbox */}
112-
<FormControlLabel
113-
control={
114-
<Checkbox
115-
value="muted"
116-
checked={checkedBoxes['muted']}
117-
onChange={handleChangeCheckBox}
118-
name="muted"
119-
/>
120-
}
121-
label="Mute"
122-
/>
123-
</div>
124154
<webview
125155
id={styles.browserView}
126156
src={url}
127157
style={{
158+
filter: checkedBoxes.checkedGrayscale ? 'grayscale(100%)' : 'grayscale(0%)',
128159
pointerEvents: checkedBoxes.checkedMouse ? 'none' : 'auto',
129160
}}
130161
/>
131162
</div>
132163
);
133164
};
134165

135-
export default BrowserView;
166+
export default BrowserView;

‎src/components/BrowserView/BrowserView.module.scss‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@
66
width: auto;
77
}
88

9-
// // Disable clicking for accessibility testing
10-
// #browserViewNoClick {
11-
// height: 100vh;
12-
// width: auto;
13-
// pointer-events: none;
14-
// }
15-
169
#browserAddress {
1710
display: flex;
1811
justify-content: center;
@@ -24,18 +17,22 @@
2417
text-indent: 10px;
2518
}
2619

27-
#address {
28-
width: 89%;
29-
height: 28px;
30-
border: none;
31-
border: 1px solid $light-gray;
32-
border-radius: 8px;
33-
padding-left: 10px;
20+
.accessLensContainer{
21+
background-color: $mint2;
22+
height: 55px;
3423
}
3524

36-
#formControlLabel{
25+
.accessLensCheckBoxes{
3726
display: flex;
27+
// background-color: $mint2;
28+
}
3829

30+
#accessLensLabel {
31+
display: flex;
32+
justify-content: center;
33+
background-color: $mint;
34+
color: white;
35+
font-size: 18px;
3936
}
4037

4138
// button {
@@ -52,3 +49,20 @@
5249
// background-color: $mint;
5350
// color: white;
5451
// }
52+
53+
// #formControlLabel{
54+
// display: flex;
55+
// background-color: $mint2;
56+
// color: "white";
57+
// size: "20px";
58+
// margin: "10px";
59+
// }
60+
61+
// #address {
62+
// width: 89%;
63+
// height: 28px;
64+
// border: none;
65+
// border: 1px solid $light-gray;
66+
// border-radius: 8px;
67+
// padding-left: 10px;
68+
// }

0 commit comments

Comments
 (0)