mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-03-14 13:55:08 +00:00
fix a11y issue for the list
This commit is contained in:
parent
de5df90f75
commit
5d1a29d597
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user