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

Improve accessibility #160

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve accessibility #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
94 changes: 53 additions & 41 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
<script src="config.local.js"></script>
<script src="theme.js"></script>
<script src="matrix.js"></script>

<title>Mumble web</title>
</head>
<body>
<div class="loading-container" data-bind="css: { loaded: true }">
Expand All @@ -27,32 +29,32 @@
<div id="container" style="display: none" data-bind="visible: true,
css: { minimal: minimalView }">
<!-- ko with: connectDialog -->
<div class="connect-dialog dialog" data-bind="visible: visible() && !joinOnly()">
<div class="connect-dialog dialog" role="dialog" aria-labelledby="connect-dialog_title" data-bind="visible: visible() && !joinOnly()">
<div id="connect-dialog_title" class="dialog-header">
Connect to Server
</div>
<form data-bind="submit: connect">
<table>
<tr data-bind="if: $root.config.connectDialog.address">
<td id="connect-dialog_input_address">Address</td>
<td><label id="connect-dialog_input_address" for="address">Address</label></td>
<td><input id="address" type="text" data-bind="value: address" required></td>
</tr>
<tr data-bind="if: $root.config.connectDialog.port">
<td id="connect-dialog_input_port">Port</td>
<td><label id="connect-dialog_input_port" for="port">Port</label></td>
<td><input id="port" type="text" data-bind="value: port" required></td>
</tr>
<tr data-bind="if: $root.config.connectDialog.username">
<td id="connect-dialog_input_username">Username</td>
<td><label id="connect-dialog_input_username" for="username">Username</label></td>
<td><input id="username" type="text" data-bind="value: username" required></td>
</tr>
<tr data-bind="if: $root.config.connectDialog.password">
<td id="connect-dialog_input_password">Password</td>
<td><label id="connect-dialog_input_password" for="password">Password</label></td>
<td><input id="password" type="password" data-bind="value: password"></td>
</tr>
<tr data-bind="if: $root.config.connectDialog.token">
<td id="connect-dialog_input_tokens">Tokens</td>
<td><label id="connect-dialog_input_tokens" for="tokens">Tokens</label></td>
<td>
<input type="text" data-bind='value: tokenToAdd, valueUpdate: "afterkeydown"'>
<input id="tokens" type="text" data-bind='value: tokenToAdd, valueUpdate: "afterkeydown"'>
</td>
</tr>
<tr data-bind="if: $root.config.connectDialog.token">
Expand All @@ -79,8 +81,8 @@
</div>
<!-- /ko -->
<!-- ko with: addChannelDialog -->
<div class="add-channel-dialog dialog" data-bind="visible: visible()">
<div class="dialog-header">
<div class="add-channel-dialog dialog" role="dialog" aria-labelledby="add-channel-dialog_title" data-bind="visible: visible()">
<div id="add-channel-dialog_title" class="dialog-header">
Add channel
</div>
<form data-bind="submit: addchannel">
Expand All @@ -95,8 +97,8 @@
</div>
<!-- /ko -->
<!-- ko with: connectDialog -->
<div class="join-dialog dialog" data-bind="visible: visible() && joinOnly()">
<div class="dialog-header">
<div class="join-dialog dialog" role="dialog" aria-labelledby="join-dialog_title" data-bind="visible: visible() && joinOnly()">
<div id="join-dialog_title" class="dialog-header">
Mumble Voice Conference
</div>
<form data-bind="submit: connect">
Expand All @@ -105,8 +107,8 @@
</div>
<!-- /ko -->
<!-- ko with: connectErrorDialog -->
<div class="connect-dialog error-dialog dialog" data-bind="visible: visible()">
<div class="dialog-header">
<div class="connect-dialog error-dialog dialog" role="dialog" aria-labelledby="connect-error-dialog_title" data-bind="visible: visible()">
<div id="connect-error-dialog_title" class="dialog-header">
Failed to connect
</div>
<form data-bind="submit: connect">
Expand Down Expand Up @@ -181,8 +183,8 @@
</div>
<!-- /ko -->
<!-- ko with: connectionInfo -->
<div class="connection-info-dialog dialog" data-bind="visible: visible">
<div class="dialog-header">
<div class="connection-info-dialog dialog" role="dialog" aria-labelledby="connection-info-dialog_title" data-bind="visible: visible">
<div id="connection-info-dialog_title" class="dialog-header">
Connection Information
</div>
<div class="dialog-content">
Expand Down Expand Up @@ -226,16 +228,16 @@ <h3>Audio bandwidth</h3>
</div>
<!-- /ko -->
<!-- ko with: settingsDialog -->
<div class="settings-dialog dialog" data-bind="visible: $data">
<div class="dialog-header">
<div class="settings-dialog dialog" role="dialog" aria-labelledby="settings-dialog_title" data-bind="visible: $data">
<div id="settings-dialog_title" class="dialog-header">
Settings
</div>
<form data-bind="submit: $root.applySettings">
<table>
<tr>
<td>Transmission</td>
<td><label for="settings-transmission">Transmission</label></td>
<td>
<select data-bind='value: voiceMode'>
<select id="settings-transmission" data-bind='value: voiceMode'>
<option value="cont">Continuous</option>
<option value="vad">Voice Activity</option>
<option value="ptt">Push To Talk</option>
Expand All @@ -250,32 +252,33 @@ <h3>Audio bandwidth</h3>
}"></div>
</div>
<input type="range" min="0" max="1" step="0.01"
data-bind="value: vadLevel">
data-bind="value: vadLevel"
aria-label="Voice activation level" title="Voice activation level">
</td>
</tr>
<tr data-bind="visible: voiceMode() == 'ptt'">
<td>PTT Key</td>
<td><label for="settings-ptt-key">PTT Key</label></td>
<td>
<input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
<input id="settings-ptt-key" type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
</td>
</tr>
<tr>
<td>Audio Quality</td>
<td><label for="settings-audio-quality">Audio Quality</label></td>
<td><span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span> kbit/s</td>
</tr>
<tr>
<td colspan="2">
<input type="range" min="8000" max="96000" step="8"
<input id="settings-audio-quality" type="range" min="8000" max="96000" step="8"
data-bind="value: audioBitrate, valueUpdate: 'input'">
</td>
</tr>
<tr>
<td>Audio per packet</td>
<td><label for="settings-packet">Audio per packet</label></td>
<td><span data-bind="text: msPerPacket"></span> ms</td>
</tr>
<tr>
<td colspan="2">
<input type="range" min="10" max="60" step="10"
<input id="settings-packet" type="range" min="10" max="60" step="10"
data-bind="value: msPerPacket, valueUpdate: 'input'">
</td>
</tr>
Expand All @@ -292,9 +295,9 @@ <h3>Audio bandwidth</h3>
</td>
</tr>
<tr>
<td>Show Avatars</td>
<td><label for="settings-avatars">Show Avatars</label></td>
<td>
<select data-bind='value: showAvatars'>
<select id="settings-avatars" data-bind='value: showAvatars'>
<option value="always">Always</option>
<option value="own_channel">Same Channel</option>
<option value="linked_channel">Linked Channels</option>
Expand All @@ -304,8 +307,8 @@ <h3>Audio bandwidth</h3>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" data-bind="checked: userCountInChannelName">
Show user count after channel name
<input id="settings-user-count" type="checkbox" data-bind="checked: userCountInChannelName">
<label for="settings-user-count">Show user count after channel name</label>
</td>
</tr>
</table>
Expand Down Expand Up @@ -488,43 +491,52 @@ <h3>Audio bandwidth</h3>
<img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
click: connectDialog.show"
rel="connect" src="/svg/applications-internet.svg"
title="Connect to Server" alt="Connection">
title="Connect to Server" alt="Connection"
tabindex="0">
<img class="tb-information" rel="information" src="/svg/information_icon.svg"
data-bind="click: connectionInfo.show,
css: { disabled: !thisUser() }"
title="Information" alt="Information">
title="Information" alt="Information"
tabindex="0">
<div class="divider"></div>
<img class="tb-mute" data-bind="visible: !selfMute(),
click: function () { requestMute(thisUser()) }"
rel="mute" src="/svg/audio-input-microphone.svg"
title="Mute" alt="Mute">
title="Mute" alt="Mute"
tabindex="0">
<img class="tb-unmute tb-active" data-bind="visible: selfMute,
click: function () { requestUnmute(thisUser()) }"
rel="unmute" src="/svg/audio-input-microphone-muted.svg"
title="Unmute" alt="Unmute">
title="Unmute" alt="Unmute"
tabindex="0">
<img class="tb-deaf" data-bind="visible: !selfDeaf(),
click: function () { requestDeaf(thisUser()) }"
rel="deaf" src="/svg/audio-output.svg"
title="Deafen" alt="Deafen">
title="Deafen" alt="Deafen"
tabindex="0">
<img class="tb-undeaf tb-active" data-bind="visible: selfDeaf,
click: function () { requestUndeaf(thisUser()) }"
rel="undeaf" src="/svg/audio-output-deafened.svg"
title="Undeafen" alt="Undeafen">
title="Undeafen" alt="Undeafen"
tabindex="0">
<img class="tb-record" data-bind="click: function(){}"
rel="record" src="/svg/media-record.svg"
title="Record" alt="Record">
<div class="divider"></div>
<img class="tb-comment" data-bind="click: commentDialog.show"
rel="comment" src="/svg/toolbar-comment.svg"
title="Comment" alt="Comment">
title="Comment" alt="Comment"
tabindex="0">
<div class="divider"></div>
<img class="tb-settings" data-bind="click: openSettings"
rel="settings" src="/svg/config_basic.svg"
title="Settings" alt="Settings">
title="Settings" alt="Settings"
tabindex="0">
<div class="divider"></div>
<img class="tb-sourcecode" data-bind="click: openSourceCode"
rel="Source Code" src="/svg/source-code.svg"
title="Open Soure Code" alt="Open Source Code">
title="Open Soure Code" alt="Open Source Code"
tabindex="0">
</div>
<div class="chat">
<script type="text/html" id="log-generic">
Expand Down Expand Up @@ -563,7 +575,7 @@ <h3>Audio bandwidth</h3>
</div>
<form data-bind="submit: submitMessageBox">
<textarea id="message-box" row=1 data-bind="
attr: { placeholder: messageBoxHint },
attr: { placeholder: messageBoxHint, 'aria-label': messageBoxHint },
textInput: messageBox,
event: {keypress: submitOnEnter}"></textarea>
</form>
Expand All @@ -578,7 +590,7 @@ <h3>Audio bandwidth</h3>
css: {
selected: $root.selected() === $data,
currentChannel: users.indexOf($root.thisUser()) !== -1
}">
}" tabindex="0">
<div class="channel-status">
<img class="channel-description" data-bind="visible: description"
alt="description" src="/svg/comment.svg">
Expand Down
2 changes: 1 addition & 1 deletion themes/MetroMumbleLight/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ html, body {
border-radius: 3px;
cursor: pointer;
}
.toolbar img:hover {
.toolbar img:hover, .toolbar img:focus {
border: 1px solid $toolbar-hover-bg-color;
background-color: $toolbar-hover-border-color;
}
Expand Down