Skip to content
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

Focus indicators consistent #4728

Merged
merged 13 commits into from
Dec 13, 2024
Merged

Focus indicators consistent #4728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
625d2f9
fix: show focus indicators only when containers are expanded
abdul99ahad Nov 20, 2024
bef2f5d
fix: tab action btn
abdul99ahad Nov 24, 2024
2111d31
fix: bottom panel focus
abdul99ahad Nov 25, 2024
fb484eb
fix: execution-info
abdul99ahad Nov 25, 2024
e0d85e3
fix: version-info-hyperlinks
abdul99ahad Nov 25, 2024
8fdb2d4
fix: bottom tab
abdul99ahad Nov 25, 2024
2d72dc6
fix: modeler-tabs
abdul99ahad Nov 26, 2024
770d66f
fix: focus-visible default
abdul99ahad Nov 26, 2024
691a781
fix: panel expand trigger focusable
abdul99ahad Dec 3, 2024
993040b
fix: watermark display
abdul99ahad Dec 3, 2024
3b74af3
deps: update to @bpmn-io/[email protected]
abdul99ahad Dec 9, 2024
9ae389e
deps: update to @bpmn-io/[email protected]
abdul99ahad Dec 9, 2024
21853a0
deps: update to [email protected]
abdul99ahad Dec 9, 2024
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
6 changes: 3 additions & 3 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
"@bpmn-io/dmn-migrate": "^0.5.0",
"@bpmn-io/extract-process-variables": "^1.0.0",
"@bpmn-io/form-js": "^1.12.0",
"@bpmn-io/properties-panel": "^3.25.0",
"@bpmn-io/properties-panel": "^3.25.1",
"@bpmn-io/replace-ids": "^0.2.0",
"@bpmn-io/variable-outline": "^1.0.3",
"@bpmn-io/variable-outline": "^1.0.4",
"@camunda/execution-platform": "^0.3.2",
"@camunda/form-linting": "^0.19.0",
"@camunda/form-playground": "^0.18.0",
Expand All @@ -33,7 +33,7 @@
"bpmn-js-properties-panel": "^5.28.0",
"bpmn-js-tracking": "^0.6.0",
"bpmn-moddle": "^9.0.1",
"camunda-bpmn-js": "^5.2.1",
"camunda-bpmn-js": "^5.2.2",
"camunda-bpmn-moddle": "^7.0.1",
"camunda-cmmn-moddle": "^1.0.0",
"camunda-dmn-js": "^3.0.0",
Expand Down
12 changes: 12 additions & 0 deletions client/src/app/panel/Panel.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
border: none;
outline: none;
padding: 4px 8px;

&:focus {
outline: 2px solid var(--focus-outline-color);
outline-offset: -2px;
}
}

.panel__link {
Expand All @@ -48,6 +53,7 @@
width: 28px;
height: 28px;
padding: 7px;
border-radius: 50%;

&:hover {
background-color: var(--color-grey-225-10-85);
Expand All @@ -73,6 +79,12 @@
bottom: 0;
left: 0;
overflow-y: auto;
margin: 1px;
}

&:focus-visible {
outline: none;
box-shadow: inset var(--focus-shadow);
}
}
}
5 changes: 3 additions & 2 deletions client/src/app/primitives/TabLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ function Tab(props) {

return (
<div
tabIndex="0"
ref={ tabRef }
data-tab-id={ tab.id }
title={ getTitleTag(tab, dirty) }
Expand Down Expand Up @@ -242,7 +243,7 @@ function TabClose(props) {
} = props;

return (
<span
<button
className="tab__close"
title="Close tab"
onClick={ (event) => {
Expand All @@ -253,7 +254,7 @@ function TabClose(props) {
} }
>
<TabCloseIcon className="tab__icon-close" />
</span>
</button>
);
}

Expand Down
8 changes: 7 additions & 1 deletion client/src/app/primitives/Tabbed.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@
border-right: 1px solid var(--tab-border-right-color);
user-select: none;

&:focus-visible {
outline: 2px solid var(--focus-outline-color);
outline-offset: -2px;
}

.tab__content {
position: absolute;
display: flex;
Expand Down Expand Up @@ -128,11 +133,12 @@
line-height: 26px;
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background-color: var(--tab-close-background-color);

.tab__icon-close {
margin: auto 0 auto -1px;
margin: auto 0 1px -1px;
fill: var(--tab-close-icon-fill-color);
}

Expand Down
10 changes: 7 additions & 3 deletions client/src/app/resizable-container/ResizableContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,11 @@ export default function ResizableContainer(props) {
ref={ ref }
style={ getCSSFromProps(props) }
>
<div className="children">{props.children}</div>
<div
className={ classNames(
{ 'no-display': !open },
'children',
) }>{props.children}</div>
<Resizer direction={ direction } onMouseDown={ onMouseDown } />
</div>
);
Expand All @@ -178,8 +182,8 @@ function Resizer(props) {
>
{
isHorizontal(direction)
? <HandleBarX className="handlebar" />
: <HandleBarY className="handlebar" />
? <HandleBarX tabIndex="0" className="handlebar" />
: <HandleBarY tabIndex="0" className="handlebar" />
}
<div className="resizer-border"></div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions client/src/app/resizable-container/ResizableContainer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,8 @@
&.open .handlebar {
display: none;
}

.no-display {
display: none;
}
}
5 changes: 4 additions & 1 deletion client/src/app/status-bar/StatusBar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,10 @@
&:focus {
outline: none;
box-shadow: none;
background-color: var(--status-bar-focus-background-color);
}

&:focus-visible {
box-shadow: inset var(--focus-shadow);
}
}

Expand Down
5 changes: 2 additions & 3 deletions client/src/app/tab-actions/TabActions.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,8 @@
}
}

&:focus {
outline: none;
box-shadow: none;
&:focus-visible {
outline-color: var(--focus-outline-color);
}
}
}
7 changes: 6 additions & 1 deletion client/src/shared/ui/Section.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

.section__body:not(:first-child) {
padding-top: 0px;
padding-top: 1px;
}

.section__header {
Expand Down Expand Up @@ -40,6 +40,11 @@

.section__actions .btn {
margin-top: 8px;
margin-bottom: 5px;
}

.section__actions .btn:focus {
outline-offset: 5px;
}

& + :local(.Section) {
Expand Down
4 changes: 4 additions & 0 deletions client/src/styles/_base.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ body {
outline-color: var(--focus-outline-color);
}

:focus-visible {
outline: 2px solid var(--focus-outline-color);
}

.djs-container svg:focus {
outline: none;
}
Expand Down
52 changes: 26 additions & 26 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 0 additions & 4 deletions resources/plugins/test/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.bjs-powered-by {
display: block !important;
Copy link
Member

Choose a reason for hiding this comment

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

Why this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The bpmn.io watermark was removed in this commit. However, this block forces the watermark to remain visible in the modeler and allows it to gain focus when navigating via keyboard tabbing.
Screenshot 2024-12-09 at 14 52 51

Copy link
Member

Choose a reason for hiding this comment

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

Yea. I assume this is a test plug-in specific override, isn't it? Happy to remove it, just flagging that one of the purposes of this plug-in is to override the core styles, bringing back the logo.

}

.bjs-powered-by > svg {
display: none;
}
Expand Down
Loading