mirror of
https://github.com/LibreTranslate/LibreTranslate.git
synced 2024-11-25 17:31:00 +00:00
Merge pull request #382 from nvda-es/accessibility
Use WAI-ARIA attributes to make the web interface more accessible
This commit is contained in:
Piero Toffanin
GitHub
commit
bdbf50f7cc
1 changed files with 17 additions and 17 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue