Add alt attribute to various images

[transplier]

Proposed change

Responding to issue #14178, figured I'd make this my first contribution to get a feel for the codebase.

• Add Alternate Text config option for Picture Card, Picture Entity, and picture card header/footer.
• Add blank alt attribute to purely decorative images.
• Add new translation strings and use them for the alt attribute on images which are not decorative.
• I did not hit all image tags, but this is most of them. For example, I did not modify the Google Cast stuff, as I lack the hardware to test this.

Type of change

• [ ] Dependency upgrade
• [x] Bugfix (non-breaking change which fixes an issue)
• [x] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [ ] Code quality improvements to existing code or addition of tests

Example configuration

# Example usage of alt_text property

cards:
  - type: picture
    image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
    tap_action:
      action: none
    hold_action:
      action: none
    alt_text: A person wearing a Home Assistant promotional t-shirt.
  - type: picture-entity
    show_state: true
    show_name: true
    camera_view: auto
    entity: weather.forecast_hamilton_dev_test
    image: https://demo.home-assistant.io/stub_config/bedroom.png
    name: Test Name
    alt_text: Some alt text
  - type: entities
    entities:
      - sensor.freebsd_router_kib_s_received
      - sensor.freebsd_router_kib_s_sent
      - sensor.freebsd_router_external_ip
    header:
      type: picture
      image: >-
        https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png
      tap_action:
        action: none
      hold_action:
        action: none
      alt_text: Balloons in a festive arrangement.
    footer:
      type: picture
      image: >-
        https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png
      tap_action:
        action: none
      hold_action:
        action: none
      alt_text: A line of balloons.

Additional information

• This PR fixes or closes issue: fixes #14178
• This PR is related to issue or discussion:
• Link to documentation pull request: https://github.com/home-assistant/home-assistant.io/pull/24990

Checklist

• [x] The code change is tested and works locally.
• [x] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [x] Documentation added/updated for www.home-assistant.io https://github.com/home-assistant/home-assistant.io/pull/24990

[home-assistant[bot]]

Hello @progman32,

When attempting to inspect the commits of your pull request for CLA signature status among all authors we encountered commit(s) which were not linked to a GitHub account, thus not allowing us to determine their status(es).

The commits that are missing a linked GitHub account are the following:

• f527c8c3451917ecbc7f56a8c27f344cbc812c8f - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• c4816f128018993372fee49b4afdcd2f16136c9f - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 017515179a6104dfb46ca8a09ebfd345ee54b3ae - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 096c241246912d22fe6305aec862f23775e526ac - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 8fe30b9a7345d92b2a7d66ed7364fa9e60fd4da7 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 3b16629076619dcbea72c861d23b7a3a94fb1412 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 1bae40f1a947068cddc6a90cda8b86220e551f94 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• cc1d7f8fb8feef98b9b35be248aefba466c72fd0 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 81da8949579893ab843f4b6f038d670819211916 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 175be84a01a60ffc29e07cf6f828edd6c5b60e2d - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 4cc72789d0560cad9e77d5107f9d4e18cc93a778 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• bec8b78a721b37111616b09475181f9accea5159 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 3527a0859f1199158128b4602af4492400f399a4 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

• 95cb501f55636dcae1bd703b2831f2deb3411d25 - This commit has something that looks like an email address ([email protected]). Maybe try linking that to GitHub?.

Unfortunately, we are unable to accept this pull request until this situation is corrected.

Here are your options:

1. If you had an email address set for the commit that simply wasn't linked to your GitHub account you can link that email now and it will retroactively apply to your commits. The simplest way to do this is to click the link to one of the above commits and look for a blue question mark in a blue circle in the top left. Hovering over that bubble will show you what email address you used. Clicking on that button will take you to your email address settings on GitHub. Just add the email address on that page and you're all set. GitHub has more information about this option in their help center.

2. If you didn't use an email address at all, it was an invalid email, or it's one you can't link to your GitHub, you will need to change the authorship information of the commit and your global Git settings so this doesn't happen again going forward. GitHub provides some great instructions on how to change your authorship information in their help center.

   • If you only made a single commit you should be able to run

     git commit --amend --author="Author Name <[email protected]>"
     

     (substituting "Author Name" and "[email protected]" for your actual information) to set the authorship information.
   • If you made more than one commit and the commit with the missing authorship information is not the most recent one you have two options:
     1. You can re-create all commits missing authorship information. This is going to be the easiest solution for developers that aren't extremely confident in their Git and command line skills.
     2. You can use this script that GitHub provides to rewrite history. Please note: this should be used only if you are very confident in your abilities and understand its impacts.
   • Whichever method you choose, I will come by to re-check the pull request once you push the fixes to this branch.

We apologize for this inconvenience, especially since it usually bites new contributors to Home Assistant. We hope you understand the need for us to protect ourselves and the great community we all have built legally. The best thing to come out of this is that you only need to fix this once and it benefits the entire Home Assistant and GitHub community.

Thanks, I look forward to checking this PR again soon! :heart:

[transplier]

I believe I have corrected the email issue found by the cla bot, hopefully it picks up the changes soon.

[home-assistant[bot]]

Hi progman32

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[steverep]

Awesome! This is indeed a great first contributor's issue. I'll try to review soon.

[transplier]

There might be something up with cla-bot? I did sign the CLA, and the tags seem to reflect this, but cla-error seems to be stuck on the pr. I've no opinion on whether this is wrong, just seems odd.

[transplier]

~I must admit I'm a little stuck on that last TypeScript error relating to hui-picture-entity-card-editor.ts's SCHEMA. If someone has the time to give me a hint, I'd very much appreciate it. I'm probably just missing the alt_text property somewhere?~

EDIT: Figured it out, it was a self-inflicted silly typo.

[steverep]

I would highly recommend setting up a devContainer with VS Code. Formatting and other issues are handled in a pre-commit hook and the extensions will give you all the errors from these checks before you commit.

[transplier]

I probably should, though I quite dislike VS Code. Sorry for the PR churn. My next one should be cleaner since I know what checks are done.

[steverep]

Even outside of vscode, the pre-commit hook should catch prettier issues.

[transplier]

Yes. Sorry, my previous at-work workflow just had everyone run lint etc in CI, and that bad habit followed me here. My bad.

[steverep]

No worries... just trying to save you time 😉

[steverep]

I've started reviewing and looks great so far. Give me a couple days.

[steverep]

@progman32 I'm finally done reviewing. Just some fairly minor changes needed.

[steverep]

Just wanted to check in... do you think you'll have time to make some changes soon? I don't want to see this work go to waste.

[transplier]

Just wanted to check in... do you think you'll have time to make some changes soon? I don't want to see this work go to waste.

Life got in the way, but I'm working on this again! Just finished setting up a dev env on my new portable setup and will start going through all the helpful comments.

[steverep]

Pushed this one across the finish line for you to get it in the next release. 😮‍💨

Just need to fix the doc PR.

[transplier]

Thanks. I didn't have much time to dedicate to this post holiday.

[steverep]

No problem. Happy new year!