Skip to content

Commit

Permalink
fix(styles): add focus and a11y changes for Card header [ci visual] (#…
Browse files Browse the repository at this point in the history 
…5265)
  • Loading branch information
@InnaAtanasova
InnaAtanasova authored Mar 29, 2024
1 parent 11fb890 commit 3a4045b
Show file tree
Hide file tree
Showing 9 changed files with 254 additions and 245 deletions.
33 changes: 18 additions & 15 deletions packages/styles/src/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,14 @@ $fd-card-header-outline-offset: 0.0625rem !default;
border-bottom: none;
border-top: $fd-card-header-border;
border-radius: 0 0 $fd-card-border-radius $fd-card-border-radius;

@include fd-focus() {
&::before {
top: $fd-card-header-outline-offset * 2;
bottom: $fd-card-header-outline-offset;
border-radius: 0 0 $fd-card-border-radius $fd-card-border-radius;

&-container {
@include fd-focus() {
&::before {
top: $fd-card-header-outline-offset * 2;
bottom: $fd-card-header-outline-offset;
border-radius: 0 0 $fd-card-border-radius $fd-card-border-radius;
}
}
}
}
Expand All @@ -85,11 +87,13 @@ $fd-card-header-outline-offset: 0.0625rem !default;
border: none;
border-radius: $fd-card-border-radius;

@include fd-focus() {
&::before {
top: $fd-card-header-outline-offset;
bottom: $fd-card-header-outline-offset;
border-radius: $fd-card-border-radius;
&-container {
@include fd-focus() {
&::before {
top: $fd-card-header-outline-offset;
bottom: $fd-card-header-outline-offset;
border-radius: $fd-card-border-radius;
}
}
}
}
Expand All @@ -103,10 +107,6 @@ $fd-card-header-outline-offset: 0.0625rem !default;
gap: 0.5rem
};

&:not(.#{$block}__header-main--non-interactive) {
@include fake-card-outline();
}

cursor: pointer;
position: relative;
padding-block: 1rem;
Expand Down Expand Up @@ -139,14 +139,17 @@ $fd-card-header-outline-offset: 0.0625rem !default;

&__header-main-container {
@include fd-reset();
@include fake-card-outline();

@include fd-flex() {
gap: 0.5rem;
flex: 1;
align-items: flex-start;
};

width: 100%;
height: fit-content;

}

&__header-main-actions {
Expand Down
125 changes: 64 additions & 61 deletions packages/styles/stories/Components/card/analytical-card.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,44 @@
<div style="width: 300px; height: 400px; margin: 1rem;">
<div class="fd-card fd-card--analytical" role="region" aria-label="Analytical Card Example 1">
<div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="analytical-card-title-1">
<a class="fd-card__header-main" tabindex="0">
<div class="fd-card__header-text">
<div class="fd-card__title-area">
<div class="fd-card__title" id="analytical-card-title-1" role="heading" aria-level="3">Card Title</div>
<span class="fd-object-status fd-card__counter">Counter</span>
</div>
<div class="fd-card__subtitle-area">
<div class="fd-card__subtitle">Card Subtitle</div>
<div class="fd-card__currency">Currency</div>
</div>
<div class="fd-card__analytics-area">
<div class="fd-numeric-content fd-card__numeric-content">
<div class="fd-numeric-content__kpi-container">
<div class="fd-numeric-content__kpi">1Ñç</div>
</div>
<div class="fd-numeric-content__scale-container">
<div class="fd-numeric-content__scale">
<i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
<span class="fd-numeric-content__scale-text">M</span>
</div>
</div>
<div class="fd-card__header-main">
<div class="fd-card__header-main-container" role="button" tabindex="0">
<div class="fd-card__header-text">
<div class="fd-card__title-area">
<div class="fd-card__title" id="analytical-card-title-1" role="heading" aria-level="3">Card Title</div>
<span class="fd-object-status fd-card__counter">Counter</span>
</div>
<div class="fd-card__subtitle-area">
<div class="fd-card__subtitle">Card Subtitle</div>
<div class="fd-card__currency">Currency</div>
</div>
<div class="fd-card__analytics-container">
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Target</div>
<div class="fd-card__analytics-content">110K</div>
<div class="fd-card__analytics-area">
<div class="fd-numeric-content fd-card__numeric-content">
<div class="fd-numeric-content__kpi-container">
<div class="fd-numeric-content__kpi">1Ñç</div>
</div>
<div class="fd-numeric-content__scale-container">
<div class="fd-numeric-content__scale">
<i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
<span class="fd-numeric-content__scale-text">M</span>
</div>
</div>
</div>
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Deviation</div>
<div class="fd-card__analytics-content">-35.7%</div>
<div class="fd-card__analytics-container">
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Target</div>
<div class="fd-card__analytics-content">110K</div>
</div>
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Deviation</div>
<div class="fd-card__analytics-content">-35.7%</div>
</div>
</div>
</div>
<div class="fd-card__second-subtitle">Second Subtitle</div>
</div>
<div class="fd-card__second-subtitle">Second Subtitle</div>
</div>
</a>

</div>
</div>
<div class="fd-card__content" role="group" aria-roledescription="Card content"></div>
</div>
Expand All @@ -47,42 +48,44 @@
<div style="width: 700px; height: 400px; margin: 1rem;">
<div class="fd-card fd-card--analytical" role="region" aria-label="Analytical Card Example 2">
<div class="fd-card__header" role="group" aria-roledescription="Card Header" aria-labelledby="analytical-card-title-2">
<a class="fd-card__header-main" tabindex="0">
<div class="fd-card__header-text">
<div class="fd-card__title-area">
<div class="fd-card__title" id="analytical-card-title-2" role="heading" aria-level="3">Card Title With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<span class="fd-object-status fd-card__counter">Counter</span>
</div>
<div class="fd-card__subtitle-area">
<div class="fd-card__subtitle">Card Subtitle With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="fd-card__currency">Currency</div>
</div>
<div class="fd-card__analytics-area">
<div class="fd-numeric-content fd-card__numeric-content">
<div class="fd-numeric-content__kpi-container">
<div class="fd-numeric-content__kpi">1Ñç</div>
</div>
<div class="fd-numeric-content__scale-container">
<div class="fd-numeric-content__scale">
<i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
<span class="fd-numeric-content__scale-text">M</span>
</div>
</div>
<div class="fd-card__header-main">
<div class="fd-card__header-main-container" role="button" tabindex="0">
<div class="fd-card__header-text">
<div class="fd-card__title-area">
<div class="fd-card__title" id="analytical-card-title-2" role="heading" aria-level="3">Card Title With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<span class="fd-object-status fd-card__counter">Counter</span>
</div>
<div class="fd-card__analytics-container">
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Target</div>
<div class="fd-card__analytics-content">110K</div>
<div class="fd-card__subtitle-area">
<div class="fd-card__subtitle">Card Subtitle With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="fd-card__currency">Currency</div>
</div>
<div class="fd-card__analytics-area">
<div class="fd-numeric-content fd-card__numeric-content">
<div class="fd-numeric-content__kpi-container">
<div class="fd-numeric-content__kpi">1Ñç</div>
</div>
<div class="fd-numeric-content__scale-container">
<div class="fd-numeric-content__scale">
<i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
<span class="fd-numeric-content__scale-text">M</span>
</div>
</div>
</div>
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Deviation</div>
<div class="fd-card__analytics-content">-35.7%</div>
<div class="fd-card__analytics-container">
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Target</div>
<div class="fd-card__analytics-content">110K</div>
</div>
<div class="fd-card__analytics">
<div class="fd-card__analytics-text">Deviation</div>
<div class="fd-card__analytics-content">-35.7%</div>
</div>
</div>
</div>
<div class="fd-card__second-subtitle">Second Subtitle With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
<div class="fd-card__second-subtitle">Second Subtitle With a Very Long Text ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</a>
</div>
<div class="fd-badge">Badge</div>

</div>
Expand Down
Loading

0 comments on commit 3a4045b

Please sign in to comment.