diff --git a/app.css b/app.css index 15a298f..45ee616 100644 --- a/app.css +++ b/app.css @@ -225,6 +225,9 @@ dialog::backdrop { background: rgba(22, 23, 26, .55); } .loginform input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(42, 120, 214, .25); } .loginform .btn { min-height: 44px; width: 100%; margin-top: 10px; font-size: 15px; font-weight: 600; background: #f4f4f1; border-color: #f4f4f1; color: var(--ink); } .loginform .btn:hover { background: #fff; border-color: #fff; color: var(--ink); } +.signin .ja { display: none; font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; letter-spacing: 0.1em; } +.signin:hover:not(:disabled) .en { display: none; } +.signin:hover:not(:disabled) .ja { display: inline; } .loginform .err-text { color: #ff8a80; } .loginform .err-text:empty { display: none; } .loginfoot { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8d8e93; } diff --git a/app.js b/app.js index 593da03..03c8464 100644 --- a/app.js +++ b/app.js @@ -437,7 +437,9 @@ const err = h('p', { class: 'err-text', role: 'alert' }); const user = h('input', { id: 'u', autocomplete: 'username', value: 'admin', required: true }); const pw = h('input', { id: 'p', type: 'password', autocomplete: 'current-password', required: true }); - const btn = h('button', { type: 'submit', class: 'btn primary' }, 'Sign in'); + // On hover the label turns into its Japanese reading; screen readers keep "Sign in". + const btn = h('button', { type: 'submit', class: 'btn primary signin' }, + h('span', { class: 'en' }, 'Sign in'), h('span', { class: 'ja', lang: 'ja', 'aria-hidden': 'true' }, 'サインイン')); const form = h('form', { class: 'loginform', onSubmit: async (e) => { e.preventDefault(); err.textContent = '';