Skip to content

Fix focus-visible outlines #7960

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

Open
DS123-ally wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Fix focus-visible outlines #7960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a121c6c
Fix focus-visible outlines
DS123-ally Aug 14, 2026
3abe7c5
Refine callout focus selectors
DS123-ally Aug 14, 2026
829c586
Merge branch 'master' into agent/fix-focus-visible-outlines
DS123-ally Aug 16, 2026
b0bfd6e
Merge branch 'master' into agent/fix-focus-visible-outlines
DS123-ally Aug 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/collections/handbook/faq/faq-wrapper.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const HandbookFaqWrapper = styled.div`
}

> div {
&:focus {
&:focus:not(:focus-visible) {
outline: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Features-carousel/FeaturesCarousel.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const FeaturesWrapper = styled.div`
/* nuka-carousel overrides */
& :global {
& .slider-frame,
& .slider-slide:focus {
& .slider-slide:focus:not(:focus-visible) {
outline: none !important;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Ripple-Effect-Animation/ripple-effect.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ button {
animation: ripple 1.5s linear infinite;
transform: scale(1.1);
}
&:focus {
&:focus:not(:focus-visible) {
outline: none;
}

Expand All @@ -72,4 +72,4 @@ button {
}
}
`;
export default RippleWrapper;
export default RippleWrapper;
2 changes: 1 addition & 1 deletion src/reusecore/Accordion/accordion.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const AccordionTitleWrapper = styled(AccordionItemHeading)`
}
}

&:focus {
&:focus:not(:focus-visible) {
outline: none;
}
* {
Expand Down
1 change: 0 additions & 1 deletion src/reusecore/Search/searchbox.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export const SearchWrapper = styled.div`

input{
border:none;
outline: none;

@Maanvi212006 Maanvi212006 Aug 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this follow the same &:focus:not(:focus-visible) pattern as the other files here? Right now it's just deleted, so the default outline will show on mouse click too, and stack with the box-shadow on input:focus below.

box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 9px 0px;

}
Expand Down
2 changes: 1 addition & 1 deletion src/sections/Adventures-Callout/discuss.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const AdventuresWrapper = styled.div`
margin-top: 1rem;
}
&:hover,
&:focus {
&:focus:not(:focus-visible) {
outline: none;
}
Comment thread
DS123-ally marked this conversation as resolved.
&:hover{
Expand Down
3 changes: 1 addition & 2 deletions src/sections/Blog/Blog-sidebar/blogSidebar.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,7 @@ const BlogSideBarWrapper = styled.div`
.logo{
width: 100%;
}
&:hover,
&:focus {
&:focus:not(:focus-visible) {
outline: none;
}
&:hover{
Expand Down
3 changes: 1 addition & 2 deletions src/sections/DeployServiceMesh/DeployServiceMesh.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@ const DeployServiceMeshWrapper = styled.div`
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;

@Maanvi212006 Maanvi212006 Aug 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to the searchbox.style.js change — outline: none was removed entirely from .slider instead of being scoped with :focus:not(:focus-visible). Since this is a custom-styled range input, the default outline will now appear on both mouse and keyboard interaction. Should this too follow the same :focus-visible pattern as the other files in this PR?

opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
Expand Down Expand Up @@ -327,4 +326,4 @@ const DeployServiceMeshWrapper = styled.div`
}
`;

export default DeployServiceMeshWrapper;
export default DeployServiceMeshWrapper;
5 changes: 2 additions & 3 deletions src/sections/Discuss-Callout/discuss.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,7 @@ const DiscussWrapper = styled.div`
margin-bottom: 0rem;
margin-top: 1rem;
}
&:hover,
&:focus {
&:focus:not(:focus-visible) {
outline: none;
}
&:hover{
Expand Down Expand Up @@ -182,4 +181,4 @@ const DiscussWrapper = styled.div`
}
`;

export default DiscussWrapper;
export default DiscussWrapper;
4 changes: 2 additions & 2 deletions src/sections/General/Faq/faqSection.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const FaqSectionWrapper = styled.section`
color: ${props => props.theme.white};
}
> div {
&:focus {
&:focus:not(:focus-visible) {
outline: none;
}
}
Expand Down Expand Up @@ -229,4 +229,4 @@ const FaqSectionWrapper = styled.section`
}
`;

export default FaqSectionWrapper;
export default FaqSectionWrapper;
1 change: 0 additions & 1 deletion src/sections/General/Navigation/navigation.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -778,7 +778,6 @@ const NavigationWrap = styled.header`
.toggle {
--size: 1.5rem;
appearance: none;
outline: none;

@Maanvi212006 Maanvi212006 Aug 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same pattern — outline: none removed entirely from .toggle

cursor: pointer;
width: var(--size);
height: var(--size);
Expand Down
1 change: 0 additions & 1 deletion src/sections/Home/So-Special-Section/so-special-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@ const SoSpecialWrapper = styled.div`
background-color:${(props) => props.theme.body};
color:black;
height: 30rem;
outline:none;

@Maanvi212006 Maanvi212006 Aug 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

outline: none removed from .special-cont_btn. Intentional?

@DS123-ally DS123-ally Aug 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removal is intentional. GlobalStyle already applies outline: none to *:focus:not(:focus-visible) and adds the themed 3px outline to *:focus-visible. Since GlobalStyle is mounted in Layout, adding the same rule locally would duplicate the behavior. Keyboard focus remains visible while non-keyboard focus does not show an outline.

border:none;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
Expand Down
1 change: 0 additions & 1 deletion src/sections/Learn/Workshop-grid/WorkshopsGrid.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export const WorkshopPageWrapper = styled.div`
border: none;
font-family: "Qanelas Soft", "Open Sans", sans-serif;
border-radius: 0.9375rem;
outline: none;
}

.left-icons {
Expand Down
2 changes: 0 additions & 2 deletions src/sections/Projects/Sistent/sistent.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -924,7 +924,6 @@ const SistentWrapper = styled.div`
border-radius: 4px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}

Expand Down Expand Up @@ -1024,4 +1023,3 @@ const SistentWrapper = styled.div`
export default SistentWrapper;



12 changes: 10 additions & 2 deletions src/sections/app.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,14 @@ const GlobalStyle = createGlobalStyle`
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*:focus {
*:focus:not(:focus-visible) {
outline: none;
}

*:focus-visible {
outline: 3px solid ${(props) => props.theme.secondaryColor};
outline-offset: 3px;
}
::-webkit-scrollbar {
width: 0.5rem;
}
Expand Down Expand Up @@ -207,14 +212,17 @@ section{
border: 1px solid rgb(204, 204, 204);
background: ${(props) => props.theme.body};
border-radius: 0.5rem;
outline: none;
padding: 20px;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 50rem;
max-height: 40rem;
overflow-y: hidden;

&:focus:not(:focus-visible) {
outline: none;
}

.close-modal-btn {
min-width: 2rem;
height: 2rem;
Expand Down