Some fixes.

- Use ISO-630 library for native language names
- Add sr-only to svg tooltips. Fixes #218
- Change support link and icon.

package.json

@@ -67,6 +67,7 @@
     "eslint": "^7.20.0",
     "eslint-plugin-prettier": "^3.3.1",
     "husky": "^5.1.0",
+    "iso-639-1": "^2.1.9",
     "lemmy-js-client": "0.10.0-rc.10",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.3.8",

src/shared/components/icon.tsx

@@ -13,7 +13,9 @@ export class Icon extends Component<IconProps, any> {
   render() {
     return (
       <svg class={`icon ${this.props.classes}`}>
+        <div class="sr-only">
           <title>{this.props.icon}</title>
+        </div>
         <use xlinkHref={`#icon-${this.props.icon}`}></use>
       </svg>
     );

src/shared/components/navbar.tsx

@@ -262,7 +262,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   title={i18n.t("support_lemmy")}
                   href={supportLemmyUrl}
                 >
-                  <Icon icon="beer" classes="small" />
+                  <Icon icon="heart" classes="small" />
                 </a>
               </li>
             </ul>

src/shared/components/person.tsx

@@ -1,6 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import { Subscription } from "rxjs";
+import ISO6391 from "iso-639-1";
 import {
   UserOperation,
   SortType,
@@ -536,8 +537,10 @@ export class Person extends Component<any, PersonState> {
                   <option disabled aria-hidden="true">
                     ──
                   </option>
-                  {languages.map(lang => (
-                    <option value={lang.code}>{lang.name}</option>
+                  {languages.sort().map(lang => (
+                    <option value={lang.code}>
+                      {ISO6391.getNativeName(lang.code) || lang.code}
+                    </option>
                   ))}
                 </select>
               </div>

src/shared/utils.ts

@@ -78,7 +78,7 @@ export const favIconPngUrl = "/static/assets/apple-touch-icon.png";
 // export const defaultFavIcon = `${window.location.protocol}//${window.location.host}${favIconPngUrl}`;
 export const repoUrl = "https://github.com/LemmyNet";
 export const joinLemmyUrl = "https://join.lemmy.ml";
-export const supportLemmyUrl = "https://join.lemmy.ml/sponsors";
+export const supportLemmyUrl = "https://join.lemmy.ml/support";
 export const docsUrl = "https://join.lemmy.ml/docs/en/index.html";
 export const helpGuideUrl = "https://join.lemmy.ml/docs/en/about/guide.html"; // TODO find a way to redirect to the non-en folder
 export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`;
@@ -91,39 +91,39 @@ export const fetchLimit = 20;
 export const mentionDropdownFetchLimit = 10;
 
 export const languages = [
-  { code: "ca", name: "Català" },
-  { code: "en", name: "English" },
-  { code: "el", name: "Ελληνικά" },
-  { code: "eu", name: "Euskara" },
-  { code: "eo", name: "Esperanto" },
-  { code: "es", name: "Español" },
-  { code: "da", name: "Dansk" },
-  { code: "de", name: "Deutsch" },
-  { code: "ga", name: "Gaeilge" },
-  { code: "gl", name: "Galego" },
-  { code: "hr", name: "hrvatski" },
-  { code: "hu", name: "Magyar Nyelv" },
-  { code: "ka", name: "ქართული ენა" },
-  { code: "ko", name: "한국어" },
-  { code: "km", name: "ភាសាខ្មែរ" },
-  { code: "hi", name: "मानक हिन्दी" },
-  { code: "fa", name: "فارسی" },
-  { code: "ja", name: "日本語" },
-  { code: "oc", name: "Occitan" },
-  { code: "pl", name: "Polski" },
-  { code: "pt_BR", name: "Português Brasileiro" },
-  { code: "zh", name: "中文" },
-  { code: "fi", name: "Suomi" },
-  { code: "fr", name: "Français" },
-  { code: "sv", name: "Svenska" },
-  { code: "sq", name: "Shqip" },
-  { code: "sr_Latn", name: "srpski" },
-  { code: "th", name: "ภาษาไทย" },
-  { code: "tr", name: "Türkçe" },
-  { code: "uk", name: "Українська Mова" },
-  { code: "ru", name: "Русский" },
-  { code: "nl", name: "Nederlands" },
-  { code: "it", name: "Italiano" },
+  { code: "ca" },
+  { code: "en" },
+  { code: "el" },
+  { code: "eu" },
+  { code: "eo" },
+  { code: "es" },
+  { code: "da" },
+  { code: "de" },
+  { code: "ga" },
+  { code: "gl" },
+  { code: "hr" },
+  { code: "hu" },
+  { code: "ka" },
+  { code: "ko" },
+  { code: "km" },
+  { code: "hi" },
+  { code: "fa" },
+  { code: "ja" },
+  { code: "oc" },
+  { code: "pl" },
+  { code: "pt_BR" },
+  { code: "zh" },
+  { code: "fi" },
+  { code: "fr" },
+  { code: "sv" },
+  { code: "sq" },
+  { code: "sr_Latn" },
+  { code: "th" },
+  { code: "tr" },
+  { code: "uk" },
+  { code: "ru" },
+  { code: "nl" },
+  { code: "it" },
 ];
 
 export const themes = [
@@ -381,7 +381,6 @@ export function getLanguage(override?: string): string {
   }
 }
 
-// TODO
 export function getBrowserLanguage(): string {
   return navigator.language;
 }

yarn.lock

@@ -4833,6 +4833,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+iso-639-1@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-2.1.9.tgz#e41b11d4f1808e5316d0252c3fa16eeb9b37bb58"
+  integrity sha512-owRu9up+Cpx/hwSzm83j6G8PtC7U99UCtPVItsafefNfEgMl+pi8KBwhXwJkJfp6IouyYWFxj8n24SvCWpKZEQ==
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"