Describe How to Reproduce the Bug

Oct 13, 2025 by thesweetdesigns.com 45 views

Describe the Bug

The bug is related to the missing focus indicator on tab-navigation in a page. When navigating through the tabs using the keyboard, the focus indicator is not visible, making it difficult for users to determine which tab is currently active.

Describe How to Reproduce the Bug

To reproduce the bug, follow these steps:

Open the page with the tab-navigation component.
Use the keyboard to navigate through the tabs by pressing the Tab key.
Observe that the focus indicator is not visible on the currently active tab.
Verify that the bug is reproducible by checking the focus indicator on different browsers and devices.

Which Kirby Version Was Used?

The bug was encountered in version 1.1.10 of the Kirby design system.

What Was the Expected Behavior?

The expected behavior is that the focus indicator should be visible on the currently active tab when navigating through the tabs using the keyboard.

Add Any Screenshots

[Insert screenshot of the tab-navigation component with the missing focus indicator]

Please Complete the Following Information:

OS: Windows 10
Browser: Google Chrome
Browser Version: 96.0.4664.45

Are There Any Additional Context?

The bug was encountered on a page with a complex layout and multiple tab-navigation components. The issue was not reproducible on a simple page with a single tab-navigation component.

Checklist:

The following tasks should be carried out in sequence to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behavior, it should be verified by a member of the team Kirby before moving on to implementation.

[ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

[ ] Make sure you have read: "Before you get coding".
[ ] Signal to others you are working on the issue by assigning yourself.
[ ] Create a branch from the develop branch following our branch naming convention.
[ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
[ ] Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

[ ] Do a self-review.
[ ] Create a pull-request.

Why is the Focus Indicator Important?

The focus indicator is an essential element in user interface design, as it helps users understand which element is currently active and receives keyboard focus. Without a visible focus indicator, users may struggle to navigate through the page, leading to frustration and decreased productivity.

How to Fix the Bug

To fix the bug, the contributor should:

Review the existing code for the tab-navigation component.
Identify the issue causing the missing focus indicator.
Write code to fix the issue and make the focus indicator visible.
Create a test to reproduce the bug and verify the fix.
Submit a pull-request for review.

Best Practices for Implementing the Fix

When implementing the fix, the contributor should follow best practices for contributing to the Kirby design system, including:

Reading the contributing guidelines and documentation.
Creating a branch from the develop branch and following the branch naming convention.
Writing code that is readable, maintainable, and follows the design system's coding standards.
Creating a test that reproduces the bug and verifies the fix.
Submitting a pull-request for review and following the review process.

Q: What is the missing focus indicator bug?

A: The missing focus indicator bug is a issue where the focus indicator is not visible on the currently active tab when navigating through the tabs using the keyboard.

Q: Why is the focus indicator important?

A: The focus indicator is an essential element in user interface design, as it helps users understand which element is currently active and receives keyboard focus. Without a visible focus indicator, users may struggle to navigate through the page, leading to frustration and decreased productivity.

Q: How to reproduce the bug?

A: To reproduce the bug, follow these steps:

Open the page with the tab-navigation component.
Use the keyboard to navigate through the tabs by pressing the Tab key.
Observe that the focus indicator is not visible on the currently active tab.
Verify that the bug is reproducible by checking the focus indicator on different browsers and devices.

Q: Which Kirby version was used?

A: The bug was encountered in version 1.1.10 of the Kirby design system.

Q: What was the expected behavior?

A: The expected behavior is that the focus indicator should be visible on the currently active tab when navigating through the tabs using the keyboard.

Q: How to fix the bug?

A: To fix the bug, the contributor should:

Review the existing code for the tab-navigation component.
Identify the issue causing the missing focus indicator.
Write code to fix the issue and make the focus indicator visible.
Create a test to reproduce the bug and verify the fix.
Submit a pull-request for review.

Q: What are the best practices for implementing the fix?

A: When implementing the fix, the contributor should follow best practices for contributing to the Kirby design system, including:

Reading the contributing guidelines and documentation.
Creating a branch from the develop branch and following the branch naming convention.
Writing code that is readable, maintainable, and follows the design system's coding standards.
Creating a test that reproduces the bug and verifies the fix.
Submitting a pull-request for review and following the review process.

Q: What is the role of the team Kirby in verifying the bug?

A: The team Kirby is responsible for verifying the bug to ensure that it is not intended behavior. Once the bug is verified, the contributor can proceed with implementing the fix.

Q: What is the process for implementing the fix?

A: The process for implementing the fix involves the following steps:

Verification: The team Kirby verifies the bug to ensure that it is not intended behavior.
Implementation: The contributor implements the fix by writing code to make the focus indicator visible.
Review: The contributor submits a pull-request for review and follows the review process.

Q: What is the importance of testing in the implementation process?

A: Testing is crucial in the implementation process to ensure that the fix works as expected and does not introduce any new bugs. The contributor should create a test to reproduce the bug and verify the fix before submitting a pull-request for review.