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

Jump to bottom

Fixing some accessibility issues #1318

Merged
merged 15 commits into from
Apr 26, 2020
Merged

Fixing some accessibility issues #1318

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bb11c74
Add language attribute to html tag
Hirse Apr 24, 2020
7d9e98c
Add SR-label to dropdown button
Hirse Apr 24, 2020
8f4a696
Add alt text for images
Hirse Apr 24, 2020
00608d1
Add aria-labels to inputs
Hirse Apr 24, 2020
83d63ed
Clean up login form
Hirse Apr 24, 2020
a0abbbd
Fix tabbing in dialogs
Hirse Apr 24, 2020
a9ad916
Fix dialog indentation
Hirse Apr 24, 2020
ca5d213
Set input and button type exlicitly
Hirse Apr 24, 2020
30a4666
Enable scaling on mobile devices
Hirse Apr 24, 2020
9fbd1fe
Fix index.html indentation
Hirse Apr 24, 2020
3d33788
Fix more tests
Hirse Apr 24, 2020
139654d
Separate dialog button style from action
Hirse Apr 24, 2020
a2a651e
Fix classes for test
Hirse Apr 25, 2020
27a3a16
Merge branch 'master' into aria
campersau Apr 26, 2020
291d80a
update changelog
campersau Apr 26, 2020
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
3 changes: 2 additions & 1 deletion components/branches/branches.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<span data-bind="html: branchIcon"></span>
<span data-bind="text: refsLabel"></span>
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-bind="enable: listRefsEnabled">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-bind="enable: listRefsEnabled" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Branch List</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<div class="option" onclick="event.stopPropagation()">
Expand Down
4 changes: 2 additions & 2 deletions components/commit/commit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
</div>
<div class="clearfix">
<img class="pull-left img-circle gravatar"
data-bind="attr: { src: 'http://www.gravatar.com/avatar/' + authorGravatar() + '?default=404' }"
onerror="this.style.display='none';">
data-bind="attr: { src: `https://www.gravatar.com/avatar/${authorGravatar()}?default=404`, alt: `Profile Picture of ${authorName()}` }"
onerror="this.style.display='none';" />
<div>
<div>
<span class="title" data-bind="text: (title().length > 72 ? title().substring(0, 72) + '...' : title)"></span>
Expand Down
30 changes: 15 additions & 15 deletions components/dialogs/dialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ class CredentialsDialogViewModel extends FormDialogViewModel {
this.password = ko.observable();
const self = this;
this.items([
{ name: 'Username', value: self.username, placeholder: 'Username', type: 'text', autofocus: true, taName: 'username' },
{ name: 'Password', value: self.password, placeholder: 'Password', type: 'password', autofocus: false, taName: 'password' }
{ name: 'Username', value: self.username, type: 'text', autofocus: true },
{ name: 'Password', value: self.password, type: 'password', autofocus: false }
]);
}
}
Expand All @@ -82,8 +82,8 @@ class AddRemoteDialogViewModel extends FormDialogViewModel {
this.url = ko.observable();
const self = this;
this.items([
{ name: 'Name', value: self.name, placeholder: 'Name', type: 'text', autofocus: true, taName: 'name' },
{ name: 'Url', value: self.url, placeholder: 'Url', type: 'text', autofocus: false, taName: 'url' }
{ name: 'Name', value: self.name, type: 'text', autofocus: true },
{ name: 'Url', value: self.url, type: 'text', autofocus: false }
]);
}
}
Expand All @@ -96,8 +96,8 @@ class AddSubmoduleDialogViewModel extends FormDialogViewModel {
this.url = ko.observable();
const self = this;
this.items([
{ name: 'Path', value: self.path, placeholder: 'Path', type: 'text', autofocus: true, taName: 'path' },
{ name: 'Url', value: self.url, placeholder: 'Url', type: 'text', autofocus: false, taName: 'url' }
{ name: 'Path', value: self.path, type: 'text', autofocus: true },
{ name: 'Url', value: self.url, type: 'text', autofocus: false }
]);
}
}
Expand All @@ -119,8 +119,8 @@ class YesNoDialogViewModel extends PromptDialogViewModel {
this.result = ko.observable(false);
const self = this;
this.alternatives([
{ label: 'Yes', primary: true, taId: 'yes', click() { self.result(true); self.close(); } },
{ label: 'No', primary: false, taId: 'no', click() { self.result(false); self.close(); } },
{ label: 'Yes', style: 'primary', taId: 'yes', click() { self.result(true); self.close(); } },
{ label: 'No', style: 'default', taId: 'no', click() { self.result(false); self.close(); } },
]);
}
}
Expand All @@ -132,9 +132,9 @@ class YesNoMuteDialogViewModel extends PromptDialogViewModel {
this.result = ko.observable(false);
const self = this;
this.alternatives([
{ label: 'Yes', primary: true, taId: 'yes', click() { self.result(true); self.close(); } },
{ label: 'Yes and mute for awhile', primary: false, taId: 'mute', click() { self.result("mute"); self.close() } },
{ label: 'No', primary: false, taId: 'no', click() { self.result(false); self.close(); } }
{ label: 'Yes', style: 'primary', taId: 'yes', click() { self.result(true); self.close(); } },
{ label: 'Yes and mute for awhile', style: 'mute', click() { self.result("mute"); self.close() } },
Hirse marked this conversation as resolved.
Show resolved Hide resolved
{ label: 'No', style: 'default', taId: 'no', click() { self.result(false); self.close(); } }
]);
}
}
Expand All @@ -146,8 +146,8 @@ class TooManyFilesDialogViewModel extends PromptDialogViewModel {
this.result = ko.observable(false);
const self = this;
this.alternatives([
{ label: "Don't load", primary: true, taId: 'noLoad', click() { self.result(false); self.close(); } },
{ label: 'Load anyway', primary: false, taId: 'loadAnyway', click() { self.result(true); self.close(); } },
{ label: "Don't load", style: 'primary', taId: 'noLoad', click() { self.result(false); self.close(); } },
{ label: 'Load anyway', style: 'default', taId: 'loadAnyway', click() { self.result(true); self.close(); } },
]);
}
}
Expand All @@ -160,13 +160,13 @@ class TextEditDialog extends PromptDialogViewModel {
const self = this;
this.alternatives([
{
label: "Save", primary: true, taId: 'save', click() {
label: "Save", style: 'primary', taId: 'save', click() {
self.textAreaContent = document.querySelector('.modal-body .text-area-content').value;
self.result(true);
self.close();
}
},
{ label: 'Cancel', primary: false, taId: 'cancel', click() { self.result(false); self.close(); } },
{ label: 'Cancel', style: 'default', taId: 'cancel', click() { self.result(false); self.close(); } },
]);
}
}
48 changes: 23 additions & 25 deletions components/dialogs/formDialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@

