diff --git a/gradle/changelog/tooltip-a11y.yaml b/gradle/changelog/tooltip-a11y.yaml new file mode 100644 index 0000000000..194519b057 --- /dev/null +++ b/gradle/changelog/tooltip-a11y.yaml @@ -0,0 +1,2 @@ +- type: changed + description: improve tooltip accessibility ([#1954](https://github.com/scm-manager/scm-manager/pull/1954)) diff --git a/scm-ui/ui-components/src/Help.tsx b/scm-ui/ui-components/src/Help.tsx index e2808b8cbb..061e233460 100644 --- a/scm-ui/ui-components/src/Help.tsx +++ b/scm-ui/ui-components/src/Help.tsx @@ -40,16 +40,17 @@ const AbsolutePositionTooltip = styled(Tooltip)` const Help: FC = ({ message, multiline, className, id }) => ( ); Help.defaultProps = { - multiline: true, + multiline: true }; export default Help; diff --git a/scm-ui/ui-components/src/Tooltip.stories.tsx b/scm-ui/ui-components/src/Tooltip.stories.tsx index 198a3419fe..fe4f79b62e 100644 --- a/scm-ui/ui-components/src/Tooltip.stories.tsx +++ b/scm-ui/ui-components/src/Tooltip.stories.tsx @@ -94,4 +94,15 @@ storiesOf("Tooltip", module) ))} + )) + .add("Styled", () => ( + + {positions.map((position) => ( + + + - +
- - +
@@ -24681,10 +24840,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
- - +
- - +
@@ -25304,10 +25465,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
- - +
- - +
@@ -26264,10 +26427,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
- - +
- - +
@@ -26795,10 +26960,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
- - +
- - +
@@ -27326,10 +27493,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
- - +
- - +
@@ -28547,10 +28716,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
- - +
- - +
@@ -29128,10 +29299,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
- - +
- - +
- - +
- - +
@@ -29252,10 +29427,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
- - +
- - +
- - +
- - +
@@ -29376,10 +29555,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
- - +
- - +
- - +
- - +
@@ -29500,10 +29683,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
- - +
- - +
- - +
- - +
@@ -29624,10 +29811,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
- - +
- - +
- - +
- - +
@@ -29748,10 +29939,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
- - +
- - +
- - +
- - +
@@ -29881,10 +30076,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
- - +
- - +
@@ -29961,10 +30158,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
- - +
- - +
@@ -30824,10 +31023,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
- - +
- - +
@@ -31283,10 +31484,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
- - +
- - +
@@ -31742,10 +31945,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
- - +
- - +
@@ -31822,10 +32027,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
- - +
- - +
@@ -31911,10 +32118,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
- - +
- - +
@@ -32497,10 +32706,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
- - +
- - +
@@ -33360,10 +33571,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
- - +
- - +
@@ -33819,10 +34032,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
- - +
- - +
@@ -34278,10 +34493,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
- - +
- - +
@@ -35344,10 +35561,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
- - +
- - +
@@ -35887,10 +36106,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
- - +
- - +
@@ -36510,10 +36731,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
- - +
- - +
@@ -37470,10 +37693,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
- - +
- - +
@@ -38001,10 +38226,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
- - +
- - +
@@ -38532,10 +38759,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
- - +
- - +
@@ -39753,10 +39982,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
- - +
- - +
@@ -40333,10 +40564,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
- - +
- - +
@@ -40956,10 +41189,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
- - +
- - +
@@ -41916,10 +42151,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
- - +
- - +
@@ -42447,10 +42684,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
- - +
- - +
@@ -42978,10 +43217,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
- - +
- - +
@@ -44199,10 +44440,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
- - +
- - +
@@ -44779,10 +45022,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
- - +
- - +
@@ -45369,10 +45614,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
- - +
- - +
@@ -46236,10 +46483,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
- - +
- - +
@@ -46699,10 +46948,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
- - +
- - +
@@ -47162,10 +47413,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
- - +
- - +
@@ -48232,10 +48485,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
- - +
- - +
@@ -48779,10 +49034,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
- - +
- - +
- - +
@@ -49384,10 +49642,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
- - +
- - +
- - +
@@ -50266,10 +50527,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
- - +
- - +
- - +
@@ -50744,10 +51008,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
- - +
- - +
- - +
@@ -51222,10 +51489,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
- - +
- - +
- - +
@@ -52307,10 +52577,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
- - +
- - +
- - +
@@ -52869,10 +53142,11 @@ exports[`Storyshots Repositories/Diff Hunks 1`] = `
- - +
- - +
@@ -53719,10 +53994,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
- - +
- - +
@@ -54317,10 +54594,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
- - +
- - +
@@ -55192,10 +55471,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
- - +
- - +
@@ -55651,10 +55932,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
- - +
- - +
@@ -56110,10 +56393,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
- - +
- - +
@@ -57176,10 +57461,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
- - +
- - +
@@ -57731,10 +58018,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
- - +
- - +
@@ -58357,10 +58646,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
- - +
- - +
@@ -59282,10 +59573,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
- - +
- - +
@@ -59771,10 +60064,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
- - +
- - +
@@ -60260,10 +60555,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
- - +
- - +
@@ -61402,10 +61699,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
- - +
- - +
@@ -61981,10 +62280,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
- - +
- - +
@@ -62660,10 +62961,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
- - +
- - +
@@ -63613,10 +63916,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
- - +
- - +
@@ -64124,10 +64429,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
- - +
- - +
@@ -64635,10 +64942,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
- - +
- - +
@@ -65870,10 +66179,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
- - +
- - +
@@ -66486,10 +66797,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = `
- - +
- - +
@@ -66854,10 +67167,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
- - +
- - +
@@ -67440,10 +67755,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
- - +
- - +
@@ -68303,10 +68620,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
- - +
- - +
@@ -68762,10 +69081,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
- - +
- - +
@@ -69221,10 +69542,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
- - +
- - +
@@ -70287,10 +70610,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
- - +
- - +
@@ -70830,10 +71155,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
- - +
- - +
@@ -71453,10 +71780,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
- - +
- - +
@@ -72413,10 +72742,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
- - +
- - +
@@ -72944,10 +73275,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
- - +
- - +
@@ -73475,10 +73808,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
- - +
- - +
@@ -74696,10 +75031,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
- - +
- - +
@@ -75283,17 +75620,18 @@ exports[`Storyshots Repositories/RepositoryEntry Archived 1`] = `
- repository.archived - +
@@ -75734,17 +76072,18 @@ exports[`Storyshots Repositories/RepositoryEntry Exporting 1`] = `
- repository.exporting - +
@@ -75855,10 +76194,11 @@ exports[`Storyshots Repositories/RepositoryEntry HealthCheck Failure 1`] = `
- repository.healthCheckFailure - +
@@ -75977,28 +76317,30 @@ exports[`Storyshots Repositories/RepositoryEntry MultiRepositoryTags 1`] = `
- repository.archived - - +
repository.exporting - +
@@ -76109,10 +76451,11 @@ exports[`Storyshots Repositories/RepositoryEntry RepositoryFlag EP 1`] = `
- repository.healthCheckFailure - +
@@ -76707,10 +77050,11 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = ` className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc" id="line-1" > - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - + + + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
`; diff --git a/scm-ui/ui-styles/package.json b/scm-ui/ui-styles/package.json index b58f95e0eb..560bd85a0a 100644 --- a/scm-ui/ui-styles/package.json +++ b/scm-ui/ui-styles/package.json @@ -12,7 +12,6 @@ "@fortawesome/fontawesome-free": "^5.11.2", "bulma": "^0.9.3", "bulma-popover": "^1.0.0", - "bulma-tooltip": "^3.0.0", "react-diff-view": "^2.4.1" }, "devDependencies": { diff --git a/scm-ui/ui-styles/src/components/_tooltip.scss b/scm-ui/ui-styles/src/components/_tooltip.scss new file mode 100644 index 0000000000..d327860f03 --- /dev/null +++ b/scm-ui/ui-styles/src/components/_tooltip.scss @@ -0,0 +1,39 @@ +/* + * MIT License + * + * Copyright (c) 2020-present Cloudogu GmbH and Contributors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.tooltip-arrow-top-border-color { + border-color: $grey-dark transparent transparent transparent; +} + +.tooltip-arrow-right-border-color { + border-color: transparent $grey-dark transparent transparent; +} + +.tooltip-arrow-bottom-border-color { + border-color: transparent transparent $grey-dark transparent; +} + +.tooltip-arrow-left-border-color { + border-color: transparent transparent transparent $grey-dark; +} diff --git a/scm-ui/ui-styles/src/utils/_post.scss b/scm-ui/ui-styles/src/utils/_post.scss index 4883d65ccd..098d2eeeec 100644 --- a/scm-ui/ui-styles/src/utils/_post.scss +++ b/scm-ui/ui-styles/src/utils/_post.scss @@ -23,6 +23,6 @@ */ @import "bulma/bulma"; @import "../variables/_derived.scss"; -@import "bulma-tooltip/dist/css/bulma-tooltip.min"; @import "bulma-popover/css/bulma-popover"; @import "../components/_main.scss"; +@import "../components/_tooltip.scss"; diff --git a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx index 0742858408..e2148bbf19 100644 --- a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx +++ b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx @@ -49,6 +49,7 @@ const Behind = styled.span``; const Count = styled.span` word-break: keep-all; + width: max-content; `; const Bar = styled.span.attrs(props => ({ @@ -65,7 +66,6 @@ const Bar = styled.span.attrs(props => ({ const TooltipWithDefaultCursor = styled(Tooltip)` cursor: default !important; - width: 100%; `; const AheadBehindTag: FC = ({ branch, details, hiddenMobile, verbose }) => { @@ -87,28 +87,33 @@ const AheadBehindTag: FC = ({ branch, details, hiddenMobile, verbose }) = : details.changesetsAhead; return ( -
+
- - {behindText} - - - - {aheadText} - - +
+ + {behindText} + + + + {aheadText} + + +
); diff --git a/yarn.lock b/yarn.lock index 97acfdef8c..46a893c3b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6638,11 +6638,6 @@ bulma-popover@^1.0.0: resolved "https://registry.yarnpkg.com/bulma-popover/-/bulma-popover-1.0.3.tgz#bc948b7b855bedbe8adf20737fc569ac87623a91" integrity sha512-/StxOsgTvxrK1OIVrzUk7w4+Lyg9VvXDeh/wj9HhsYoCkqLqRi+EYm9htX6FP0GvscwlPradkgZG6bb997oBBA== -bulma-tooltip@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/bulma-tooltip/-/bulma-tooltip-3.0.2.tgz#2cf0abab1de2eba07f9d84eb7f07a8a88819ea92" - integrity sha512-CsT3APjhlZScskFg38n8HYL8oYNUHQtcu4sz6ERarxkUpBRbk9v0h/5KAvXeKapVSn2dp9l7bOGit5SECP8EWQ== - bulma@^0.9.3: version "0.9.3" resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"