Skip to content

Commit 041bbdd

Browse files
Oliver-ChoOliver-Cho
committed
fixed the bug that crashes upon enabling accessibility button
1 parent 2c8fd5f commit 041bbdd

File tree

4 files changed

+118
-105
lines changed

4 files changed

+118
-105
lines changed

‎src/app/components/StateRoute/AxMap/Ax.tsx‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -49,91 +49,97 @@ interface TreeNode {
4949

5050
const data: TreeNode = {
5151
name: {
52-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
53-
type: "computedString",
54-
value: "Reactime MVP"
52+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
53+
type: 'computedString',
54+
value: 'Reactime MVP',
5555
},
5656
backendDOMNodeId: 1,
5757
childIds: ['46'],
5858
ignored: false,
59-
children: [{
59+
children: [
60+
{
6061
name: {
61-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
62-
type: "computedString",
63-
value: ""
62+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
63+
type: 'computedString',
64+
value: '',
6465
},
6566
backendDOMNodeId: 7,
6667
childIds: ['47'],
6768
ignored: true,
68-
}, {
69+
},
70+
{
6971
name: {
70-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
71-
type: "computedString",
72-
value: "Tic-Tac-Toe"
72+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
73+
type: 'computedString',
74+
value: 'Tic-Tac-Toe',
7375
},
7476
backendDOMNodeId: 8,
7577
childIds: ['48'],
7678
ignored: false,
77-
}],
79+
},
80+
],
7881
};
7982

8083
const nodeAxArr = [
8184
{
8285
name: {
83-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
84-
type: "computedString",
85-
value: "Reactime MVP"
86+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
87+
type: 'computedString',
88+
value: 'Reactime MVP',
8689
},
8790
backendDOMNodeId: 1,
8891
childIds: ['46'],
8992
ignored: false,
90-
children: [{
93+
children: [
94+
{
9195
name: {
92-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
93-
type: "computedString",
94-
value: ""
96+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
97+
type: 'computedString',
98+
value: '',
9599
},
96100
backendDOMNodeId: 7,
97101
childIds: ['47'],
98102
ignored: true,
99-
}, {
103+
},
104+
{
100105
name: {
101-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
102-
type: "computedString",
103-
value: "Tic-Tac-Toe"
106+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
107+
type: 'computedString',
108+
value: 'Tic-Tac-Toe',
104109
},
105110
backendDOMNodeId: 8,
106111
childIds: ['48'],
107112
ignored: false,
108-
}],
113+
},
114+
],
109115
},
110116
{
111117
name: {
112-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
113-
type: "computedString",
114-
value: ""
118+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
119+
type: 'computedString',
120+
value: '',
115121
},
116122
backendDOMNodeId: 7,
117123
childIds: ['47'],
118124
ignored: true,
119125
},
120126
{
121127
name: {
122-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
123-
type: "computedString",
124-
value: "Tic-Tac-Toe"
128+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
129+
type: 'computedString',
130+
value: 'Tic-Tac-Toe',
125131
},
126132
backendDOMNodeId: 8,
127133
childIds: ['48'],
128134
ignored: false,
129-
}
130-
]
135+
},
136+
];
131137

