Skip to content

Commit 6d0c776

Browse files
ericgparkericgpark
authored
Merge pull request #3 from oslabs-beta/screen_reader
2 new lenses and Vue test button
2 parents 8855ac5 + a80850f commit 6d0c776

File tree

6 files changed

+893
-18
lines changed

6 files changed

+893
-18
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@
2828
"homepage": "./",
2929
"private": true,
3030
"dependencies": {
31-
"@material-ui/core": "^4.11.4",
31+
"@capacitor/cli": "^3.0.1",
32+
"@capacitor/core": "^3.0.1",
33+
"@capacitor/screen-reader": "^1.0.1",
34+
"@material-ui/core": "^4.11.3",
3235
"@material-ui/icons": "^4.11.2",
3336
"@types/jest": "^25.2.3",
3437
"@types/react-beautiful-dnd": "^12.1.2",

‎src/components/BrowserView/BrowserView.jsx

Lines changed: 85 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import styles from './BrowserView.module.scss';
55

66
import { GlobalContext } from '../../context/reducers/globalReducer';
77
import { setProjectUrl } from '../../context/actions/globalActions';
8+
import { InvertColors } from '@material-ui/icons';
9+
10+
import { ScreenReader } from '@capacitor/screen-reader';
811

912
const BrowserView = () => {
1013
const [{ url }, dispatchToGlobal] = useContext(GlobalContext);
@@ -15,15 +18,23 @@ const BrowserView = () => {
1518
muted: false,
1619
checkedGrayscale: false,
1720
checkedContrast: false,
21+
checkedReader: false,
22+
checkedLowVision: false,
23+
checkedBrightness: false,
1824
});
1925

2026
// Mute/Unmute webview
2127
const muteAudio = (muted) => {
2228
const webview = document.querySelector('webview');
23-
// console.log(webview);
29+
console.log(webview);
2430
webview.setAudioMuted(muted);
2531
};
2632

33+
const activateReader = () => {
34+
// Ternary statement is backwards, as checkedBoxes.checkedReader updates after the case break
35+
checkedBoxes.checkedReader ? ScreenReader.speak({ value: 'Screen Reader is off' }) : ScreenReader.speak({ value: 'Screen Reader is on' });
36+
}
37+
2738
// helper function to add the https or http
2839
const addHttps = (url) => {
2940
if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) {
@@ -78,8 +89,34 @@ const BrowserView = () => {
7889
...checkedBoxes,
7990
checkedContrast: !checkedBoxes.checkedContrast,
8091
});
92+
console.log('after everything: ' + checkedBoxes.checkedReader);
8193
break;
8294

95+
// Updates screen reader
96+
case 'checkedReader':
97+
console.log('before setCheckBox: ' + checkedBoxes.checkedReader);
98+
setCheckBox({
99+
...checkedBoxes,
100+
checkedReader: !checkedBoxes.checkedReader,
101+
});
102+
console.log('after setCheckBox: ' + checkedBoxes.checkedReader);
103+
104+
activateReader(checkedBoxes.checkedReader);
105+
break;
106+
// a filter for low Vision, easier on eyes
107+
case 'checkedLowVision':
108+
setCheckBox({
109+
...checkedBoxes,
110+
checkedLowVision: !checkedBoxes.checkedLowVision,
111+
});
112+
break;
113+
//brightness test to emulate vision with light sensitivity
114+
case 'checkedBrightness' :
115+
setCheckBox({
116+
...checkedBoxes,
117+
checkedBrightness: !checkedBoxes.checkedBrightness,
118+
});
119+
break;
83120
default:
84121
break;
85122
}
@@ -96,10 +133,10 @@ const BrowserView = () => {
96133
id={styles.accessLensCheckBoxes}
97134
>
98135
<FormControlLabel
99-
// style={{fontSize:2}}
100-
id="Disable Mouse Checkbox"
101-
control={(
102-
<Checkbox
136+
// style={{fontSize:2}}
137+
id="Disable Mouse Checkbox"
138+
control={(
139+
<Checkbox
103140
value="disable mouse clicks"
104141
checked={checkedBoxes.checkedMouse}
105142
onChange={handleChangeCheckBox}
@@ -148,6 +185,45 @@ const BrowserView = () => {
148185
)}
149186
label="Mute"
150187
/>
188+
<FormControlLabel
189+
id="Turn on Screen Reader"
190+
control={(
191+
<Checkbox
192+
value="checkedReader"
193+
checked={checkedBoxes.checkedReader}
194+
onChange={handleChangeCheckBox}
195+
name="checkedReader"
196+
size='small'
197+
/>
198+
)}
199+
label="Screen Reader"
200+
/>
201+
<FormControlLabel
202+
id="Low Vision Checkbox"
203+
control={(
204+
<Checkbox
205+
value="filter"
206+
checked={checkedBoxes.checkedLowVision}
207+
onChange={handleChangeCheckBox}
208+
name="checkedLowVision"
209+
size='small'
210+
/>
211+
)}
212+
label="Low Vision "
213+
/>
214+
<FormControlLabel
215+
id="Brightness Checkbox"
216+
control={(
217+
<Checkbox
218+
value="filter"
219+
checked={checkedBoxes.checkedBrightness}
220+
onChange={handleChangeCheckBox}
221+
name="checkedBrightness"
222+
size='small'
223+
/>
224+
)}
225+
label="Light Sensitivity"
226+
/>
151227
</div>
152228
</div>
153229
{/* Search bar */}
@@ -161,8 +237,10 @@ const BrowserView = () => {
161237
id={styles.browserView}
162238
src={url}
163239
style={{
164-
filter: checkedBoxes.checkedGrayscale && checkedBoxes.checkedContrast ? 'grayscale(100%) contrast(0.2)'
165-
: checkedBoxes.checkedGrayscale? 'grayscale(100%)': checkedBoxes.checkedContrast?'contrast(0.2)': null,
240+
// filter: checkedBoxes.checkedGrayscale ? 'grayscale(100%)' : 'grayscale(0%)',
241+
filter: checkedBoxes.checkedGrayscale && checkedBoxes.checkedContrast && checkedBoxes.checkedLowVision && checkedBoxes.checkedBrightness ? 'grayscale(100%) contrast(0.2) invert(100%) brightness(150%)'
242+
: checkedBoxes.checkedGrayscale && checkedBoxes.checkedContrast ? 'grayscale(100%) contrast(0.2)'
243+
: checkedBoxes.checkedGrayscale ? 'grayscale(100%)' : checkedBoxes.checkedContrast ? 'contrast(0.2)' : checkedBoxes.checkedLowVision ? 'invert(100%)' : checkedBoxes.checkedBrightness ? 'brightness(150%)' : null,
166244
pointerEvents: checkedBoxes.checkedMouse ? 'none' : 'auto',
167245
}}
168246
/>

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
#browserView {
55
display: flex;
66
justify-content: center;
7-
height: 97vh;
7+
height: 75vh;
88
width: auto;
99
}
1010

@@ -28,8 +28,12 @@
2828
#accessLensContainer{
2929
display: flex;
3030
flex-direction: column;
31-
height: 80px;
32-
min-width: 100px;
31+
height: 114px;
32+
width: 100%;
33+
// border: $mint;
34+
// border-width: .1em;
35+
// border-radius: 5px;
36+
// border-style: solid;
3337
overflow-x: scroll;
3438
overflow-y: hidden;
3539
white-space: nowrap;
@@ -39,12 +43,14 @@
3943
#accessLensCheckBoxes{
4044
display: flex;
4145
justify-content: center;
46+
flex-wrap: wrap;
4247
align-items: center;
48+
width:auto;
4349
background-color: $mint2;
4450
border: $mint2;
45-
border-width: .1em;
46-
border-bottom-left-radius: 5px;
47-
border-bottom-right-radius: 5px;
51+
border-width: .05em;
52+
border-bottom-left-radius: 4px;
53+
border-bottom-right-radius: 4px;
4854
border-style: solid;
4955
}
5056

@@ -55,10 +61,11 @@
5561
color: white;
5662
font-size: 18px;
5763
font-family: $oxygen;
58-
height: 25px;
64+
height: auto;
65+
width: 100%;
5966
border: $mint;
60-
border-top-left-radius: 5px;
61-
border-top-right-radius: 5px;
67+
border-top-left-radius: 4px;
68+
border-top-right-radius: 4px;
6269
border-style: solid;
6370
}
6471

‎src/context/useGenerateTest.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1144,7 +1144,7 @@ function useGenerateTest(test, projectFilePath) {
11441144
e4x: true,
11451145
}))
11461146
);
1147-
case 'endpoint':
1147+
case 'endpoint test':
11481148
var endpointTestCase = testState;
11491149
return (
11501150
addEndpointImportStatements(),

‎src/pages/TestFile/TestFile.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,9 @@ const TestFile = () => {
133133
<button id={styles.save} onClick={() => handleToggle('redux')}>
134134
Redux
135135
</button>
136+
<button id={styles.save} onClick={() => handleToggle('vue')}>
137+
Vue
138+
</button>
136139
</span>
137140
</div>
138141
</ReactModal>
@@ -186,6 +189,14 @@ const TestFile = () => {
186189
</AccTestCaseContext.Provider>
187190
</section>
188191
)}
192+
//incomplete functionality: this is wired to go to a react test for now
193+
{testCase === 'vue' && (
194+
<section>
195+
<MockDataContext.Provider value={[mockData, dispatchToMockData]}>
196+
<ReactTestCase />
197+
</MockDataContext.Provider>
198+
</section>
199+
)}
189200

190201
{testCase === '' && (
191202
<Fragment>

0 commit comments

Comments
 (0)