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

[mbleuer]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

There's no connected lyne-components issue.

Pull request checklist

• Docs have been reviewed and added / updated if needed (for bug fixes / features)

Changes

Changes in this pull request:

• Make sure that the alt attribute is always present on img elements, even if there is no alt text. Otherwise, supporting technologies may be tempted to interpret the image.
• If the aspectRatio value is set to free, the component sets the CSS declaration to aspect-ratio: var(--image-aspect-ratio, auto); instead of aspect-ratio: auto;. This would allow consumers to enter the value for the CSS variable --image-aspect-ratio from outside the component. This would make it possible to set a different aspect ratio from viewport to viewport. People tried to achieve that behaviour with a workaround by defining two separate image components as can be seen here: https://www.sbbinsurance.li/ (inspect the markup of the hero image). This little fix would allow a lot of additional flexibility without having to break any existing functionality.

Browsers

I tested the build on the following browsers:

• Firefox Desktop
• Chrome Desktop
• Edge Desktop
• Safari Desktop
• Chrome Mobile
• Safari Mobile

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

[jeripeierSBB]

Thanks for your contribution. I think, as mentioned, we should rename the variable with a breaking change.

[jeripeierSBB]

As we soon will release version 1.0, I think we should "sbb-"-prefix the very last not prefixed CSS var in the project :) this is causing a breaking change but it is ok for now. Furthermore, you could add a specific entry in the jsdoc section of the SbbImageElement class with "@cssprop":

@cssprop [--sbb-image-aspect-ratio=auto] - TBD...

With that it appears in readme.md and is therefore well documented and part of the public API.

see e.g. logo component for an example

[mbleuer]

Thanks for the hint, I have indeed overlooked the documentation by @cssprop. It's added now.

I also renamed the variable. Since it is freshly introduced, it should not cause any breaking change? Or are you referring to --image-border-radius?

[jeripeierSBB]

yes, I just realized it during re-review :D Probably I will create a follow-up PR for that. BTW, the image is, besides some minimal refactorings, still in the state you guys implemented it :)

[mbleuer]

Thanks for your contribution. I think, as mentioned, we should rename the variable with a breaking change.

Sure thing, thanks for the quick response! Please see the separate comment regarding the renaming/breaking change.

[jeripeierSBB]

LGTM, thank you