random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-03-31 15:09:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix a11y issue for the list

Browse Source
This commit is contained in:
vaidankarswapnil 2022-01-19 19:54:36 +05:30
parent de5df90f75
commit 5d1a29d597
2 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Explorer/SplashScreen/SplashScreen.less
View File

@ -12,7 +12,7 @@
margin: auto; margin: auto;
padding-left: 21px; padding-left: 21px;
padding-right: 16px; padding-right: 16px;
max-width: 1168px;; max-width: 1168px;
> * { > * {
justify-content: space-between; justify-content: space-between;
@ -150,6 +150,14 @@
&.commonTasks { &.commonTasks {
li { li {
cursor: pointer; cursor: pointer;
.commonTaskList {
width: 100%;
> img {
margin-right: @DefaultSpace;
width: 24px;
height: 24px;
}
}
} }
} }

8
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -57,13 +57,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
this.subscriptions = []; this.subscriptions = [];
} }
public componentWillUnmount() { public componentWillUnmount(): void {
while (this.subscriptions.length) { while (this.subscriptions.length) {
this.subscriptions.pop().dispose(); this.subscriptions.pop().dispose();
} }
} }
public componentDidMount() { public componentDidMount(): void {
this.subscriptions.push( this.subscriptions.push(
{ {
dispose: useNotebook.subscribe( dispose: useNotebook.subscribe(
@ -131,13 +131,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
key={`${item.title}${item.description}`} key={`${item.title}${item.description}`}
onClick={item.onClick} onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)} onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
> >
<div className="commonTaskList" role="button" tabIndex={0}>
<img src={item.iconSrc} alt="" /> <img src={item.iconSrc} alt="" />
<span className="oneLineContent" title={item.info}> <span className="oneLineContent" title={item.info}>
{item.title} {item.title}
</span> </span>
</div>
</li> </li>
))} ))}
</ul> </ul>