Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Bug with Media Header Button #7208

Closed
camdenvaughan opened this issue May 15, 2024 · 0 comments · Fixed by #7209
Closed

UI Bug with Media Header Button #7208

camdenvaughan opened this issue May 15, 2024 · 0 comments · Fixed by #7209
Labels
type: bug code to address defects in shipped code

Comments

@camdenvaughan
Copy link
Contributor

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

image

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

@camdenvaughan camdenvaughan added the type: bug code to address defects in shipped code label May 15, 2024
camdenvaughan added a commit to camdenvaughan/decap-cms that referenced this issue May 15, 2024
martinjagodic added a commit to camdenvaughan/decap-cms that referenced this issue Jun 26, 2024
martinjagodic added a commit that referenced this issue Jun 26, 2024
Co-authored-by: Martin Jagodic <jagodicmartin1@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug code to address defects in shipped code
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant