Improve test image results

[FlyersPh9]

All test images should be reviewed with the goal of:

• Tests should target a <section> or a component directly via ID name, excluding the page titles, <hr>s, & theme switcher button.
• <section> should be scoped. Some places this may make sense (table sizes), other places it might not (badges). Use your best judgement.
• If possible, test for :hover & :focus within the same test image.
• Set viewports: [{ width: 800, height: 600 }] to keep images narrow when possible. These are good default values, but feel free to adjust as needed.

Components to review

• alert
• anchor: Nothing to change
• avatar
• badge
• blockquote
• breadcrumbs
• button
• carousel
• checkbox
• code
• color-picker
• color
• column-filter
• date-picker
• dialog
• expandable-block
• fieldset
• file-upload
• footer
• header
• iModel-loader
• icon
• information-panel
• input
• keyboard
• location-marker
• menu
• non-ideal-state
• progress-indicator
• radio-tile
• radio
• select
• side-navigation
• skip-to-content
• slider
• stepper
• surface
• table
• tabs
• tag
• textarea
• tile
• time-picker
• toast
• toggle-switch
• tooltip
• tree
• typography
• workflow-diagram

[FlyersPh9]

If all tests are wrapped consistently via <section>, we might be able to apply padding to them so our test images aren't cropped right to the edge of the component. This would be useful for confirming things like drop shadow are displaying correctly.

[FlyersPh9]

I would like to reduce non-component HTML as well. Meaning replace <br /> with gap applied on the <section> wrapping the components.

[gretanausedaite]

Tile focus screenshots does not include focus style (images are cropped too tight)