From a4e30b94a29dc726e508ccf9e76866714b64006a Mon Sep 17 00:00:00 2001 From: Philipp Ahrendt Date: Thu, 9 Jan 2025 11:35:12 +0100 Subject: [PATCH] Accessible hunk expander MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: René Pfeuffer --- .../src/__snapshots__/storyshots.test.ts.snap | 2058 ++++++++++------- .../src/repos/HunkExpandDivider.tsx | 3 + .../src/repos/HunkExpandLink.tsx | 12 +- .../src/repos/diff/HunkFooter.tsx | 6 +- .../src/repos/diff/HunkHeader.tsx | 9 +- .../src/repos/diff/LastHunkFooter.tsx | 4 +- scm-ui/ui-styles/src/components/_main.scss | 7 + scm-ui/ui-styles/src/highcontrast.scss | 7 + 8 files changed, 1277 insertions(+), 829 deletions(-) diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 8396295625..aed5f205e5 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -23699,29 +23699,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -23845,18 +23853,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -24047,18 +24059,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -24072,18 +24088,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -24671,29 +24691,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -24817,29 +24845,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -25214,29 +25250,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -25360,29 +25404,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -25757,29 +25809,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -25903,18 +25963,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -26422,29 +26486,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -26458,29 +26530,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -26694,18 +26774,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -26719,18 +26803,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -26990,29 +27078,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -27573,29 +27669,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -31178,29 +31282,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -31324,18 +31436,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -31526,18 +31642,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -31551,18 +31671,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -32150,29 +32274,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -32296,29 +32428,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -32693,29 +32833,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -32839,29 +32987,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -33236,29 +33392,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -33382,18 +33546,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -33901,29 +34069,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -33937,29 +34113,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -34173,18 +34357,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -34198,18 +34386,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -34469,29 +34661,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -35052,29 +35252,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -35696,29 +35904,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -35842,18 +36058,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -36044,18 +36264,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -36069,18 +36293,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -36668,29 +36896,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -36814,29 +37050,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -37211,29 +37455,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -37357,29 +37609,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -37754,29 +38014,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -37900,18 +38168,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -38419,29 +38691,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -38455,29 +38735,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -38691,18 +38979,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -38716,18 +39008,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -38987,29 +39283,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -39570,29 +39874,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -63714,18 +64026,22 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -63939,29 +64255,37 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -72679,29 +73003,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -72825,18 +73157,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -73027,18 +73363,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -73052,18 +73392,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -73651,29 +73995,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -73797,29 +74149,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -74194,29 +74554,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -74340,29 +74708,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -74737,29 +75113,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -74883,18 +75267,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -75402,29 +75790,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -75438,29 +75834,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandByLines - + - - - + diff.expandComplete - +
@@ -75674,18 +76078,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -75699,18 +76107,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandComplete - +
@@ -75970,29 +76382,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
@@ -76553,29 +76973,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = ` colSpan={3} >
- - - + diff.expandLastBottomByLines - + - - - + diff.expandLastBottomComplete - +
diff --git a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx index 212f7d06d1..eda7e2ec8f 100644 --- a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx +++ b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx @@ -21,6 +21,9 @@ import styled from "styled-components"; const HunkDivider = styled.div` background: #98d8f3; + @media screen and (max-width: 768px) { + padding-left: 0px !important; + } ; `; const HunkExpandDivider: FC = ({ children }) => { diff --git a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx index 9270723fed..1d0849d445 100644 --- a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx +++ b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx @@ -16,7 +16,7 @@ import React, { FC, useState } from "react"; import { useTranslation } from "react-i18next"; -import classNames from "classnames"; +import { Icon } from "@scm-manager/ui-core"; type Props = { icon: string; @@ -37,9 +37,13 @@ const HunkExpandLink: FC = ({ icon, text, onClick }) => { }; return ( - - {loading ? t("diff.expanding") : text} - + ); }; diff --git a/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx b/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx index 83196165d8..2c8de2d7d6 100644 --- a/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx +++ b/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx @@ -37,7 +37,7 @@ const HunkFooter: FC = ({ expandableHunk, diffExpanded, diffExpansionFail return ( @@ -47,12 +47,12 @@ const HunkFooter: FC = ({ expandableHunk, diffExpanded, diffExpansionFail return ( {" "} diff --git a/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx b/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx index 35dc665815..38b4e1da91 100644 --- a/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx +++ b/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx @@ -37,10 +37,9 @@ const HunkHeader: FC = ({ expandableHunk, diffExpanded, diffExpansionFail return ( ); @@ -48,12 +47,12 @@ const HunkHeader: FC = ({ expandableHunk, diffExpanded, diffExpansionFail return ( {" "} diff --git a/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx b/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx index e814cd8ca7..4a705702da 100644 --- a/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx +++ b/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx @@ -36,12 +36,12 @@ const LastHunkFooter: FC = ({ expandableHunk, diffExpanded, diffExpansion return ( {" "} diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss index 655ec8fe97..7c2712c03c 100644 --- a/scm-ui/ui-styles/src/components/_main.scss +++ b/scm-ui/ui-styles/src/components/_main.scss @@ -1100,3 +1100,10 @@ form .field:not(.is-grouped) { position: absolute; text-align: center; } + +// Hunk expander basic mobile styles +.hunk-expander { + @media screen and (max-width: 768px) { + padding-bottom: 0.25rem; + } +} diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss index d5f2cbe1c8..38623e9cda 100644 --- a/scm-ui/ui-styles/src/highcontrast.scss +++ b/scm-ui/ui-styles/src/highcontrast.scss @@ -294,6 +294,13 @@ td button:not(.is-default) { color: $scheme-main; } +.hunk-expander{ + &:hover, :focus-visible { + color: #98d8f3; + background-color: #050514 + } +} + /* transport meaning with more than color */ td:nth-child(2).diff-gutter-delete:before { content: "-";