A11y avatar fixes

webviews/components/user.tsx

@@ -7,16 +7,26 @@ import * as React from 'react';
 import { IAccount, IActor, ITeam, reviewerLabel } from '../../src/github/interface';
 import { Icon } from './icon';
 
-export const Avatar = ({ for: author }: { for: Partial<IAccount> }) => (
- <a className="avatar-link" href={author.url} title={author.url}>
+const InnerAvatar = ({ for: author }: { for: Partial<IAccount> }) => (
+ <>
  {author.avatarUrl ? (
- <img className="avatar" src={author.avatarUrl} alt="" />
+ <img className="avatar" src={author.avatarUrl} alt="" role="presentation" />
  ) : (
  <Icon className="avatar-icon" src={require('../../resources/icons/dark/github.svg')} />
  )}
- </a>
+ </>
 );
 
+export const Avatar = ({ for: author, link = true }: { for: Partial<IAccount>, link?: boolean }) => {
+ if (link) {
+ return <a className="avatar-link" href={author.url} title={author.url}>
+ <InnerAvatar for={author} />
+ </a>;
+ } else {
+ return <InnerAvatar for={author} />;
+ }
+};
+
 export const AuthorLink = ({ for: author, text = reviewerLabel(author) }: { for: IActor | ITeam; text?: string }) => (
  <a className="author-link" href={author.url} title={author.url}>
  {text}

webviews/createPullRequestViewNew/app.tsx

@@ -155,7 +155,7 @@ export function main() {
  <div className='group-branches'>
  <div className='input-label base'>
  <div className="deco">
- <span title='Base branch'>{prBaseIcon} Base</span>
+ <span title='Base branch' aria-hidden='true'>{prBaseIcon} Base</span>
  </div>
  <ChooseRemoteAndBranch onClick={ctx.changeBaseRemoteAndBranch}
  defaultRemote={params.baseRemote}
@@ -167,7 +167,7 @@ export function main() {
 
  <div className='input-label merge'>
  <div className="deco">
- <span title='Merge branch'>{prMergeIcon} Merge</span>
+ <span title='Merge branch' aria-hidden='true'>{prMergeIcon} Merge</span>
  </div>
  <ChooseRemoteAndBranch onClick={ctx.changeMergeRemoteAndBranch}
  defaultRemote={params.compareRemote}
@@ -203,37 +203,41 @@ export function main() {
 
  {params.assignees && (params.assignees.length > 0) ?
  <div className='assignees'>
- <span title='Assignees'>{assigneeIcon}</span>
+ <span title='Assignees' aria-hidden='true'>{assigneeIcon}</span>
  <ul aria-label="Assignees" tabIndex={0} onClick={() => {
  ctx.postMessage({ command: 'pr.changeAssignees' });
  }}>
  {params.assignees.map(assignee =>
  <li>
- <Avatar for={assignee} />
- {assignee.login}
+ <span title={assignee.name} aria-label={assignee.name}>
+ <Avatar for={assignee} link={false} />
+ {assignee.login}
+ </span>
  </li>)}
  </ul>
  </div>
  : null}
 
  {params.reviewers && (params.reviewers.length > 0) ?
  <div className='reviewers'>
- <span title='Reviewers'>{reviewerIcon}</span>
+ <span title='Reviewers' aria-hidden='true'>{reviewerIcon}</span>
  <ul aria-label="Reviewers" tabIndex={0} onClick={() => {
  ctx.postMessage({ command: 'pr.changeReviewers' });
  }}>
  {params.reviewers.map(reviewer =>
  <li>
- <Avatar for={reviewer} />
- {isTeam(reviewer) ? reviewer.slug : reviewer.login}
+ <span title={reviewer.name} aria-label={reviewer.name}>
+ <Avatar for={reviewer} link={false} />
+ {isTeam(reviewer) ? reviewer.slug : reviewer.login}
+ </span>
  </li>)}
  </ul>
  </div>
  : null}
 
  {params.labels && (params.labels.length > 0) ?
  <div className='labels'>
- <span title='Labels'>{labelIcon}</span>
+ <span title='Labels' aria-hidden='true'>{labelIcon}</span>
  <ul aria-label="Labels" tabIndex={0} onClick={() => {
  ctx.postMessage({ command: 'pr.changeLabels' });
  }}>
@@ -244,7 +248,7 @@ export function main() {
 
  {params.milestone ?
  <div className='milestone'>
- <span title='Milestone'>{milestoneIcon}</span>
+ <span title='Milestone' aria-hidden='true'>{milestoneIcon}</span>
  <ul aria-label="Milestone" tabIndex={0} onClick={() => {
  ctx.postMessage({ command: 'pr.changeMilestone' });
  }}>
@@ -284,7 +288,7 @@ export function main() {
  {createMethodLabel(ctx.createParams.isDraft, ctx.createParams.autoMerge, ctx.createParams.autoMergeMethod).label}
  </button>
  <div className='split'></div>
- <button className='split-right' disabled={isBusy || !isCreateable || !ctx.initialized} onClick={(e) => {
+ <button className='split-right' title='Create Actions' disabled={isBusy || !isCreateable || !ctx.initialized} onClick={(e) => {
  e.preventDefault();
  const rect = (e.target as HTMLElement).getBoundingClientRect();
  const x = rect.left;

webviews/createPullRequestViewNew/index.css

@@ -114,7 +114,7 @@ textarea {
 
 textarea {
  height: 100%;
- min-height: 32px;
+ min-height: 96px;
  resize: none;
 }
 
@@ -168,6 +168,12 @@ textarea {
  height: 16px;
 }
 
+.group-additions img.avatar,
+.group-additions img.avatar-icon {
+ margin-right: 4px;
+ width: 16px; height: 16px;
+}
+
 .group-additions ul {
  display: flex;
  align-content: flex-start;