mirror/vanilla-todo
1
0
Fork 0
mirror of https://github.com/morris/vanilla-todo.git synced 2025-08-14 10:05:49 +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">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>VANILLA TODO</title>
<meta

4
public/scripts/AppDatePicker.js
View File

@@ -30,11 +30,11 @@ export function AppDatePicker(el) {
el.innerHTML = /* html */ `
<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>
</button>
<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>
</button>
</h4>

2
public/scripts/TodoApp.js
View File

@@ -21,7 +21,7 @@ export function TodoApp(el) {
<div class="todo-frame -days"></div>
<div class="app-collapsible">
<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>
</button>
</p>

8
public/scripts/TodoCustomList.js
View File

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

4
public/scripts/TodoDay.js
View File

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

6
public/scripts/TodoFrameCustom.js
View File

@@ -11,12 +11,12 @@ export function TodoFrameCustom(el) {
el.innerHTML = /* html */ `
<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 class="container"></div>
<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 add"><i class="app-icon" data-id="plus-circle-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" title="Add custom list"><i class="app-icon" data-id="plus-circle-24"></i></button></p>
</div>
`;

12
public/scripts/TodoFrameDays.js
View File

@@ -13,17 +13,17 @@ export function TodoFrameDays(el) {
el.innerHTML = /* html */ `
<nav class="leftcontrols">
<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>
</button>
</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>
</button>
</p>
<p>
<button class="app-button home">
<button class="app-button home" title="Today">
<i class="app-icon" data-id="home-16"></i>
</button>
</p>
@@ -31,17 +31,17 @@ export function TodoFrameDays(el) {
<div class="container"></div>
<nav class="rightcontrols">
<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>
</button>
</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>
</button>
</p>
<p>
<button class="app-button pickdate">
<button class="app-button pickdate" title="Open calendar">
<i class="app-icon" data-id="calendar-16"></i>
</button>
</p>

8
public/scripts/TodoItem.js
View File

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

6
public/scripts/TodoItemInput.js
View File

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

2
public/styles/vars.css
View File

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