Slightly improve accessibility

src/app/components/Header.ts

@@ -5,6 +5,7 @@ import { Octicon } from './Octicon';
 import { Toggle } from './Toggle';
 import { languages } from '../../config.json'
 import { Tracker } from '../Tracker';
+import { locale } from '../Locales';
 
 export const Header = (view: View, title: string, homeLink = '/') => {
   const panelTogglesId = view.register(el => {
@@ -33,7 +34,7 @@ export const Header = (view: View, title: string, homeLink = '/') => {
   
   return `<header>
     <div class="header-title">
-      <a data-link href="${homeLink}" class="home-link">${Octicon.three_bars}</a>
+      <a data-link href="${homeLink}" class="home-link" aria-label="${locale('home')}">${Octicon.three_bars}</a>
       <h2>${title}</h2>
     </div>
     <nav>
@@ -42,12 +43,12 @@ export const Header = (view: View, title: string, homeLink = '/') => {
         <li>${Dropdown(view, 'globe', languages.map(l => [l.code, l.name]), App.language, Tracker.setLanguage)}</li>
         <li>${Toggle(view, [['dark', 'sun'], ['light', 'moon']], App.theme, Tracker.setTheme)}</li>
         <li>
-          <a data-link href="/settings/fields/">
+          <a data-link href="/settings/fields/" title="${locale('settings')}">
             ${Octicon.gear}
           </a>
         </li>
         <li class="dimmed">
-          <a href="https://github.com/misode/misode.github.io" target="_blank">
+          <a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" title="${locale('github')}">
             ${Octicon.mark_github}
           </a>
         </li>

src/app/hooks/renderHtml.ts

@@ -72,7 +72,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
       if (!Array.isArray(value)) value = []
       path.model.set(path, [...value, children.default()])
     })
-    const suffix = `<button class="add" data-id="${onAdd}">${Octicon.plus_circle}</button>`
+    const suffix = `<button class="add" data-id="${onAdd}" aria-label="${locale('button.add')}">${Octicon.plus_circle}</button>`
 
     let body = ''
     if (Array.isArray(value)) {
@@ -85,7 +85,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
           <div class="node-header">
             ${error(childPath, mounter)}
             ${help(childPath, mounter)}
-            <button class="remove" data-id="${removeId}">${Octicon.trashcan}</button>
+            <button class="remove" data-id="${removeId}" aria-label="${locale('button.remove')}">${Octicon.trashcan}</button>
             ${cPrefix}
             <label ${contextMenu(childPath, mounter)}>
               ${htmlEncode(pathLocale(path.contextPush('entry'), [`${index}`]))}
@@ -98,7 +98,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
       if (value.length > 2) {
         body += `<div class="node-entry">
           <div class="node node-header">
-            <button class="add" data-id="${onAddBottom}">${Octicon.plus_circle}</button>
+            <button class="add" data-id="${onAddBottom}" aria-label="${locale('button.add')}">${Octicon.plus_circle}</button>
           </div>
         </div>`
       }
@@ -118,7 +118,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
       const keyRendered = (blockState
         ? StringNode(null!, { enum: Object.keys(blockState.properties ?? {}) })
         : keys).hook(this, keyPath, keyPath.get() ?? '', mounter)
-      suffix = keyRendered[1] + `<button class="add" data-id="${onAdd}">${Octicon.plus_circle}</button>`
+      suffix = keyRendered[1] + `<button class="add" data-id="${onAdd}" aria-label="${locale('button.add')}">${Octicon.plus_circle}</button>`
     }
     let body = ''
     if (typeof value === 'object' && value !== undefined) {
@@ -134,7 +134,7 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
             <div class="node-header">
               ${error(childPath, mounter)}
               ${help(childPath, mounter)}
-              <button class="remove" data-id="${removeId}">${Octicon.trashcan}</button>
+              <button class="remove" data-id="${removeId}" aria-label="${locale('button.remove')}">${Octicon.trashcan}</button>
               ${cPrefix}
               <label ${contextMenu(childPath, mounter)}>
                 ${htmlEncode(key)}
@@ -168,9 +168,9 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
     let prefix = ''
     if (node.optional()) {
       if (value === undefined) {
-        prefix = `<button class="collapse closed" data-id="${mounter.onClick(() => path.model.set(path, node.default()))}">${Octicon.plus_circle}</button>`
+        prefix = `<button class="collapse closed" data-id="${mounter.onClick(() => path.model.set(path, node.default()))}" aria-label="${locale('button.expand')}">${Octicon.plus_circle}</button>`
       } else {
-        prefix = `<button class="collapse open" data-id="${mounter.onClick(() => path.model.set(path, undefined))}">${Octicon.trashcan}</button>`
+        prefix = `<button class="collapse open" data-id="${mounter.onClick(() => path.model.set(path, undefined))}" aria-label="${locale('button.collapse')}">${Octicon.trashcan}</button>`
       }
     }
     let suffix = ''

src/locales/en.json

@@ -1,11 +1,17 @@
 {
   "advancement": "Advancement",
+  "button.add": "Add",
+  "button.collapse": "Collapse",
+  "button.expand": "Expand",
+  "button.remove": "Remove",
   "copy": "Copy",
   "dimension-type": "Dimension Type",
   "dimension": "Dimension",
   "download": "Download",
   "error.block_state.missing_property": "Missing block property \"%0%\"",
   "fields": "Fields",
+  "github": "GitHub",
+  "home": "Home",
   "item-modifier": "Item Modifier",
   "language": "Language",
   "loot-table": "Loot Table",
@@ -13,6 +19,7 @@
   "predicate": "Predicate",
   "redo": "Redo",
   "reset": "Reset",
+  "settings": "Settings",
   "settings.fields.description": "Customize advanced field settings",
   "settings.fields.path": "Context",
   "settings.fields.name": "Name",