!19 : Ajout des aria-label

This commit is contained in:
Damien Broqua 2022-02-23 13:19:55 +01:00
parent c92f465003
commit 49e8a2ab1e
3 changed files with 5 additions and 6 deletions

View file

@ -53,14 +53,14 @@
</script> </script>
</head> </head>
<body> <body>
<nav class="navbar" aria-label="main navigation"> <nav class="navbar" aria-label="Navigation principale">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="/"> <a class="navbar-item" href="/">
<img src="/img/logo.png" alt="Logo My Music Library"> <img src="/img/logo.png" alt="Logo My Music Library">
<span>My Music Library</span> <span>My Music Library</span>
</a> </a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar"> <a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>

View file

@ -6,10 +6,9 @@
<label for="q">Nom de l'album ou code barre</label> <label for="q">Nom de l'album ou code barre</label>
<div class="field has-addons"> <div class="field has-addons">
<input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus> <input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus>
<button class="button is-link" :disabled="loading"> <button class="button is-link" :disabled="loading" aria-label="Chercher">
<i class="icon-search" v-if="!loading"></i> <i class="icon-search" v-if="!loading"></i>
<i class="icon-spin animate-spin" v-if="loading"></i> <i class="icon-spin animate-spin" v-if="loading"></i>
<span class="is-hidden">Chercher</span>
</button> </button>
</div> </div>
</form> </form>
@ -58,7 +57,7 @@
<div class="modal-card"> <div class="modal-card">
<header> <header>
<div>{{details.artists_sort}} - {{details.title}}</div> <div>{{details.artists_sort}} - {{details.title}}</div>
<button aria-label="close" @click="toggleModal"></button> <button aria-label="Fermer" @click="toggleModal"></button>
</header> </header>
<section> <section>
<div class="grid grid-cols-2 gap-16"> <div class="grid grid-cols-2 gap-16">

View file

@ -75,7 +75,7 @@
<div class="total"> <div class="total">
<strong>Nombre total d'éléments : </strong>{{total}} <strong>Nombre total d'éléments : </strong>{{total}}
</div> </div>
<nav class="pagination" role="navigation" aria-label="pagination"> <nav class="pagination" role="navigation" aria-label="Pagination">
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a> <a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
<a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a> <a class="pagination-next" :class="{'is-disabled': !total || (page*limit) >= total}" @click="next">Suivant</a>
<ul class="pagination-list"> <ul class="pagination-list">