Set focus style for contenteditable elements

[MohamadSalman11]

Description

It's important to make sure contenteditable elements also have a focus style, just like other interactive elements. Some elements, like buttons, don’t get a focus style when they’re made contenteditable, which can hurt the user experience. Now, all contenteditable elements will behave the same way and get a focus style, just like other elements that can be focused. Since contenteditable acts like an input field, it makes sense to give it a focus style too.

Some Examples:

Button Component
Before:

After:

Card Component
Before:

After:

Motivation & Context

To improve consistency, ensuring that all contenteditable elements receive a focus style enhances the user experience across the site

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-41200--twbs-bootstrap.netlify.app/docs/5.3/components/card/#about
  To test the functionality, add the contenteditable attribute to the element you want to make editable, e.g., from the DevTools.