Browse Source

Updates commit graph status bar

- adds feedback link
- updates focus state colors
- updates aria-activedescendant when viewing repos
main
Keith Daulton 2 years ago
parent
commit
c007b15176
2 changed files with 27 additions and 6 deletions
  1. +17
    -6
      src/webviews/apps/plus/graph/GraphWrapper.tsx
  2. +10
    -0
      src/webviews/apps/plus/graph/graph.scss

+ 17
- 6
src/webviews/apps/plus/graph/GraphWrapper.tsx View File

@ -274,7 +274,13 @@ export function GraphWrapper({
id="repo-actioncombo-label"
className="actioncombo__label"
role="combobox"
aria-activedescendant=""
aria-activedescendant={
repoExpanded
? `repo-actioncombo-item-${reposList.findIndex(
item => item.path === currentRepository?.path,
)}`
: undefined
}
onClick={() => handleToggleRepos()}
>
<span className="codicon codicon-repo actioncombo__icon" aria-label="Repository "></span>
@ -304,14 +310,14 @@ export function GraphWrapper({
</button>
))
) : (
<li
<span
className="actioncombo__item"
role="option"
id="repo-actioncombo-item-0"
aria-selected="true"
>
None available
</li>
</span>
)}
</div>
</div>
@ -320,11 +326,16 @@ export function GraphWrapper({
{graphList.length} commit{graphList.length ? 's' : ''}
</span>
)}
{isLoading && (
<span className={'icon--loading'}/>
)}
{isLoading && <span className="icon--loading" />}
</div>
<div className="actionbar__group">
<a
href="https://github.com/gitkraken/vscode-gitlens/discussions/2158"
title="Commit Graph Feedback"
aria-label="Commit Graph Feedback"
>
<span className="codicon codicon-feedback"></span>
</a>{' '}
<span className="badge">Preview</span>
</div>
</footer>

+ 10
- 0
src/webviews/apps/plus/graph/graph.scss View File

@ -46,6 +46,15 @@ a {
margin: 0;
}
}
a {
color: inherit;
}
:focus {
outline: 1px solid var(--vscode-focusBorder);
outline-offset: -1x;
}
}
.actioncombo {
@ -105,6 +114,7 @@ a {
min-width: 100%;
width: max-content;
z-index: 100;
background-color: var(--actionbar-background-color);
}
&__label:not([aria-expanded='true']) + &__list {

Loading…
Cancel
Save