random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-01 15:38:45 +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

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

@ -12,13 +12,13 @@
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;
} }
>.title { > .title {
position: relative; // To attach FeaturePanelLauncher as absolute position: relative; // To attach FeaturePanelLauncher as absolute
color: @BaseHigh; color: @BaseHigh;
font-size: 48px; font-size: 48px;
@ -27,7 +27,7 @@
text-align: center; text-align: center;
} }
>.subtitle { > .subtitle {
color: @BaseHigh; color: @BaseHigh;
font-size: 18px; font-size: 18px;
padding-left: 0px; padding-left: 0px;
@ -41,7 +41,7 @@
cursor: pointer; cursor: pointer;
margin: 40px auto; margin: 40px auto;
>.mainButton { > .mainButton {
min-width: 124px; min-width: 124px;
max-width: 296px; max-width: 296px;
padding: 32px 16px; padding: 32px 16px;
@ -52,7 +52,7 @@
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px; border-radius: 4px;
>.legendContainer { > .legendContainer {
margin-left: 16px; margin-left: 16px;
text-align: left; text-align: left;
@ -68,7 +68,7 @@
} }
} }
>:nth-child(n+2) { > :nth-child(n + 2) {
margin-left: 32px; margin-left: 32px;
} }
} }
@ -83,7 +83,7 @@
min-width: 124px; min-width: 124px;
max-width: 296px; max-width: 296px;
>.title { > .title {
font-size: 18px; font-size: 18px;
font-family: @SemiboldFont; font-family: @SemiboldFont;
color: @BaseDark; color: @BaseDark;
@ -91,7 +91,7 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
>ul { > ul {
list-style: none; list-style: none;
padding-left: 0px; padding-left: 0px;
margin-bottom: 0px; margin-bottom: 0px;
@ -101,7 +101,7 @@
.flex-display(); .flex-display();
align-items: flex-start; align-items: flex-start;
>img { > img {
margin-right: @DefaultSpace; margin-right: @DefaultSpace;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -133,12 +133,12 @@
.flex-display(); .flex-display();
.flex-direction(); .flex-direction();
>.title { > .title {
color: @BaseDark; color: @BaseDark;
padding: 0px; padding: 0px;
font-size: 12px; font-size: 12px;
} }
>.description { > .description {
color: @BaseDark; color: @BaseDark;
} }
@ -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>