Skip to content

Commit fd05c26

Browse files
MarkoMackicMarkoMackic
authored
Accessibility fix ( long test names can be scrolled into view ) (#987)
* Accessibility fix ( long test names can be scrolled into view * Fixed suite expand/collapse * Fix situation where none of test names oveflow * lint fix
1 parent fccddbb commit fd05c26

File tree

2 files changed

+156
-139
lines changed

2 files changed

+156
-139
lines changed

‎packages/selenium-ide/src/neo/components/TestList/index.jsx‎

Lines changed: 140 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -40,142 +40,146 @@ export default class TestList extends Component {
4040
}
4141
render() {
4242
return (
43-
<ul className={classNames('tests', { active: !this.props.collapsed })}>
44-
{this.props.tests.map((test, index) => (
45-
<li key={test.id}>
46-
{this.props.noMenu ? (
47-
<Test
48-
key={test.id}
49-
className={PlaybackState.testState.get(test.id)}
50-
callstack={
51-
PlaybackState.stackCaller === test
52-
? PlaybackState.callstack
53-
: undefined
54-
}
55-
selectedStackIndex={
56-
PlaybackState.stackCaller === test
57-
? UiState.selectedTest.stack
58-
: undefined
59-
}
60-
index={index}
61-
test={test}
62-
suite={this.props.suite}
63-
selected={
64-
UiState.selectedTest.test &&
65-
test.id === UiState.selectedTest.test.id
66-
}
67-
isExecuting={
68-
PlaybackState.isPlaying &&
69-
PlaybackState.stackCaller &&
70-
PlaybackState.stackCaller.id === test.id
71-
}
72-
paused={
73-
PlaybackState.stackCaller &&
74-
PlaybackState.stackCaller.id === test.id &&
75-
PlaybackState.paused
76-
}
77-
changed={test.modified}
78-
selectTest={UiState.selectTest}
79-
moveSelectionUp={() => {
80-
UiState.selectTestByIndex(index - 1)
81-
}}
82-
moveSelectionDown={() => {
83-
UiState.selectTestByIndex(index + 1)
84-
}}
85-
setSectionFocus={UiState.setSectionFocus}
86-
/>
87-
) : this.props.suite ? (
88-
<DraggableTest
89-
className={PlaybackState.testState.get(test.id)}
90-
index={index}
91-
test={test}
92-
suite={this.props.suite}
93-
selected={
94-
UiState.selectedTest.test &&
95-
test.id === UiState.selectedTest.test.id &&
96-
this.props.suite.id ===
97-
(UiState.selectedTest.suite
98-
? UiState.selectedTest.suite.id
99-
: undefined)
100-
}
101-
isExecuting={
102-
PlaybackState.isPlaying &&
103-
PlaybackState.stackCaller &&
104-
PlaybackState.stackCaller.id === test.id
105-
}
106-
paused={
107-
PlaybackState.stackCaller &&
108-
PlaybackState.stackCaller.id === test.id &&
109-
PlaybackState.paused
110-
}
111-
changed={test.modified}
112-
selectTest={UiState.selectTest}
113-
removeTest={
114-
this.props.removeTest
115-
? () => {
116-
this.props.removeTest(test)
117-
}
118-
: undefined
119-
}
120-
swapTests={this.props.suite.swapTestCases}
121-
moveSelectionUp={() => {
122-
UiState.selectTestByIndex(index - 1, this.props.suite)
123-
}}
124-
moveSelectionDown={() => {
125-
UiState.selectTestByIndex(index + 1, this.props.suite)
126-
}}
127-
setSectionFocus={UiState.setSectionFocus}
128-
/>
129-
) : (
130-
<MenuTest
131-
key={test.id}
132-
className={PlaybackState.testState.get(test.id)}
133-
index={index}
134-
test={test}
135-
selected={
136-
UiState.selectedTest.test &&
137-
test.id === UiState.selectedTest.test.id
138-
}
139-
isExecuting={
140-
PlaybackState.isPlaying &&
141-
PlaybackState.stackCaller &&
142-
PlaybackState.stackCaller.id === test.id
143-
}
144-
paused={
145-
PlaybackState.stackCaller &&
146-
PlaybackState.stackCaller.id === test.id &&
147-
PlaybackState.paused
148-
}
149-
changed={test.modified}
150-
selectTest={UiState.selectTest}
151-
renameTest={this.props.renameTest}
152-
duplicateTest={() => {
153-
this.props.duplicateTest(test)
154-
}}
155-
removeTest={
156-
this.props.removeTest
157-
? () => {
158-
this.props.removeTest(test)
159-
}
160-
: undefined
161-
}
162-
codeExport={() => {
163-
this.props.codeExport({
164-
test: test.export(),
165-
})
166-
}}
167-
moveSelectionUp={() => {
168-
UiState.selectTestByIndex(index - 1)
169-
}}
170-
moveSelectionDown={() => {
171-
UiState.selectTestByIndex(index + 1)
172-
}}
173-
setSectionFocus={UiState.setSectionFocus}
174-
/>
175-
)}
176-
</li>
177-
))}
178-
</ul>
43+
<div
44+
className={classNames('tests_div', { active: !this.props.collapsed })}
45+
>
46+
<ul className={classNames('tests')}>
47+
{this.props.tests.map((test, index) => (
48+
<li key={test.id}>
49+
{this.props.noMenu ? (
50+
<Test
51+
key={test.id}
52+
className={PlaybackState.testState.get(test.id)}
53+
callstack={
54+
PlaybackState.stackCaller === test
55+
? PlaybackState.callstack
56+
: undefined
57+
}
58+
selectedStackIndex={
59+
PlaybackState.stackCaller === test
60+
? UiState.selectedTest.stack
61+
: undefined
62+
}
63+
index={index}
64+
test={test}
65+
suite={this.props.suite}
66+
selected={
67+
UiState.selectedTest.test &&
68+
test.id === UiState.selectedTest.test.id
69+
}
70+
isExecuting={
71+
PlaybackState.isPlaying &&
72+
PlaybackState.stackCaller &&
73+
PlaybackState.stackCaller.id === test.id
74+
}
75+
paused={
76+
PlaybackState.stackCaller &&
77+
PlaybackState.stackCaller.id === test.id &&
78+
PlaybackState.paused
79+
}
80+
changed={test.modified}
81+
selectTest={UiState.selectTest}
82+
moveSelectionUp={() => {
83+
UiState.selectTestByIndex(index - 1)
84+
}}
85+
moveSelectionDown={() => {
86+
UiState.selectTestByIndex(index + 1)
87+
}}
88+
setSectionFocus={UiState.setSectionFocus}
89+
/>
90+
) : this.props.suite ? (
91+
<DraggableTest
92+
className={PlaybackState.testState.get(test.id)}
93+
index={index}
94+
test={test}
95+
suite={this.props.suite}
96+
selected={
97+
UiState.selectedTest.test &&
98+
test.id === UiState.selectedTest.test.id &&
99+
this.props.suite.id ===
100+
(UiState.selectedTest.suite
101+
? UiState.selectedTest.suite.id
102+
: undefined)
103+
}
104+
isExecuting={
105+
PlaybackState.isPlaying &&
106+
PlaybackState.stackCaller &&
107+
PlaybackState.stackCaller.id === test.id
108+
}
109+
paused={
110+
PlaybackState.stackCaller &&
111+
PlaybackState.stackCaller.id === test.id &&
112+
PlaybackState.paused
113+
}
114+
changed={test.modified}
115+
selectTest={UiState.selectTest}
116+
removeTest={
117+
this.props.removeTest
118+
? () => {
119+
this.props.removeTest(test)
120+
}
121+
: undefined
122+
}
123+
swapTests={this.props.suite.swapTestCases}
124+
moveSelectionUp={() => {
125+
UiState.selectTestByIndex(index - 1, this.props.suite)
126+
}}
127+
moveSelectionDown={() => {
128+
UiState.selectTestByIndex(index + 1, this.props.suite)
129+
}}
130+
setSectionFocus={UiState.setSectionFocus}
131+
/>
132+
) : (
133+
<MenuTest
134+
key={test.id}
135+
className={PlaybackState.testState.get(test.id)}
136+
index={index}
137+
test={test}
138+
selected={
139+
UiState.selectedTest.test &&
140+
test.id === UiState.selectedTest.test.id
141+
}
142+
isExecuting={
143+
PlaybackState.isPlaying &&
144+
PlaybackState.stackCaller &&
145+
PlaybackState.stackCaller.id === test.id
146+
}
147+
paused={
148+
PlaybackState.stackCaller &&
149+
PlaybackState.stackCaller.id === test.id &&
150+
PlaybackState.paused
151+
}
152+
changed={test.modified}
153+
selectTest={UiState.selectTest}
154+
renameTest={this.props.renameTest}
155+
duplicateTest={() => {
156+
this.props.duplicateTest(test)
157+
}}
158+
removeTest={
159+
this.props.removeTest
160+
? () => {
161+
this.props.removeTest(test)
162+
}
163+
: undefined
164+
}
165+
codeExport={() => {
166+
this.props.codeExport({
167+
test: test.export(),
168+
})
169+
}}
170+
moveSelectionUp={() => {
171+
UiState.selectTestByIndex(index - 1)
172+
}}
173+
moveSelectionDown={() => {
174+
UiState.selectTestByIndex(index + 1)
175+
}}
176+
setSectionFocus={UiState.setSectionFocus}
177+
/>
178+
)}
179+
</li>
180+
))}
181+
</ul>
182+
</div>
179183
)
180184
}
181185
}

‎packages/selenium-ide/src/neo/components/TestList/style.css‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
.tests {
2-
max-height: 0;
3-
overflow-x: hidden;
2+
max-height: 100%;
3+
min-width: 100%;
44
overflow-y: auto;
55
transition: max-height 300ms linear;
66
list-style: none;
7+
display: table;
78
}
89

9-
.tests.active {
10+
.tests_div {
11+
overflow-x: scroll;
12+
transition: max-height 300ms linear;
13+
max-height: 0;
14+
flex-grow: 1;
15+
}
16+
17+
.tests_div.active {
1018
max-height: 100%;
1119
transition: max-height 300ms linear;
1220
}
1321

22+
.tests.active {
23+
max-height: 100%;
24+
}
25+
1426
.tests li {
1527
margin: 7px 0;
28+
display: block;
1629
}

0 commit comments

Comments
 (0)