feat: enhance accessibility and UI feedback

Added a noscript alert message for users with JavaScript disabled, informing them about the limitations and manual controls available. Improved UI spacing with an additional margin in the conversion button section. Adjusted CSS padding for better visual alignment. Expanded Webpack safelist to include alert classes for proper styling.
This commit is contained in:
Kumi 2024-08-10 16:43:57 +02:00
parent 77c41c08c2
commit 227d56a2bd
No known key found for this signature in database
GPG key ID: ECBCC9082395383F
3 changed files with 10 additions and 2 deletions

View file

@ -167,7 +167,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
<input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
</div>
<div class="equals-box">
<div class="equals-box mb-3">
<button id="convertXMRToFiat" type="submit" name="direction" value="0" class="btn btn-arrow">
<span class="equals-text">&darr;</span>
</button>
@ -194,6 +194,13 @@ foreach (array_reverse($preferred_currencies) as $currency) {
</div>
</form>
<noscript>
<div class="alert alert-warning" role="alert">
<p>Looks like you have JavaScript disabled. You can still use this tool, but you won't be able to use the &#128203; buttons to automatically copy the results to your clipboard.</p>
<p>Use the &darr; button to convert XMR to fiat, or the &uarr; button to convert fiat to XMR.</p>
</div>
</noscript>
<hr class="gold" />
<small class="cursor-default text-white text-info" lang="<?php echo $lang_meta; ?>">
<?php echo $info;

View file

@ -51,6 +51,7 @@ input.form-control {
color: #e9ecef;
font-weight: 800;
font-size: 42px;
padding-bottom: 1;
}
.btn-arrow {

View file

@ -31,7 +31,7 @@ module.exports = {
paths: glob.sync([
path.join(__dirname, 'index.php')
]),
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow']
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow', 'alert', 'alert-warning']
})
]
};