mirror/vanilla-todo
1
0
Fork 0
mirror of https://github.com/morris/vanilla-todo.git synced 2025-08-15 10:34:07 +02:00
Code Issues Releases Wiki Activity

fix basic accessibility things

Browse Source
This commit is contained in:
Morris Brodersen
2023-12-06 19:14:05 +01:00
parent db0fbb85ee
commit 1a6091560d
10 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -2,10 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta http-equiv="x-ua-compatible" content="ie=edge" />
name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1" />
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>VANILLA TODO</title> <title>VANILLA TODO</title>
<meta <meta

4
public/scripts/AppDatePicker.js
View File

@@ -30,11 +30,11 @@ export function AppDatePicker(el) {
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<h4 class="header"> <h4 class="header">
<button class="app-button -circle previousmonth"> <button class="app-button -circle previousmonth" title="Previous month">
<i class="app-icon" data-id="chevron-left-16"></i> <i class="app-icon" data-id="chevron-left-16"></i>
</button> </button>
<span class="month"></span> <span class="month"></span>
<button class="app-button -circle nextmonth"> <button class="app-button -circle nextmonth" title="Next month">
<i class="app-icon" data-id="chevron-right-16"></i> <i class="app-icon" data-id="chevron-right-16"></i>
</button> </button>
</h4> </h4>

2
public/scripts/TodoApp.js
View File

@@ -21,7 +21,7 @@ export function TodoApp(el) {
<div class="todo-frame -days"></div> <div class="todo-frame -days"></div>
<div class="app-collapsible"> <div class="app-collapsible">
<p class="bar"> <p class="bar">
<button class="app-button -circle toggle"> <button class="app-button -circle toggle" title="Show/hide custom todo-lists">
<i class="app-icon" data-id="chevron-up-24"></i> <i class="app-icon" data-id="chevron-up-24"></i>
</button> </button>
</p> </p>

8
public/scripts/TodoCustomList.js
View File

@@ -13,10 +13,12 @@ export function TodoCustomList(el) {
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<div class="header"> <div class="header">
<h3 class="title"></h3> <h2 class="title"></h2>
<p class="form"> <p class="form">
<input type="text" class="input use-focus-other"> <input type="text" class="input use-focus-other" aria-label="Title">
<button class="app-button delete"><i class="app-icon" data-id="trash-16"></i></button> <button class="app-button delete" title="Delete">
<i class="app-icon" data-id="trash-16"></i>
</button>
</p> </p>
</div> </div>
<div class="todo-list"></div> <div class="todo-list"></div>

4
public/scripts/TodoDay.js
View File

@@ -10,8 +10,8 @@ export function TodoDay(el) {
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<div class="header"> <div class="header">
<h3 class="dayofweek"></h3> <h2 class="dayofweek"></h3>
<h6 class="date"></h6> <h3 class="date"></h4>
</div> </div>
<div class="todo-list"></div> <div class="todo-list"></div>
`; `;

6
public/scripts/TodoFrameCustom.js
View File

@@ -11,12 +11,12 @@ export function TodoFrameCustom(el) {
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<div class="leftcontrols"> <div class="leftcontrols">
<p><button class="app-button -circle -xl back"><i class="app-icon" data-id="chevron-left-24"></i></button></p> <p><button class="app-button -circle -xl back" title="Previous"><i class="app-icon" data-id="chevron-left-24"></i></button></p>
</div> </div>
<div class="container"></div> <div class="container"></div>
<div class="rightcontrols"> <div class="rightcontrols">
<p><button class="app-button -circle -xl forward"><i class="app-icon" data-id="chevron-right-24"></i></button></p> <p><button class="app-button -circle -xl forward" title="Next"><i class="app-icon" data-id="chevron-right-24"></i></button></p>
<p><button class="app-button -circle -xl add"><i class="app-icon" data-id="plus-circle-24"></i></button></p> <p><button class="app-button -circle -xl add" title="Add custom list"><i class="app-icon" data-id="plus-circle-24"></i></button></p>
</div> </div>
`; `;

12
public/scripts/TodoFrameDays.js
View File

@@ -13,17 +13,17 @@ export function TodoFrameDays(el) {
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<nav class="leftcontrols"> <nav class="leftcontrols">
<p> <p>
<button class="app-button -circle -xl backward"> <button class="app-button -circle -xl backward" title="Previous day">
<i class="app-icon" data-id="chevron-left-24"></i> <i class="app-icon" data-id="chevron-left-24"></i>
</button> </button>
</p> </p>
<p> <p>
<button class="app-button fastbackward"> <button class="app-button fastbackward" title="Previous week">
<i class="app-icon -double" data-id="chevron-left-16"></i> <i class="app-icon -double" data-id="chevron-left-16"></i>
</button> </button>
</p> </p>
<p> <p>
<button class="app-button home"> <button class="app-button home" title="Today">
<i class="app-icon" data-id="home-16"></i> <i class="app-icon" data-id="home-16"></i>
</button> </button>
</p> </p>
@@ -31,17 +31,17 @@ export function TodoFrameDays(el) {
<div class="container"></div> <div class="container"></div>
<nav class="rightcontrols"> <nav class="rightcontrols">
<p> <p>
<button class="app-button -circle -xl forward"> <button class="app-button -circle -xl forward" title="Next day">
<i class="app-icon" data-id="chevron-right-24"></i> <i class="app-icon" data-id="chevron-right-24"></i>
</button> </button>
</p> </p>
<p> <p>
<button class="app-button fastforward"> <button class="app-button fastforward" title="Next week">
<i class="app-icon -double" data-id="chevron-right-16"></i> <i class="app-icon -double" data-id="chevron-right-16"></i>
</button> </button>
</p> </p>
<p> <p>
<button class="app-button pickdate"> <button class="app-button pickdate" title="Open calendar">
<i class="app-icon" data-id="calendar-16"></i> <i class="app-icon" data-id="calendar-16"></i>
</button> </button>
</p> </p>

8
public/scripts/TodoItem.js
View File

@@ -12,12 +12,14 @@ export function TodoItem(el) {
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<div class="checkbox"> <div class="checkbox">
<input type="checkbox"> <input type="checkbox" aria-label="Done">
</div> </div>
<p class="label"></p> <p class="label"></p>
<p class="form"> <p class="form">
<input type="text" class="input use-focus-other"> <input type="text" class="input use-focus-other" aria-label="Label">
<button class="app-button save"><i class="app-icon" data-id="check-16"></i></button> <button class="app-button save" title="Save">
<i class="app-icon" data-id="check-16"></i>
</button>
</p> </p>
`; `;

6
public/scripts/TodoItemInput.js
View File

@@ -7,8 +7,10 @@ export function TodoItemInput(el) {
let saveOnBlur = true; let saveOnBlur = true;
el.innerHTML = /* html */ ` el.innerHTML = /* html */ `
<input type="text" class="input use-focus-other"> <input type="text" class="input use-focus-other" aria-label="Label">
<button class="app-button save"><i class="app-icon" data-id="plus-24"></i></button> <button class="app-button save" title="Save">
<i class="app-icon" data-id="plus-24"></i>
</button>
`; `;
const inputEl = el.querySelector('.input'); const inputEl = el.querySelector('.input');

2
public/styles/vars.css
View File

@@ -16,7 +16,7 @@
--header-text: var(--grey1); --header-text: var(--grey1);
--header-bg: var(--white); --header-bg: var(--white);
--highlight-text: var(--red); --highlight-text: var(--red);
--disabled-text: var(--grey3); --disabled-text: var(--grey2);
--aside-text: var(--grey1); --aside-text: var(--grey1);
--button-text: var(--grey1); --button-text: var(--grey1);
--button-bg: transparent; --button-bg: transparent;