2025 - Images tabbable .image-auto

[davidcarlsonberg]

Explain the details for making this change. What existing problem does the pull request solve?
This provides a solution for the desire to have a focus-state on an image where the width and height are not defined by the CSS. Creates a class .image-auto for this purpose and places it in the example page for demonstration purposes.
History here: #2025 (comment)

Related github/jira issue (required):
Close #2025 .

Steps necessary to review your pull request (required):

• Pull branch, run app
• Visit http://localhost:4000/components/images/example-index.html
  • Ensure .image-auto is focusable.

Included in this Pull Request:
- [ ] An e2e or functional test for the bug or feature.

• A note to the change log.

[tmcconechy]

@pwpatton wanted it so that the class was on the image instead ..

<div class="image-auto">
              <img src="http://placehold.it/300x350/999999/FFFFFF" alt="image-auto 300x350" tabindex="0">
            </div>

vs

<img class="image-auto" src="http://placehold.it/300x350/999999/FFFFFF" alt="image-auto 300x350" tabindex="0">

My suggestion around that is to change the css so both work and change the example page to show it on the image. Im not sure why we did it like that originally.

Also i guess we can remove image-auto placeholder as thats not going to work without a height since its just the icon and missing the white