Fix a11y audit 0-6: focus order for the copy button on code example

[louismaximepiton]

Related issues

#2667 0-6

Description

• Fix the focus order on code examples.
• Could probably be done in a better way on Bootstrap directly using CSS only. See Docs: Change example focus order twbs/bootstrap#40972.

Motivation & Context

Read the related issue. The focus was on the copy button before the code.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-2699--boosted.netlify.app/
• https://deploy-preview-2699--boosted.netlify.app/docsref

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	5591277
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/670d0c3ca318cd00082796da
😎 Deploy Preview	https://deploy-preview-2699--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hannahiss]

Great focus order thx!

[julien-deramond]

In https://deploy-preview-2699--boosted.netlify.app/docs/5.3/docsref/, only the first example is handled this way. It's not possible to modify the focus order for the other ones too?

[louismaximepiton]

I understand your point here, but the visual rendering is different between the examples and I think it could be hard to make the same focus order for each example you mention.

[louismaximepiton]

Changed the focus order for each example, tell me if you think it's not too weird to manipulate and in the code as well.

[julien-deramond]

The new focus order is great! I haven't particularly checked the modifications, as they are only for the documentation and are gathered in some specific recognizable files. Just added some Boosted mod comments for maintenance and sync with upstream project.