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.

Sign up for GitHub

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

Jump to bottom

[button]: Focus border are not showing around focused button controls #1538

Open
mscherotter opened this issue Oct 26, 2022 · 0 comments
Open

[button]: Focus border are not showing around focused button controls #1538

mscherotter opened this issue Oct 26, 2022 · 0 comments
Labels
bug Results from a bug in the CSS implementation triage Needs to be reproduced & prioritized

Comments

@mscherotter
Copy link

Description

The focus borders are not showing up around button controls.

Steps to reproduce

  <!DOCTYPE html>
  <html lang="en" class="spectrum spectrum--medium spectrum--light">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Spectrum test</title>
      <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
      <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
      <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
      <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
      <link rel="stylesheet" href="node_modules/@spectrum-css/actionbutton/dist/index-vars.css">    
      <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">    
      <link rel="stylesheet" href="node_modules/@spectrum-css/quickaction/dist/index-vars.css">
    </head>
  <body>
      <div class="spectrum">
        <h2>Button</h2>
        <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
          <span class="spectrum-Button-label">Button</span>
        </button>
        <h2>QuickAction</h2>
        <div class="spectrum-QuickActions-overlay" style="padding: 40px;">
  
          <div class="spectrum-QuickActions spectrum-QuickActions--textOnly is-open">
            <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
              <span class="spectrum-ActionButton-label">Edit</span>
            </button>
            <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
              <span class="spectrum-ActionButton-label">Copy</span>
            </button>
            <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
              <span class="spectrum-ActionButton-label">Delete</span>
            </button>
          </div>
        </div>
      </div>
  </body>
  </html>
  1. Tab through controls
  2. Observe that the focus border does not display around the focused control.

Expected behavior

Focus control should show around the focused control.

Environment

  • Chrome 106.0.5249.119 on Win 11 -->
@mscherotter mscherotter added the bug Results from a bug in the CSS implementation label Oct 26, 2022
@castastrophe castastrophe changed the title Focus border are not showing around focused button controls [button]: Focus border are not showing around focused button controls Mar 6, 2023
@castastrophe castastrophe added the triage Needs to be reproduced & prioritized label Mar 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Results from a bug in the CSS implementation triage Needs to be reproduced & prioritized
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mscherotter @castastrophe