<div class="modal fade" data-bind="modal: { onclose: onclose, closer: setCloser }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-bind="text: title"></h4>
</div>
<!-- Autocomplete is off here because of https://github.com/FredrikNoren/ungit/issues/363 -->
<form class="form-horizontal" data-bind="submit: submit" autocomplete="off">
<div class="modal-body" data-bind="foreach: items">
<div class="form-group">
<label data-bind="text: name, attr: { for: name }" class="col-lg-2 control-label"></label>
<div class="col-lg-10">
<input class="form-control" id="inputName"
data-bind="value: value, attr: { id: name, placeholder: placeholder, type: type, autofocus: autofocus }">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Submit">
<button class="btn btn-default" data-bind="click: close, visible: showCancel">Cancel</button>
</div>
</form>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal: { onclose: onclose, closer: setCloser }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-bind="text: title"></h4>
</div>
<!-- Autocomplete is off here because of https://github.com/FredrikNoren/ungit/issues/363 -->
<form class="form-horizontal" data-bind="submit: submit" autocomplete="off">
<div class="modal-body" data-bind="foreach: items">
<div class="form-group">
<label data-bind="text: name, attr: { for: name }" class="col-lg-2 control-label"></label>
<div class="col-lg-10">
<input class="form-control" data-bind="value: value, attr: { id: name, type: type, autofocus: autofocus }" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Submit</button>
Hirse marked this conversation as resolved.
Show resolved Hide resolved
<button class="btn btn-default" type="button" data-bind="click: close, visible: showCancel">Cancel</button>
</div>
</form>
</div>
</div>
</div>
33 changes: 16 additions & 17 deletions components/dialogs/prompt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@

