Header: Focus not visible

XMLWordPrintable

    Issue Summary

    The focus indicator is not visible for the list of options present when the tab is activated.

    Steps to Reproduce

    1. Navigate to the “Your Pull request” link present in the header region and activate it.
    2. A dialog will appear.
    3. Navigate to the mentioned list of options and Observe that the focus is not visible on the page.

    Screenshot 

    Actual Results

    When the user navigates inside the “Reviewing” and “Created” tabs,the focus indicator is not visible for the list of options present inside it. As a result of users with low vision, elderly users, keyboard-only users, and users with mobility impairments. will not be able to determine the current location of focus.

    Expected Results

    Make sure to provide a keyboard focus through CSS properties. Using border: property make sure to provide the size of border and colour of the border

    Note: Take a suggestion/approval from the content design team before implementing changes and make sure to keep a consistent focus throughout the product.

    Workaround

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

    Environment

    MacBook Pro (16-inch, 2019)
    macOs Ventura 13.5.1
    Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
    Firefox- Version 92.0 (64-bit)
    Safari- Version 16.4 (18615.1.26.110.1)
    JAWS- Version 2022
    NVDA- Version 2021.2
    Voiceover - Version Latest

      1. Screenshot 2023-09-27 at 5.29.23 PM.png
        717 kB
        Nayan Kamble
      2. Screenshot 2023-09-27 at 5.30.37 PM.png
        698 kB
        Nayan Kamble

            Assignee:
            Carlos Sanchez Rosa
            Reporter:
            Nayan Kamble (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: