fix: ModalDialog, PosterImage :focus styles

[acmertz]

Fixes #7112

Description

Fixes a styling issue that occurred after #6871 where the background styles would be removed from ModalDialog and PosterImage components when they received focus due to a click.

Specific Changes proposed

Use :not([tabindex="-1"]) to prevent the global styles for mouse/keyboard focus on a control from applying to ModalDialog and PosterImage components' backgrounds.

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chrome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[gkatsev]

Thanks for the PR. While it does fix the issue it also brings back the outline which we don't want to happen. Looking into it, it seems like it's because we set background: none for these as part of #5558.
I think we potentially want to make the change in #5888 to be more specific and not unset background in all cases.

[acmertz]

@gkatsev No problem. I've updated the PR - have a look and let me know if that's better.

[gkatsev]

Thanks, this is great. Targeting it specifically is helpful. I verified it, took me a second to figure out what #5888 was trying to fix.

[misteroneill]

Nice, thanks!