<div class="modal fade" data-bind="modal: { onclose: onclose, closer: setCloser }, attr: { 'data-ta-container': taDialogName }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-bind="text: title"></h4>
</div>
<div class="modal-body">
<p data-bind="html: details"></p>
</div>
<div class="modal-footer">
<!-- ko foreach: alternatives -->
<button type="button" class="btn btn-default" data-bind="css: { 'btn-primary': primary, 'btn-mute': taId === 'mute' }, text: label, click: click"></button>
<!-- /ko -->
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal: { onclose: onclose, closer: setCloser }, attr: { 'data-ta-container': taDialogName }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" data-bind="text: title"></h4>
</div>
<div class="modal-body">
<p data-bind="html: details"></p>
</div>
<div class="modal-footer">
<!-- ko foreach: alternatives -->
<button class="btn" data-bind="class: `btn-${style}`, text: label, click: click"></button>
<!-- /ko -->
</div>
</div>
</div>
</div>
6 changes: 3 additions & 3 deletions components/graph/graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
<button class="showBranchingForm bootstrap-tooltip" data-bind="html: $parent.plusIcon, click: showBranchingForm, visible: !branchingFormVisible()" data-toggle="tooltip" data-placement="bottom" title="Create a branch or tag"></button>
<!-- ko if: branchingFormVisible -->
<form class="form-inline" data-bind="hasfocus2: branchingFormVisible, submit: createBranch">
<input class="name form-control" type="text" data-bind="value: newBranchName, hasfocus: newBranchNameHasFocus, valueUpdate: 'afterkeydown'"/>
<button class="btn btn-primary" type="submit" value="Branch" data-bind="click: createBranch, enable: canCreateRef">Branch</button>
<input class="name form-control" aria-label="New branch name" data-bind="value: newBranchName, hasfocus: newBranchNameHasFocus, valueUpdate: 'afterkeydown'" />
<button class="btn btn-primary" data-bind="click: createBranch, enable: canCreateRef">Branch</button>
<button class="btn btn-default" data-bind="click: createTag, enable: canCreateRef">Tag</button>
</form>
<!-- /ko -->
Expand All @@ -54,7 +54,7 @@
<span class="newRef" data-bind="css: { editing: branchingFormVisible }">
<button class="showSearchForm bootstrap-tooltip" data-bind="html: $parent.searchIcon, click: showRefSearchForm, visible: !refSearchFormVisible()" data-toggle="tooltip" data-placement="bottom" title="Search for a branch or tag"></button>
<div class="form-inline" data-bind="visible: refSearchFormVisible()">
<input class="name form-control" type="text" data-bind="hasfocus: refSearchFormVisible, valueUpdate: 'afterkeydown'"/>
<input class="name form-control" type="search" aria-label="Filter branches and tags" data-bind="hasfocus: refSearchFormVisible, valueUpdate: 'afterkeydown'" />
</div>
</span>
<!-- /ko -->
Expand Down
4 changes: 2 additions & 2 deletions components/header/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div class="navbar navbar-default navbar-fixed-top">
<a class="backlink bootstrap-tooltip" href="#/" data-toggle="tooltip" data-placement="bottom" title="Navigate to Ungit home page" data-delay='{"show":"2000", "hide":"0"}'>
<span class="back-icon octicon-circled" data-bind="html: backIcon, css: { 'back-icon-shown': showBackButton }"></span>
<img src="images/logoLarge.png" class="headerLogo">
<img class="headerLogo" src="images/logoLarge.png" alt="Ungit Logo" />
</a>

<div class="form-container">
<form class="path-input-form" data-bind="submit: submitPath">
<input class="form-control input-lg" data-bind="value: path, autocomplete: path" placeholder="Enter path to repository">
<input class="form-control input-lg" data-bind="value: path, autocomplete: path" placeholder="Enter path to repository" aria-label="Path to repository" />
<button type="button" class="add-to-repolist btn btn-default bootstrap-tooltip" data-bind="html: addIcon, visible: showAddToRepoListButton, click: addCurrentPathToRepoList" data-toggle="tooltip" data-placement="bottom" title="Add current git directory to Ungit home page" data-delay='{"show":"2000", "hide":"0"}'></button>
</form>
</div>
Expand Down
13 changes: 6 additions & 7 deletions components/login/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@

<div class="container">
<div data-bind="visible: status() == 'loading'">
</div>
<div data-bind="visible: status() == 'loading'"></div>

