onfocus the outline has been removed and the offset has been adjusted for the link to be clearly visible

This commit is contained in:
Sampath 2024-03-06 12:30:01 +05:30
parent 533e9c887c
commit f11e0b85bd
3 changed files with 22 additions and 3 deletions

View File

@ -14,7 +14,7 @@
.throughputInputSpacing > :not(:last-child) {
margin-bottom: @DefaultSpace;
}
.capacitycalculator-link:focus{
.capacitycalculator-link:focus {
text-decoration: underline;
outline-offset: 2px;
}
}

View File

@ -224,8 +224,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
Estimate your required RU/s with{" "}
<Link
target="_blank"
className="capacitycalculator-link"
href="https://cosmos.azure.com/capacitycalculator/"
aria-label="capacity calculator of azure cosmos db"
style={{ outline: "none" }}
>
capacity calculator
</Link>

View File

@ -733,12 +733,24 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<StyledLinkBase
aria-label="capacity calculator of azure cosmos db"
className="capacitycalculator-link"
href="https://cosmos.azure.com/capacitycalculator/"
style={
Object {
"outline": "none",
}
}
target="_blank"
>
<LinkBase
aria-label="capacity calculator of azure cosmos db"
className="capacitycalculator-link"
href="https://cosmos.azure.com/capacitycalculator/"
style={
Object {
"outline": "none",
}
}
styles={[Function]}
target="_blank"
theme={
@ -1017,9 +1029,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
<a
aria-label="capacity calculator of azure cosmos db"
className="ms-Link root-117"
className="ms-Link capacitycalculator-link root-117"
href="https://cosmos.azure.com/capacitycalculator/"
onClick={[Function]}
style={
Object {
"outline": "none",
}
}
target="_blank"
>
capacity calculator