kamp/LibreTranslate
1
0
Fork 0
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-11-05 23:40:13 +01:00
Code Activity

Merge pull request #382 from nvda-es/accessibility

Browse Source 
Use WAI-ARIA attributes to make the web interface more accessible
This commit is contained in:
Piero Toffanin 2023-01-06 12:58:29 -05:00 committed by GitHub
commit bdbf50f7cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
libretranslate/templates/index.html
View File

@ -57,7 +57,7 @@
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<button data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></button> <button data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></button>
<a id="logo-container" href="/" class="brand-logo"> <a id="logo-container" href="/" class="brand-logo">
<img src="{{ url_for('static', filename='icon.svg') }}" alt="Logo for LibreTranslate" class="logo"> <img src="{{ url_for('static', filename='icon.svg') }}" alt="" class="logo">
<span>LibreTranslate</span> <span>LibreTranslate</span>
</a> </a>
<ul class="right hide-on-med-and-down"> <ul class="right hide-on-med-and-down">
@ -68,7 +68,7 @@
{% endif %} {% endif %}
<li><a href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">GitHub</a></li> <li><a href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">GitHub</a></li>
{% if api_keys %} {% if api_keys %}
<li><a href="javascript:setApiKey()" title="Set API Key"><i class="material-icons">vpn_key</i></a></li> <li><a href="javascript:setApiKey()" title="Set API Key" aria-label="Set API Key"><i class="material-icons">vpn_key</i></a></li>
{% endif %} {% endif %}
</ul> </ul>
@ -79,7 +79,7 @@
{% endif %} {% endif %}
<li><a href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">GitHub</a></li> <li><a href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">GitHub</a></li>
{% if api_keys %} {% if api_keys %}
<li><a href="javascript:setApiKey()" title="Set API Key"><i class="material-icons">vpn_key</i></a></li> <li><a href="javascript:setApiKey()" title="Set API Key" aria-label="Set API Key"><i class="material-icons">vpn_key</i></a></li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
@ -133,20 +133,20 @@
<h3 class="header center">Translation API</h3> <h3 class="header center">Translation API</h3>
<div id="translation-type-btns" class="s12 center" v-if="filesTranslation === true"> <div id="translation-type-btns" class="s12 center" v-if="filesTranslation === true">
<button type="button" class="btn btn-switch-type" @click="switchType('text')" :class="{'active': translationType === 'text'}"> <button type="button" class="btn btn-switch-type" @click="switchType('text')" :class="{'active': translationType === 'text'}">
<i class="material-icons">title</i> <i aria-hidden="true" class="material-icons">title</i>
<span class="btn-text">Translate Text</span> <span class="btn-text">Translate Text</span>
</button> </button>
<button type="button" class="btn btn-switch-type" @click="switchType('files')" :class="{'active': translationType === 'files'}"> <button type="button" class="btn btn-switch-type" @click="switchType('files')" :class="{'active': translationType === 'files'}">
<i class="material-icons">description</i> <i aria-hidden="true" class="material-icons">description</i>
<span class="btn-text">Translate Files</span> <span class="btn-text">Translate Files</span>
</button> </button>
</div> </div>
<form id="translation-form" class="col s12"> <form id="translation-form" class="col s12">
<div class="row mb-0"> <div class="row mb-0">
<div class="col s6 language-select"> <div class="col s6 language-select">
<span>Translate from</span> <span id="sourceLangLabel>Translate from</span>
<span v-if="detectedLangText !== ''">[[ detectedLangText ]]</span> <span v-if="detectedLangText !== ''">[[ detectedLangText ]]</span>
<select class="browser-default" v-model="sourceLang" ref="sourceLangDropdown" @change="handleInput"> <select aria-labelledby="sourceLangLabel" class="browser-default" v-model="sourceLang" ref="sourceLangDropdown" @change="handleInput">
<template v-for="option in langs"> <template v-for="option in langs">
<option :value="option.code">[[ option.name ]]</option> <option :value="option.code">[[ option.name ]]</option>
</template> </template>
@ -154,11 +154,11 @@
</div> </div>
<div class="col s6 language-select"> <div class="col s6 language-select">
<a href="javascript:void(0)" @click="swapLangs" class="btn-switch-language"> <a href="javascript:void(0)" @click="swapLangs" class="btn-switch-language" aria-label="Swap source and target languages">
<i class="material-icons">swap_horiz</i> <i class="material-icons">swap_horiz</i>
</a> </a>
<span>Translate into</span> <span id="targetLangLabel">Translate into</span>
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput"> <select aria-labelledby="targetLangLabel" class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<template v-for="option in targetLangs"> <template v-for="option in targetLangs">
<option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option> <option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option>
</template> </template>
@ -172,7 +172,7 @@
Text to translate Text to translate
</label> </label>
<textarea id="textarea1" v-model="inputText" @input="handleInput" ref="inputTextarea" dir="auto"></textarea> <textarea id="textarea1" v-model="inputText" @input="handleInput" ref="inputTextarea" dir="auto"></textarea>
<button class="btn-delete-text" title="Delete text" @click="deleteText"> <button class="btn-delete-text" title="Delete text" aria-label="Delete text" @click="deleteText">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
<div class="characters-limit-container" v-if="charactersLimit !== -1"> <div class="characters-limit-container" v-if="charactersLimit !== -1">
@ -185,7 +185,7 @@
</label> </label>
<textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" v-bind:readonly="suggestions && !isSuggesting"></textarea> <textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" v-bind:readonly="suggestions && !isSuggesting"></textarea>
<div class="actions"> <div class="actions">
<button v-if="suggestions && !loadingTranslation && inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation"> <button v-if="suggestions && !loadingTranslation && inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation" aria-label="Suggest translation">
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
</button> </button>
<button v-if="suggestions && !loadingTranslation && inputText.length && isSuggesting" class="btn-action btn-blue" @click="closeSuggestTranslation"> <button v-if="suggestions && !loadingTranslation && inputText.length && isSuggesting" class="btn-action btn-blue" @click="closeSuggestTranslation">
@ -195,7 +195,7 @@
<span>Send</span> <span>Send</span>
</button> </button>
<button v-if="!isSuggesting" class="btn-action btn-copy-translated" @click="copyText"> <button v-if="!isSuggesting" class="btn-action btn-copy-translated" @click="copyText">
<span>[[ copyTextLabel ]]</span> <i class="material-icons">content_copy</i> <span>[[ copyTextLabel ]]</span> <i class="material-icons" aria-hidden="true">content_copy</i>
</button> </button>
</div> </div>
<div class="position-relative"> <div class="position-relative">
@ -212,8 +212,8 @@
<form action="#"> <form action="#">
<div class="file-field input-field"> <div class="file-field input-field">
<div class="btn"> <div class="btn">
<span>File</span> <span id="fileLabel">File</span>
<input type="file" :accept="supportedFilesFormatFormatted" @change="handleInputFile" ref="fileInputRef"> <input aria-labelledby="fileLabel" type="file" :accept="supportedFilesFormatFormatted" @change="handleInputFile" ref="fileInputRef">
</div> </div>
<div class="file-path-wrapper hidden"> <div class="file-path-wrapper hidden">
<input class="file-path validate" type="text"> <input class="file-path validate" type="text">
@ -227,7 +227,7 @@
<div class="row mb-0"> <div class="row mb-0">
<div class="col s12"> <div class="col s12">
[[ inputFile.name ]] [[ inputFile.name ]]
<button v-if="loadingFileTranslation !== true" @click="removeFile" class="btn-flat"> <button v-if="loadingFileTranslation !== true" @click="removeFile" class="btn-flat" aria-label="Remove file">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
</div> </div>
@ -278,7 +278,7 @@
<h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4> <h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4>
<div id="download-btn-wrapper"> <div id="download-btn-wrapper">
<a id="download-btn" class="waves-effect waves-light btn btn-large teal darken-2" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer"> <a id="download-btn" class="waves-effect waves-light btn btn-large teal darken-2" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">
<i class="material-icons">cloud_download</i> <i aria-hidden="true" class="material-icons">cloud_download</i>
<span class="btn-text">Download</span> <span class="btn-text">Download</span>
</a> </a>
</div> </div>