UI Bug with Media Header Button

[camdenvaughan]

Describe the bug

After Clicking the "Media" Header link and closing the Media library, the button remains in a colored focus state until anything else on the page is interacted with, it then loses that focus tag and goes back to normal. I have fixed the problem and will follow this bug report with a pull request.

To Reproduce

1. Open any Decap Dashboard (This works on the interactive Demo)
2. Click the "Media" Header Link
3. Click the top left "X" to close the media library
4. Observe that both the "Content" link and "Media" link are blue
5. Click anywhere and the "Media" link will return to normal.

Expected behavior

The "Media" link remains gray after interaction.

Screenshots

Applicable Versions:

• Decap CMS version: 3.1.10
• Git provider: Github
• OS: Windows 11
• Browser version: Chrome Chrome 124.0.6367.119

CMS configuration

backend:
name: test-repo

site_url: https://example.com

publish_mode: editorial_workflow
media_folder: assets/uploads

collections: # A list of collections the CMS should be able to edit

• name: 'posts' # Used in routes, ie.: /admin/collections/:slug/edit
  label: 'Posts' # Used in the UI
  label_singular: 'Post' # Used in the UI, ie: "New Post"
  description: >
  The description is a great place for tone setting, high level information, and editing
  guidelines that are specific to a collection.
  folder: '_posts'
  slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
  summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
  create: true # Allow users to create new documents in this collection
  view_filters:

  • label: Posts With Index
    field: title
    pattern: 'This is post #'

  • label: Posts Without Index
    field: title
    pattern: front matter post

  • label: Drafts
    field: draft
    pattern: true
    view_groups:

  • label: Year
    field: date
    pattern: \d{4}

  • label: Drafts
    field: draft
    fields: # The fields each document in this collection have

  • { label: 'Title', name: 'title', widget: 'string', tagname: 'h1' }

  • { label: 'Draft', name: 'draft', widget: 'boolean', default: false }

  • {
    label: 'Publish Date',
    name: 'date',
    widget: 'datetime',
    date_format: 'YYYY-MM-DD',
    time_format: 'HH:mm',
    format: 'YYYY-MM-DD HH:mm',
    }

  • label: 'Cover Image'
    name: 'image'
    widget: 'image'
    required: false
    tagname: ''

  • { label: 'Body', name: 'body', widget: 'markdown', hint: 'Main content goes here.' }

Additional context

The AppHeaderButton style needs to be changed to use :focus-visible instead of :focus