PRO-6735: Rich text styles toolbar focused state (#4804)

CHANGELOG.md

@@ -11,6 +11,7 @@
 * Fixes a false positive warning for module not in use for project level submodules (e.g. `widges/module.js`) and dot-folders (e.g. `.DS_Store`).
 * Bumped `express-bearer-token` dependency to address a low-severity `npm audit` warning regarding noncompliant cookie names and values. Apostrophe
 did not actually use any noncompliant cookie names or values, so there was no vulnerability in Apostrophe.
+* Rich text "Styles" toolbar now has visually focused state.
 
 ### Adds
 

modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapStyles.vue

@@ -177,6 +177,7 @@ export default {
     border-radius: var(--a-border-radius);
     transition: all 500ms ease;
 
+    &:focus-within,
     &:hover {
       color: var(--a-text-primary);
       background-color: var(--a-base-9);

modules/@apostrophecms/rich-text-widget/views/widget.html

@@ -3,6 +3,6 @@
 {% elif data.manager.options.className %}
   {% set className = data.manager.options.className %}
 {% endif %}
-<div data-rich-text{% if className %} class="{{ className }}" {% endif %}>
+<div data-rich-text{% if className %} class="{{ className }}"{% endif %}>
   {{ data.widget.content | safe }}
 </div>