Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-19996

Branches: Focus not clearly visible

XMLWordPrintable

      Issue Summary

      The keyboard focus is not clearly visible on "Test Project" bredcrum link.

      Steps to Reproduce

      1. Open the homepage.
      2. Go to projects link present in header section.
      3. Activate "PROJ" link.
      4. Now activate the "awesome-go" link.
      5. Select a "Branches" link from side navigation.
      6. Using keyboard, navigate to the mentioned link.
      7. Observe that focus is not clearly visible.

      Screenshot

      Actual Results

      Focus is not clearly visible for the "Test Project" link in the main content area. A clear focus indicator is not visually available as user tabs through these links using a keyboard.
      As a result, users with learning and mobility impairments as well as those with and low vision will not be able to easily find out which element currently has the focus.

      Expected Results

      Set the CSS outline property for the mentioned links to ensure that clear focus indication is available for users.

      Code Snippet

      :focus 
      { 
      outline-color: black solid; 
      outline-style: auto; 
      outline-width: 5px; 
      }
      

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Environment

      MacBook Pro (16-inch, 2021)
      macOS Sequoia Version 15.2 (24C101) 
      Chrome - Version 131.0.6778.266 (Official Build) (arm64)
      Firefox- Version 112.0.1 (64-bit)
      Safari- Version 18.2 (20620.1.16.11.8)
      JAWS- Version 2023
      NVDA- Version 2020.3

              Unassigned Unassigned
              c3f9a46dc7c4 Varsha Bansode (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated: