fix a11y issue for the list

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

View File

@ -12,13 +12,13 @@
margin: auto;
padding-left: 21px;
padding-right: 16px;
max-width: 1168px;;
max-width: 1168px;
>* {
> * {
justify-content: space-between;
}
>.title {
> .title {
position: relative; // To attach FeaturePanelLauncher as absolute
color: @BaseHigh;
font-size: 48px;
@ -27,7 +27,7 @@
text-align: center;
}
>.subtitle {
> .subtitle {
color: @BaseHigh;
font-size: 18px;
padding-left: 0px;
@ -41,7 +41,7 @@
cursor: pointer;
margin: 40px auto;
>.mainButton {
> .mainButton {
min-width: 124px;
max-width: 296px;
padding: 32px 16px;
@ -52,7 +52,7 @@
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
>.legendContainer {
> .legendContainer {
margin-left: 16px;
text-align: left;
@ -68,7 +68,7 @@
}
}
>:nth-child(n+2) {
> :nth-child(n + 2) {
margin-left: 32px;
}
}
@ -83,7 +83,7 @@
min-width: 124px;
max-width: 296px;
>.title {
> .title {
font-size: 18px;
font-family: @SemiboldFont;
color: @BaseDark;
@ -91,7 +91,7 @@
margin-bottom: 16px;
}
>ul {
> ul {
list-style: none;
padding-left: 0px;
margin-bottom: 0px;
@ -101,7 +101,7 @@
.flex-display();
align-items: flex-start;
>img {
> img {
margin-right: @DefaultSpace;
width: 24px;
height: 24px;
@ -133,12 +133,12 @@
.flex-display();
.flex-direction();
>.title {
> .title {
color: @BaseDark;
padding: 0px;
font-size: 12px;
}
>.description {
> .description {
color: @BaseDark;
}
@ -150,6 +150,14 @@
&.commonTasks {
li {
cursor: pointer;
.commonTaskList {
width: 100%;
> img {
margin-right: @DefaultSpace;
width: 24px;
height: 24px;
}
}
}
}
@ -167,12 +175,12 @@
}
&:focus {
.focus();
.focus();
}
&:active {
.active();
.active();
}
}
}
}
}

View File

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