Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(sbb-image): fix alt attribute and provide css var for aspect-ratio #2607

Merged
merged 6 commits into from
Apr 23, 2024
Merged

fix(sbb-image): fix alt attribute and provide css var for aspect-ratio #2607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
117b38c
fix: enabling a flexible aspect ratio through the use of a css variable
mbleuer Apr 22, 2024
f688448
fix: even if there is not alt text, the attribute must always be pres…
mbleuer Apr 22, 2024
81f5a6b
Merge branch 'lyne-design-system:main' into fix/image-improvements
mbleuer Apr 22, 2024
2f3ee9a
fix: updating read.me
mbleuer Apr 22, 2024
44d1b2e
fix: prefixing new variable and adding cssprop documentation
mbleuer Apr 22, 2024
ade920a
fix: adding comment to explain the need for the alt attribute
mbleuer Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/image/image.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe(`sbb-image with ${fixture.name}`, () => {
<source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
<source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
<source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
<img class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
<img alt="" class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
</picture>
</div>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/components/image/image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@

// aspect ratios 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'
.image__figure--ratio-free .image__wrapper {
aspect-ratio: auto;
aspect-ratio: var(--sbb-image-aspect-ratio, auto);
}

.image__figure--ratio-1-1 .image__wrapper {
Expand Down
16 changes: 15 additions & 1 deletion src/components/image/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,14 @@ const breakpointMap: Record<string, number> = {

/**
* It displays an image.
*
* @cssprop [--sbb-image-aspect-ratio=auto] - When the aspectRatio property
* on the component is set to 'free', the CSS declaration of the aspect
* ratio is set to var(--sbb-image-aspect-ratio, auto). Since CSS
* variables find their way into the shadow DOM, we can use the
* --sbb-image-aspect-ratio variable to override the aspect ratio at will.
* This way we can have, for example, an image component with an aspect
* ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
*/
@customElement('sbb-image')
export class SbbImageElement extends LitElement {
Expand Down Expand Up @@ -457,6 +465,12 @@ export class SbbImageElement extends LitElement {

const pictureSizeConfigs = this._preparePictureSizeConfigs();

/**
* The alt attribute should always be present for the img element.
* If it has an empty string as its value, it is simply ignored
* by assistive technologies. If we leave it out completely,
* they might try to interpret the img element.
*/
return html`
<figure
class=${classMap({
Expand Down Expand Up @@ -501,7 +515,7 @@ export class SbbImageElement extends LitElement {
];
})}
<img
alt=${this.alt || nothing}
alt=${this.alt || ''}
jeripeierSBB marked this conversation as resolved.
Show resolved Hide resolved
@load=${this._imageLoaded}
class="image__img"
src=${this.imageSrc!}
Expand Down
6 changes: 6 additions & 0 deletions src/components/image/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,9 @@ The size can be set with `pictureSizesConfig`.
| `borderRadius` | `border-radius` | public | `'default' \| 'none' \| 'round'` | `'default'` | Border radius of the image. Choose between a default radius, no radius and a completely round image. |
| `aspectRatio` | `aspect-ratio` | public | `InterfaceImageAttributes['aspectRatio']` | `'16-9'` | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16' |
| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the fade animation from blurred to real image should be disabled. |

## CSS Properties

| Name | Default | Description |
| -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--sbb-image-aspect-ratio` | `auto` | When the aspectRatio property on the component is set to 'free', the CSS declaration of the aspect ratio is set to var(--sbb-image-aspect-ratio, auto). Since CSS variables find their way into the shadow DOM, we can use the --sbb-image-aspect-ratio variable to override the aspect ratio at will. This way we can have, for example, an image component with an aspect ratio of 4/3 in smaller viewports and 16/9 in larger viewports. |
Loading