132-
const defaultMargin = {
138+
const defaultMargin = {
133139
top: 30,
134140
left: 30,
135141
right: 55,
136-
bottom: 70,
142+
bottom: 70,
137143
};
138144

139145
const nodeCoords: object = {};
@@ -150,12 +156,7 @@ export type LinkTypesProps = {
150156
};
151157

152158
export default function AxTree(props) {
153-
const {
154-
currLocation,
155-
axSnapshots,
156-
width,
157-
height
158-
} = props;
159+
const { currLocation, axSnapshots, width, height } = props;
159160

160161
let margin = defaultMargin;
161162
let totalWidth = width;
@@ -207,7 +208,7 @@ export default function AxTree(props) {
207208
// currNode.children = [];
208209
// // checks if there is more than 1 child
209210
// if (currNode.childIds.length > 1) {
210-
// for (let m = 0; m < currNode.childIds.length; m++) {
211+
// for (let m = 0; m < currNode.childIds.length; m++) {
211212
// for (let j = 0; j < currAxSnapshot.length; j++) {
212213
// if (currNode.childIds.includes(currAxSnapshot[j].nodeId)) {
213214
// currNode.children.push(currAxSnapshot[j]);
@@ -228,21 +229,20 @@ export default function AxTree(props) {
228229
// organizeAxTree([rootAxNode], currAxSnapshot);
229230
const organizeAxTree = (currNode, currAxSnapshot) => {
230231
if (currNode.childIds && currNode.childIds.length > 0) {
231-
currNode.children = [];
232+
currNode.children = [];
232233
for (let j = 0; j < currAxSnapshot.length; j++) {
233234
for (const childEle of currNode.childIds) {
234235
if (childEle === currAxSnapshot[j].nodeId) {
235236
currNode.children.push(currAxSnapshot[j]);
236237
organizeAxTree(currAxSnapshot[j], currAxSnapshot);
237238
}
238239
}
239-
240240
}
241241
}
242-
}
242+
};
243243

244244
organizeAxTree(rootAxNode, currAxSnapshot);
245-
245+
246246
console.log('rootAxNode: ', rootAxNode);
247247

248248
// store each individual node, now with children property in nodeAxArr
@@ -267,7 +267,7 @@ export default function AxTree(props) {
267267
console.log('nodeAxArr: ', nodeAxArr);
268268

269269
const {
270-
containerRef // Access to the container's bounding box. This will be empty on first render.
270+
containerRef, // Access to the container's bounding box. This will be empty on first render.
271271
} = useTooltipInPortal({
272272
// Visx hook
273273
detectBounds: true, // use TooltipWithBounds
@@ -291,12 +291,12 @@ export default function AxTree(props) {
291291
<svg ref={containerRef} width={totalWidth} height={totalHeight + 0}>
292292
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
293293
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
294-
<rect
294+
<rect
295295
className='componentMapContainer'
296296
width={sizeWidth / aspect}
297297
height={sizeHeight / aspect + 0}
298298
rx={14}
299-
/>
299+
/>
300300
<Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
301301
<Tree
302302
root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
@@ -310,12 +310,11 @@ export default function AxTree(props) {
310310
key={i}
311311
data={link}
312312
percent={stepPercent}
313-
stroke="rgb(254,110,158,0.6)"
314-
strokeWidth="1"
315-
fill="none"
313+
stroke='rgb(254,110,158,0.6)'
314+
strokeWidth='1'
315+
fill='none'
316316
/>
317317
))}
318-
319318
// code relating to each node in tree
320319
{tree.descendants().map((node, key) => {
321320
const widthFunc = (name): number => {
@@ -480,4 +479,3 @@ export default function AxTree(props) {
480479
</div>
481480
);
482481
}
483-

‎src/app/components/StateRoute/StateRoute.tsx‎

Lines changed: 56 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ const StateRoute = (props: StateRouteProps) => {
3535
currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
3636
} = props;
3737

38-
3938
const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
4039
const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
4140
const hierarchy = propsHierarchy || tabsHierarchy;
@@ -61,7 +60,6 @@ const StateRoute = (props: StateRouteProps) => {
6160
setShowTree(false);
6261
};
6362

64-
6563
return (
6664
<div className='app-body'>
6765
<div className='navbar'>
@@ -125,64 +123,79 @@ const StateRoute = (props: StateRouteProps) => {
125123
path='/accessibility'
126124
element={
127125
showTree ? (
128-
<ParentSize className='componentMapContainer'>
126+
<ParentSize className='componentMapContainer'>
129127
{({ width, height }) => {
130128
// eslint-disable-next-line react/prop-types
131129
const maxHeight: number = 1200;
132130
const h = Math.min(height, maxHeight);
133131
return (
134132
<div>
135-
<input type="radio" value='enable' checked={selectedValue === 'enable'} onChange={() => {
136-
enableAxTreeButton(); }} /> <label htmlFor='enable'>Enable</label>
137-
<input type="radio" value='disable' checked={selectedValue === 'disable'} onChange={() => {
138-
disableAxTree(); }}/>
139-
<label htmlFor='disable'>Disable</label>
133+
<input
134+
type='radio'
135+
value='enable'
136+
checked={selectedValue === 'enable'}
137+
onChange={() => {
138+
enableAxTreeButton();
139+
}}
140+
/>{' '}
141+
<label htmlFor='enable'>Enable</label>
142+
<input
143+
type='radio'
144+
value='disable'
145+
checked={selectedValue === 'disable'}
146+
onChange={() => {
147+
disableAxTree();
148+
}}
149+
/>
150+
<label htmlFor='disable'>Disable</label>
140151
<AxTree
141152
axSnapshots={axSnapshots}
142153
snapshot={snapshot}
143154
snapshots={snapshots}
144155
currLocation={currLocation}
145156
width={width}
146157
height={h}
147-
/>
158+
/>
148159
</div>
149160
);
150161
}}
151162
</ParentSize>
152-
) : <div>
153-
{showParagraph && (
154-
<p>
155-
A Note to Developers: Reactime is using the Chrome Debugger API in order to grab the
156-
Accessibility Tree. Enabling this option will allow you to record Accessibility Tree
157-
snapshots, but will result in the Chrome browser notifying you that the Chrome Debugger
158-
has started.
159-
</p>
160-
)}
161-
<div>
162-
{
163-
<input
164-
type='radio'
165-
value='enable'
166-
checked={selectedValue === 'enable'}
167-
onChange={() => {
168-
enableAxTreeButton();
169-
}}
170-
/>
171-
}
172-
<label htmlFor='enable'>Enable</label>
173-
{
174-
<input
175-
type='radio'
176-
value='disable'
177-
checked={selectedValue === 'disable'}
178-
onChange={() => {
179-
disableAxTree();
180-
}}
181-
/>
182-
}
183-
<label htmlFor='disable'>Disable</label>
184-
</div>
185-
</div>
163+
) : (
164+
<div>
165+
{showParagraph && (
166+
<p>
167+
A Note to Developers: Reactime is using the Chrome Debugger API in order to
168+
grab the Accessibility Tree. Enabling this option will allow you to record
169+
Accessibility Tree snapshots, but will result in the Chrome browser notifying
170+
you that the Chrome Debugger has started.
171+
</p>
172+
)}
173+
<div>
174+
{
175+
<input
176+
type='radio'
177+
value='enable'
178+
checked={selectedValue === 'enable'}
179+
onChange={() => {
180+
enableAxTreeButton();
181+
}}
182+
/>
183+
}
184+
<label htmlFor='enable'>Enable</label>
185+
{
186+
<input
187+
type='radio'
188+
value='disable'
189+
checked={selectedValue === 'disable'}
190+
onChange={() => {
191+
disableAxTree();
192+
}}
193+
/>
194+
}
195+
<label htmlFor='disable'>Disable</label>
196+
</div>
197+
</div>
198+
)
186199
}
187200
></Route>
188201
<Route

‎src/app/slices/mainSlice.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ export const mainSlice = createSlice({
119119
tabs[currentTab] || {};
120120
const { payload } = action;
121121

122+
// console.log('mainSlice.ts: axSnapshots:', tabs[currentTab].axSnapshots);
123+
122124
Object.keys(payload).forEach((tab) => {
123125
// check if tab exists in memory
124126
// add new tab
@@ -509,13 +511,13 @@ export const mainSlice = createSlice({
509511
},
510512

511513
toggleAxTree: (state, action) => {
512-
const { port, payload, tabs, currentTab} = state;
514+
const { port, payload, tabs, currentTab } = state;
513515
port.postMessage({
514516
action: 'toggleAxRecord',
515517
payload: action.payload,
516518
tabId: currentTab,
517-
})
518-
}
519+
});
520+
},
519521
},
520522
});
521523

0 commit comments

Comments
 (0)