fix(theme-classic): add outline to focused code blocks

[christopherklint97]

Motivation

Fixes #6077

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

Run yarn start:website and go to http://localhost:3000/docs/next/installation#scaffold-project-website. When focusing on the code block, it should like below:

Firefox

Chrome

[netlify]

✔️ [V2]
Built without sensitive environment variables

🔨 Explore the source changes: 267caa1

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61bcdc1ce73b010007bf0b9f

😎 Browse the preview: https://deploy-preview-6121--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	85
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-6121--docusaurus-2.netlify.app/

[Josh-Cena]

The original issue was reproducible on Firefox where pre tags aren't highlighted when focused. Leaving to @slorber to test since he uses FF

[slorber]

I can confirm outline on FF works better now.

Comparing:

• https://docusaurus.io/docs/markdown-features/code-blocks (bad
• https://deploy-preview-6121--docusaurus-2.netlify.app/docs/markdown-features/code-blocks/ (good)

I can't see any issue so far, not sure why I added this overflow hidden anymore 🤷‍♂️

[slorber]

apparently I added this in #5215, don't remember why 😅 hope it's safe to remove

[Josh-Cena]

I realized what overflow: hidden does... Because if we set border radius on the parent container but child is still a regular rectangle, the child overflows and makes the code block still appear as a sharp-edged rectangle. The reason that the highlight doesn't appear on FF is also because they treat the highlight as part of overflow and gets hidden

[slorber]

Ah yes, I remember that was related to border-radius now 😅 it was simpler to add radiuses on the container than on the individual items, particularly when the live codeblock playground/result positions are configurable

[Josh-Cena]

Current production:

Deploy preview:

Even on Chrome there's an improvement 👀