Problem/Motivation

White corners are displaying on active tab.

Steps to reproduce

Create the tabs as standard.
Now choose the "Material Tab" style type and check check the tabs.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork quicktabs-3565852

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ravi kant created an issue. See original summary.

divyansh.gupta’s picture

Assigned: Unassigned » divyansh.gupta

Working on this issue.

akshay kashyap made their first commit to this issue’s fork.

akshay kashyap’s picture

StatusFileSize
new127.63 KB

I have create a MR could you please review it. i have attached the screenshot after MR now its working fine at my end

I am using drupal version 10.6.2-dev

akshay kashyap’s picture

Status: Active » Needs review
divyansh.gupta’s picture

Assigned: divyansh.gupta » Unassigned
Status: Needs review » Needs work

I noticed this change removes the focus outline entirely for the active tab. While this visually hides the white corner issue, it also removes the focus indicator altogether, which impacts keyboard navigation and accessibility.

The underlying issue seems to be the outline not respecting border-radius, which is why the corner artifacts appear. Instead of disabling focus styles, we should replace the outline with a custom focus style (e.g. using box-shadow) that matches the rounded tabs while keeping focus visible.
Also i was working on it as mentioned in the comment, Please make sure to follow drupal guidelines as you are an experienced contributor. And you have only pushed the changes but have not created a MR, so please create a MR after pushing the changes.
Thank you

akshay kashyap’s picture

@divyansh.gupta On Drupal.org, there are no policies that prevent another person from working on a bug task if it has already been assigned to someone else.
The "Assigned to" field indicates the person primarily responsible for managing that issue and driving it toward completion, but it does not grant exclusive access. Anyone is welcome to contribute to the task, submit patches, or comment on the issue.
Contribution on Drupal.org is collaborative and open to everyone; the assignment merely signifies ownership of the process, not the exclusive right to work on the code.
You can find more details in the official Drupal.org documentation https://www.drupal.org/docs/develop/issues/fields-and-other-parts-of-an-...

ravi kant’s picture

@akshay kashyap
According to accessibility, we should not remove outline.
so use try to solution with outline-offset: -1px; instead outline:0;

akshay kashyap’s picture

Status: Needs work » Needs review

@Ravi Kant
Using outline-offset: -1px will not resolve the issue, as it applies a border to all sides rather than addressing the specific requirement.

akshay kashyap’s picture

Status: Needs review » Needs work
akshay kashyap’s picture

Status: Needs work » Needs review

joelpittet made their first commit to this issue’s fork.

joelpittet’s picture

Status: Needs review » Needs work

Thank you for reporting this and for working on a fix. I was able to reproduce the visual issue with the Material Tabs style: the active/focused tab can show white square corners around the rounded tab.

I am not comfortable merging the current approach as-is because it removes the focus outline. That does hide the visual artifact, but it also removes the visible focus indicator for keyboard users, which is an accessibility regression.

I think the fix should preserve a visible focus state while avoiding the square-corner artifact.

akshay kashyap’s picture

Assigned: Unassigned » akshay kashyap
akshay kashyap’s picture

The current patch removes the focus outline, which resolves the visual artifact but introduces an accessibility regression because keyboard users no longer have a visible focus indicator.

Instead of removing the focus state, I recommend replacing the outline with a box-shadow based focus ring. Box-shadow respects border-radius and avoids the square corner artifact while maintaining WCAG-compliant focus visibility.

akshay kashyap’s picture

Status: Needs work » Needs review
joelpittet’s picture

Assigned: akshay kashyap » Unassigned
Status: Needs review » Fixed

That looks way better and the artifacts are gone! Thanks @akshay kashyap for persisting.

Side note on contributing: The 'Assigned' field can be useful, but as a maintainer it's more of a pain because it inadvertently blocks other contributors from helping, more often than not people (with good intentions) assign themselves then life takes them away from it, meanwhile people are expecting something from them and holding off helping as a result. Best practice (from my prospective as a old-school contrib mentor), comment that you are intending to work on it, and that should suffice.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.