<div class='login col-lg-6' data-bind="visible: status() == 'login'">
<h1>Login</h1>
<!-- ko if: loginError -->
<div class="loginError" data-bind="text: loginError"></div>
<div class="alert alert-danger loginError" role="alert" data-bind="text: loginError"></div>
<!-- /ko -->
<form data-bind="submit: login" role="form">
<form data-bind="submit: login">

<div class="form-group">
<label for="inputUsername">Username</label>
<input type="text" class="form-control" id="inputUsername" placeholder="Username" data-bind="value: username">
Hirse marked this conversation as resolved.
Show resolved Hide resolved
<input id="inputUsername" class="form-control" autocomplete="username" data-bind="value: username" />
</div>

<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" data-bind="value: password">
<input id="inputPassword" class="form-control" type="password" autocomplete="current-password" data-bind="value: password" />
</div>

<input type="submit" class="btn btn-primary" value="Login">
<button class="btn btn-primary">Login</button>
</form>
</div>
</div>
8 changes: 4 additions & 4 deletions components/path/path.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,19 @@ <h1>"<span data-bind="text: dirName"></span>" is not a git repository</h1>
<form data-bind="submit: cloneRepository">
<div class="form-group">
<label for="cloneFromInput">Clone from</label>
<input class="form-control" type="text" id="cloneFromInput" placeholder="URL" data-bind="value: cloneUrl, valueUpdate: 'afterkeydown'" required />
<input class="form-control" id="cloneFromInput" placeholder="URL" data-bind="value: cloneUrl, valueUpdate: 'afterkeydown'" required />
</div>
<div class="form-group">
<label for="cloneToInput">into</label>
<input class="form-control" type="text" id="cloneToInput" data-bind="value: cloneDestination, attr: { placeholder: cloneDestinationImplicit }" />
<input class="form-control" id="cloneToInput" data-bind="value: cloneDestination, attr: { placeholder: cloneDestinationImplicit }" />
</div>
<div class="form-group">
<label>
<input type="checkbox" data-bind="checked: isRecursiveSubmodule, attr: { placeholder: cloneDestinationImplicit }" />
<input type="checkbox" data-bind="checked: isRecursiveSubmodule" />
Recurse submodules
</label>
</div>
<button type="submit" class="btn btn-primary btn-lg">Clone Repository</button>
<button class="btn btn-primary btn-lg">Clone Repository</button>
</form>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/remotes/remotes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<span data-bind="html: remotesIcon"></span>
<span data-bind="text: fetchLabel"></span>
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Remote List</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<!-- ko foreach: remotes -->
Expand Down
7 changes: 4 additions & 3 deletions components/staging/staging.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
</div>
<div class="row" data-bind="visible: !showNux()">
<div class="col-lg-3">
<input class="form-control" type="text" placeholder="Title (required)" data-bind="value: commitMessageTitle, valueUpdate: 'afterkeydown', enable: !inRebase(), event: {keypress: onEnter}"></input>
<textarea class="form-control" rows="2" placeholder="Body" data-bind="value: commitMessageBody, valueUpdate: 'afterkeydown', enable: !inRebase(), event: {keypress: onAltEnter}"></textarea>
<input class="form-control" placeholder="Title (required)" aria-label="Commit message title" data-bind="value: commitMessageTitle, valueUpdate: 'afterkeydown', enable: !inRebase(), event: {keypress: onEnter}" />
<textarea class="form-control" rows="2" placeholder="Body" aria-label="Commit message body" data-bind="value: commitMessageBody, valueUpdate: 'afterkeydown', enable: !inRebase(), event: {keypress: onAltEnter}"></textarea>
<div>
<button class="amend-button btn btn-link" data-bind="visible: canAmend, click: toggleAmend">
<div class="checkmark" data-bind="css: { checked: amend }">
Expand All @@ -25,8 +25,9 @@
<button class="btn btn-primary btn-lg commit-btn" data-bind="click: commit, enable: !commitValidationError()">
Commit
</button>
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" data-bind="enable: !commitValidationError()">
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" data-bind="enable: !commitValidationError()" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Commit Options</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" data-bind="click: commitnpush, css: { disabled: !canPush() }" class="commitnpush">Commit & Push</a></li>
Expand Down
3 changes: 2 additions & 1 deletion components/submodules/submodules.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<span data-bind="html: submodulesIcon"></span>
<span data-bind="text: 'Submodules'"></span>
</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Submodule List</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<!-- ko foreach: submodules -->
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0 ">
Expand Down