(style) unified styling for example buttons and tooltips for accessibility

assets/dark.scss

@@ -21,7 +21,8 @@ body[data-theme="dark"] {
 
     /* BUTTONS */
 
-    .btn-link { color: #fff; }
+    .btn-link { color: $primary-dark; }
+    .btn-link:hover { color: lighten($primary-dark, 10%); }
     .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
     .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
     .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; }

components/ExampleCategory.vue

@@ -1,14 +1,16 @@
 <template>
     <li v-if="pronoun">
         <Example :example="example" :pronoun="pronoun" :counter="counter" :link="link" :pronunciation="pronunciation" />
-        <button
+        <Tooltip :text="tooltipText">
-            v-if="hasDifferentExample"
+            <button
-            type="button"
+                v-if="hasDifferentExample"
-            class="btn btn-sm btn-link p-1"
+                type="button"
-            @click="selectDifferentExample()"
+                class="btn btn-sm btn-link p-1"
-        >
+                @click="selectDifferentExample()"
-            <Icon v="random" />
+            >
-        </button>
+                <Icon v="random" />
+            </button>
+        </Tooltip>
     </li>
 </template>
 
@@ -42,6 +44,12 @@ export default Vue.extend({
         hasDifferentExample(): boolean {
             return this.pronounsChoice.length > 1 || this.suitableExamples.length > 1;
         },
+        tooltipText(): string {
+            if (this.exampleCategory.name) {
+                return this.$t('pronouns.examples.shuffleNamed', { category: this.exampleCategory.name });
+            }
+            return this.$t('pronouns.examples.shuffle');
+        },
     },
     created() {
         this.selectPronounForExample(false);

components/PronunciationSpeaker.vue

@@ -1,13 +1,15 @@
 <template>
-    <a
+    <Tooltip :text="$t('pronunciation.play')">
-        :class="['mr-2', !pronunciation ? 'disabled' : '']"
+        <a
-        dir="ltr"
+            :class="['btn', 'btn-sm', 'btn-link', 'p-1', !pronunciation ? 'disabled' : '']"
-        :href="pronunciationLink"
+            dir="ltr"
-        target="_blank"
+            :href="pronunciationLink"
-        @click.prevent="pronounce"
+            target="_blank"
-    >
+            @click.prevent="pronounce"
-        <Icon :v="icon" /><sub v-if="name">{{ name }}</sub>
+        >
-    </a>
+            <Icon :v="icon" /><sub v-if="name">{{ name }}</sub>
+        </a>
+    </Tooltip>
 </template>
 
 

locale/_base/translations.suml

@@ -63,7 +63,10 @@ home:
 pronouns:
     header: 'Pronouns'
     headerLong: 'Pronouns'
-    examples: 'Example usage in sentences'
+    examples:
+        header: 'Example usage in sentences'
+        shuffle: 'Show different example'
+        shuffleNamed: 'Show different example for %category%'
     plural: 'Plural'
     intro: 'My pronouns are'
     normative: 'Normative'
@@ -91,6 +94,9 @@ pronouns:
     or: 'or'
     grammarTable: 'Table'
 
+pronunciation:
+    play: 'Play audio sample'
+
 sources:
     header: 'Sources'
     headerLong: 'Examples from cultural texts'

locale/ar/translations.suml

@@ -58,7 +58,8 @@ home:
 pronouns:
     header: 'الضمائر'
     headerLong: 'الضمائر'
-    examples: 'تُستعمل في الجمل كالآتي'
+    examples:
+        header: 'تُستعمل في الجمل كالآتي'
     plural: 'صيغة الجمع'
     intro: 'ضمائري هي'
     normative: 'المعياريه '

locale/de/translations.suml

@@ -61,7 +61,10 @@ home:
 pronouns:
     header: 'Pronomen'
     headerLong: 'Pronomen'
-    examples: 'Beispielsätze'
+    examples:
+        header: 'Beispielsätze'
+        shuffle: 'Anderen Beispielsatz anzeigen'
+        shuffleNamed: 'Anderen Beispielsatz für %category% anzeigen'
     plural: 'Plural'
     intro: 'Meine Pronomen sind'
     normative: 'Normativ'
@@ -94,6 +97,9 @@ pronouns:
     or: 'oder'
     grammarTable: 'Tabelle'
 
+pronunciation:
+    play: 'Hörbeispiel abspielen'
+
 sources:
     header: 'Quellen'
     headerLong: 'Beispiele aus Kulturtexten'

locale/en/translations.suml

@@ -63,7 +63,10 @@ home:
 pronouns:
     header: 'Pronouns'
     headerLong: 'Pronouns'
-    examples: 'Example usage in sentences'
+    examples:
+        header: 'Example usage in sentences'
+        shuffle: 'Show different example'
+        shuffleNamed: 'Show different example for %category%'
     plural: 'Plural'
     intro: 'My pronouns are'
     normative: 'Normative'
@@ -89,6 +92,9 @@ pronouns:
     sentence: >
         You can modify the default links so that the URL reads like a sentence; for example:
 
+pronunciation:
+    play: 'Play audio sample'
+
 sources:
     header: 'Sources'
     headerLong: 'Examples from cultural texts'

locale/eo/translations.suml

@@ -50,7 +50,8 @@ home:
 pronouns:
     header: 'Pronomoj'
     headerLong: 'Pronomoj'
-    examples: 'Ekzempla uzado en frazoj'
+    examples:
+        header: 'Ekzempla uzado en frazoj'
     plural: 'Pluralo'
     intro: 'Miaj pronomoj estas'
     normative: 'Norma'

locale/es/translations.suml

@@ -61,7 +61,8 @@ home:
 pronouns:
     header: 'Pronombres'
     headerLong: 'Pronombres'
-    examples: 'Ejemplos de uso en oraciones'
+    examples:
+        header: 'Ejemplos de uso en oraciones'
     plural: 'Plural'
     intro: 'Mis pronombres son'
     normative: 'Normativo'

locale/et/translations.suml

@@ -56,7 +56,8 @@ home:
 pronouns:
     header: 'Asesõnad'
     headerLong: 'Asesõnad'
-    examples: 'Kasutuse näide lausetes'
+    examples:
+        header: 'Kasutuse näide lausetes'
     plural: 'Mitmus'
     intro: 'Minu asesõnad on'
     normative: 'Normatiivne'

locale/fr/translations.suml

@@ -58,7 +58,8 @@ home:
 pronouns:
     header: 'Pronoms'
     headerLong: 'Pronoms'
-    examples: 'Exemple d’usage dans des phrases'
+    examples:
+        header: 'Exemple d’usage dans des phrases'
     plural: 'Pluriel'
     intro: 'Mes pronoms sont'
     normative: 'Normatif'

locale/gl/translations.suml

@@ -60,7 +60,8 @@ home:
 pronouns:
     header: 'Pronomes'
     headerLong: 'Pronomes'
-    examples: 'Exemplos de uso em frases'
+    examples:
+        header: 'Exemplos de uso em frases'
     plural: 'Plural'
     intro: 'Meus pronomes são'
     normative: 'Normativo'

locale/he/translations.suml

@@ -62,7 +62,8 @@ home:
 pronouns:
     header: 'Pronouns'
     headerLong: 'Pronouns'
-    examples: 'Example usage in sentences'
+    examples:
+        header: 'Example usage in sentences'
     plural: 'Plural'
     intro: 'My pronouns are'
     normative: 'Normative'

locale/it/translations.suml

@@ -60,7 +60,8 @@ home:
 pronouns:
     header: 'Pronomi'
     headerLong: 'Pronomi'
-    examples: 'Esempi pratici di utilizzo'
+    examples:
+        header: 'Esempi pratici di utilizzo'
     plural: 'Plurale'
     intro: 'I miei pronomi sono'
     normative: 'Normative'

locale/ja/translations.suml

@@ -44,7 +44,8 @@ home:
 pronouns:
     header: '三人称代名詞'
     headerLong: '三人称代名詞'
-    examples: '文章での使い方の例'
+    examples:
+        header: '文章での使い方の例'
     plural: '複数形'
     intro: '私の三人称代名詞は'
     normative: '規範的'

locale/ko/translations.suml

@@ -61,7 +61,8 @@ home:
 pronouns:
     header: '대명사'
     headerLong: '대명사'
-    examples: '문장안에 예'
+    examples:
+        header: '문장안에 예'
     plural: '복유의'
     intro: '나의 대명사는'
     normative: '규범적'

locale/lad/translations.suml

@@ -61,7 +61,8 @@ home:
 pronouns:
     header: 'Pronombres'
     headerLong: 'Pronombres'
-    examples: 'Enshemplos de uzo en frazas'
+    examples:
+        header: 'Enshemplos de uzo en frazas'
     plural: 'Plural'
     intro: 'Mis pronombres son'
     normative: 'Normativo'

locale/nl/translations.suml

@@ -59,7 +59,8 @@ home:
 pronouns:
     header: 'Voornaamwoorden'
     headerLong: 'Voornaamwoorden'
-    examples: 'Gebruiksvoorbeelden in zinnen'
+    examples:
+        header: 'Gebruiksvoorbeelden in zinnen'
     plural: 'Meervoud'
     intro: 'Mijn voornaamwoorden zijn'
     normative: 'Normatief'

locale/no/translations.suml

@@ -53,7 +53,8 @@ home:
 pronouns:
     header: 'Pronomen'
     headerLong: 'Pronomen'
-    examples: 'Eksempler i setninger'
+    examples:
+        header: 'Eksempler i setninger'
     plural: 'Flertall'
     intro: 'Mine pronomen er'
     normative: 'Normativ'

locale/pl/translations.suml

@@ -74,7 +74,8 @@ home:
 pronouns:
     header: 'Zaimki'
     headerLong: 'Niebinarne zaimki<br/> i inne formy'
-    examples: 'Przykłady użycia w zdaniu'
+    examples:
+        header: 'Przykłady użycia w zdaniu'
     plural: 'Liczba mnoga'
     intro: 'Moje zaimki to'
     normative: 'Normatywne'
@@ -282,7 +283,8 @@ nouns:
                     Słownik Neutratywów podaje odmianę pasującą do {/ono=„ono/jego”},
                     lecz możliwa jest też odmiana zgodna z pozostałymi opcjami:
 
-    examples: 'Przykłady'
+    examples:
+        header: 'Przykłady'
     dictionary: 'Słownik Neutratywów'
 
     approved: 'wpisów zatwierdzonych'

locale/pt/translations.suml

@@ -65,7 +65,8 @@ home:
 pronouns:
     header: 'Pronomes'
     headerLong: 'Pronomes'
-    examples: 'Exemplos de uso em frases'
+    examples:
+        header: 'Exemplos de uso em frases'
     plural: 'Plural'
     intro: 'Meu conjunto é'
     normative: 'Normativo'

locale/ro/translations.suml

@@ -61,7 +61,8 @@ home:
 pronouns:
     header: 'Pronume'
     headerLong: 'Listă cu pronume'
-    examples: 'Utilizarea pronumelor în propoziții'
+    examples:
+        header: 'Utilizarea pronumelor în propoziții'
     plural: 'Plural'
     intro: 'Pronumele mele sunt'
     normative: 'Normativ'

locale/ru/translations.suml

@@ -54,7 +54,8 @@ home:
 pronouns:
     header: 'Местоимения'
     headerLong: 'Местоимения и другие формы'
-    examples: 'Примеры употребления в предложениях'
+    examples:
+        header: 'Примеры употребления в предложениях'
     plural: 'Множественное число'
     intro: 'Мои местоимения'
     normative: 'Нормативное'

locale/sv/translations.suml

@@ -63,7 +63,8 @@ home:
 pronouns:
     header: 'Pronomen'
     headerLong: 'Pronomen'
-    examples: 'Exempel på användningar i meningar'
+    examples:
+        header: 'Exempel på användningar i meningar'
     plural: 'Plural'
     intro: 'Mina pronomen är'
     normative: 'Normativ'

locale/tr/translations.suml

@@ -50,7 +50,8 @@ home:
 pronouns:
     header: 'Zamirler'
     headerLong: 'Zamirler'
-    examples: 'Cumlede nasil gözükeceğini anlamak icin örnek kullanım'
+    examples:
+        header: 'Cumlede nasil gözükeceğini anlamak icin örnek kullanım'
     plural: 'Birden Çok'
     intro: 'Benim zamirlerim'
     normative: 'Genel Zamirler'

locale/ua/translations.suml

@@ -54,7 +54,8 @@ home:
 pronouns:
     header: 'Займенники'
     headerLong: 'Займенники та інші форми'
-    examples: 'Приклади використання у реченнях'
+    examples:
+        header: 'Приклади використання у реченнях'
     plural: 'Множина'
     intro: 'Мої займенники'
     normative: 'Нормативне'

locale/vi/translations.suml

@@ -63,7 +63,8 @@ home:
 pronouns:
     header: 'Các danh xưng'
     headerLong: 'Các danh xưng'
-    examples: 'Ví dụ trong câu'
+    examples:
+        header: 'Ví dụ trong câu'
     plural: 'Số nhiều'
     intro: 'Tôi dùng các danh xưng'
     normative: 'Chuẩn mực'

locale/yi/translations.suml

@@ -60,7 +60,8 @@ home:
 pronouns:
     header: 'פּראָנאָמען'
     headerLong: 'פּראָנאָמען'
-    examples: 'Example usage in sentences'
+    examples:
+        header: 'Example usage in sentences'
     plural: 'מערצאָל'
     intro: 'מײַנע פּראָנאָמען זענען'
     normative: 'נאָרמאַטיװ'

locale/zh/translations.suml

@@ -62,7 +62,8 @@ home:
 pronouns:
     header: '代詞'
     headerLong: '代詞'
-    examples: '例句用法'
+    examples:
+        header: '例句用法'
     plural: '複數'
     intro: '我的代詞是'
     normative: '規範'

routes/any.vue

@@ -29,7 +29,7 @@
             <section>
                 <h2 class="h4">
                     <Icon v="file-signature" />
-                    <T>pronouns.examples</T><T>quotation.colon</T>
+                    <T>pronouns.examples.header</T><T>quotation.colon</T>
                 </h2>
 
                 <ul>

routes/pronoun.vue

@@ -55,7 +55,7 @@
             <section>
                 <h2 class="h4">
                     <Icon v="file-signature" />
-                    <T>pronouns.examples</T><T>quotation.colon</T>
+                    <T>pronouns.examples.header</T><T>quotation.colon</T>
                 </h2>
 
                 <ul>
@@ -164,7 +164,7 @@ export default {
             ? head({
                 title: `${this.$t('pronouns.intro')}: ${this.selectedPronoun.name(this.glue)}`,
                 description: [
-                    this.$t('pronouns.examples', {}, false),
+                    this.$t('pronouns.examples.header', {}, false),
                     this.$t('pronouns.grammarTable', {}, false),
                     this.$t('sources.headerLong', {}, false),
                 ].filter((x) => !!x).join(', '),

routes/pronouns.vue

@@ -85,7 +85,7 @@
                                 </p>
                             </div>
                             <p>
-                                <T>pronouns.examples</T><T>quotation.colon</T>
+                                <T>pronouns.examples.header</T><T>quotation.colon</T>
                             </p>
                             <template v-for="{ examples, isHonorific } in examplesByHonorific">
                                 <ul>

src/missingTranslations.ts

@@ -82,6 +82,10 @@ export function listMissingTranslations(
             return false;
         }
 
+        if (!config.pronouns.exampleCategories && keyMatches('pronouns.examples.shuffleNamed')) {
+            return false;
+        }
+
         if (!config.pronouns.slashes && keyMatches('pronouns.slashes.')) {
             return false;
         }