Skip to content

Commit

Permalink
fix: 🚨 fix html markup and accessibility issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamesNZL
JamesNZL committed Jul 16, 2022
1 parent 847ca95 commit b38a96b
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 25 deletions.
34 changes: 19 additions & 15 deletions src/options/options.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
<!DOCTYPE html>
<html id='options'>
<html lang='en-GB' id='options'>

<head>
<title>Notion Canvas Assignment Import Options</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Options | Notion Canvas Assignment Import</title>

<link rel='stylesheet' href='../stylesheet.css'>
<link rel='icon' type='image/x-icon' href='../favicon/favicon.svg'>
</head>

<body>
<nav>
<div>
<img src='../favicon/favicon.svg' width='40' height='40'>
<img src='../favicon/favicon.svg' alt='Extension Logo' width='40' height='40'>
<h1>Notion Assignment Import</h1>
</div>

Expand Down Expand Up @@ -66,7 +70,7 @@ <h3>Timezone</h3>
<input type='text' id='timezone' name='timezone' class='row'>
</div>

<button id='options-restore-timezone' class='button red hover row hidden'>Restore Default</button>
<button type='reset' id='options-restore-timezone' class='button red hover row hidden'>Restore Default</button>
</div>
</div>

Expand Down Expand Up @@ -127,7 +131,7 @@ <h3>Class Names</h3>
<input required type='text' id='date-element' name='date-element' class='row'>
</div>

<button id='options-restore-canvas-class-names' class='button red hover row hidden'>Restore Defaults</button>
<button type='reset' id='options-restore-canvas-class-names' class='button red hover row hidden'>Restore Defaults</button>
</div>

<h3>Class Values</h3>
Expand All @@ -142,7 +146,7 @@ <h3>Class Values</h3>
<input required type='text' id='status-not-available' name='status-not-available' class='row'>
</div>

<button id='options-restore-canvas-class-values' class='button red hover row hidden'>Restore Defaults</button>
<button type='reset' id='options-restore-canvas-class-values' class='button red hover row hidden'>Restore Defaults</button>
</div>

<h2>Course Code Overrides</h2>
Expand All @@ -158,7 +162,7 @@ <h2>Course Code Overrides</h2>
</div>
</div>

<button id='options-restore-canvas-course-codes' class='button red hover row hidden'>Restore Default</button>
<button type='reset' id='options-restore-canvas-course-codes' class='button red hover row hidden'>Restore Default</button>
</div>
</div>

Expand All @@ -169,7 +173,7 @@ <h2>Integration</h2>
<div class='tile'>
<div>
<label class='required' for='notion-oauth'>Authorisation</label>
<button id='notion-oauth' class='button accent hover emphasis row'>
<button type='button' id='notion-oauth' class='button accent hover emphasis row'>
<svg class='button-icon' viewBox='0 0 516 518' width='516' height='518' xmlns='http://www.w3.org/2000/svg' version='1.1'>
<path d='m92.84072,518.47521c-20.273,0.05078 -40.016,-6.5039 -56.234,-18.668c-21.254,-15.797 -34.547,-40.086 -36.398,-66.5c-1.8672,-28.719 8.8633,-56.832 29.398,-77l159.37,-158.43c2.2695,-2.4492 3.3008,-5.7969 2.8008,-9.0977c-4.6562,-30.066 -0.60547,-60.832 11.664,-88.668c11.398,-26.605 29.566,-49.762 52.699,-67.16c23.129,-17.398 50.414,-28.434 79.137,-32.008c48.293,-5.2109 96.398,11.344 131.26,45.168s52.859,81.406 49.109,129.83c-2.4414,28.641 -12.34,56.141 -28.715,79.762c-16.379,23.621 -38.656,42.543 -64.621,54.871c-28.738,14.754 -61.375,20.141 -93.332,15.402c-3.2227,-0.42969 -6.4727,0.59766 -8.8672,2.8008l-41.066,41.301l0,-0.00391c-10.918,11.02 -24.801,18.625 -39.961,21.898c-15.164,3.2734 -30.949,2.0703 -45.438,-3.4648l2.5664,19.367c3.2656,25.039 -5.3672,50.16 -23.336,67.902l-14.23,15.164c-17.426,17.527 -41.086,27.43 -65.801,27.535l-0.005,-0.00039zm259.46,-470.87l-12.133,0c-41.723,4.8242 -77.727,31.492 -94.5,70c-8.7539,19.688 -11.668,41.473 -8.3984,62.766c2.7617,18.039 -3.2148,36.316 -16.102,49.234l-158.66,159.6c-10.867,10.617 -16.57,25.438 -15.637,40.598c0.81641,12.906 7.3086,24.785 17.734,32.434c8.9805,6.793 20.117,10.113 31.352,9.3398c11.238,-0.77344 21.812,-5.582 29.781,-13.539l16.566,-15.398c7.457,-7.4766 10.996,-18.008 9.5664,-28.469l-3.0352,-23.332l0.00391,0c-1.4609,-10.48 0.875,-21.137 6.5859,-30.043c5.7109,-8.9102 14.418,-15.48 24.551,-18.531c10.129,-3.0469 21.02,-2.3711 30.695,1.9062c6.1953,2.6562 13.047,3.3867 19.664,2.0938c6.6172,-1.2891 12.691,-4.5391 17.438,-9.3281l41.301,-41.301l0,0.00391c12.746,-11.82 30.164,-17.227 47.363,-14.703c22.465,3.3281 45.41,-0.50781 65.57,-10.965c18.723,-8.9102 34.77,-22.594 46.523,-39.676c11.758,-17.078 18.805,-36.953 20.441,-57.625c2.3359,-32.371 -8.9141,-64.25 -31.055,-87.98c-22.137,-23.73 -53.156,-37.172 -85.613,-37.086l-0.00161,0.00039z' />
<path d='m375.64072,164.27521c0,12.887 -10.449,23.332 -23.336,23.332s-23.332,-10.445 -23.332,-23.332s10.445,-23.336 23.332,-23.336s23.336,10.449 23.336,23.336' />
Expand All @@ -187,7 +191,7 @@ <h2>Integration</h2>
<label class='required' for='database-id'>Database (<a target='_blank' href='https://jamesnzl-sandbox.notion.site/c4d73bebd39c4103b96b2edb8be9e0bd'>Notion Template</a>)</label>
<select required id='database-id' name='database-id' class='row'></select>

<button id='refresh-database-select' class='button green hover row'>Refresh</button>
<button type='button' id='refresh-database-select' class='button green hover row'>Refresh</button>
</div>
</div>

Expand Down Expand Up @@ -229,7 +233,7 @@ <h3 class='hidden'>Property Names</h3>
<select id='notion-property-span' name='notion-property-span' class='row'></select>
</div>

<button id='options-restore-notion-property-names' class='button red hover row hidden'>Restore Defaults</button>
<button type='reset' id='options-restore-notion-property-names' class='button red hover row hidden'>Restore Defaults</button>
</div>

<h3 class='hidden'>Property Values</h3>
Expand All @@ -239,7 +243,7 @@ <h3 class='hidden'>Property Values</h3>
<select id='notion-category-canvas' name='notion-category-canvas' class='row'></select>
</div>

<button id='options-restore-notion-property-values' class='button red hover row hidden'>Restore Defaults</button>
<button type='reset' id='options-restore-notion-property-values' class='button red hover row hidden'>Restore Defaults</button>
</div>

<h2>Page Emojis</h2>
Expand All @@ -255,7 +259,7 @@ <h2>Page Emojis</h2>
</div>
</div>

<button id='options-restore-notion-emojis' class='button red hover row hidden'>Restore Default</button>
<button type='reset' id='options-restore-notion-emojis' class='button red hover row hidden'>Restore Default</button>
</div>
</div>

Expand All @@ -265,16 +269,16 @@ <h1 class='hidden'>Actions</h1>
<div class='tile hidden'>
<div>
<label for='options-restore-all'>Restore All Defaults</label>
<button id='options-restore-all' class='button red hover row hidden'>Restore All Defaults</button>
<button type='reset' id='options-restore-all' class='button red hover row hidden'>Restore All Defaults</button>
</div>

<div>
<label for='options-undo-all'>Restore Saved Options</label>
<button id='options-undo-all' class='button red hover row hidden'>Restore Saved Options</button>
<button type='reset' id='options-undo-all' class='button red hover row hidden'>Restore Saved Options</button>
</div>
</div>

<button class='button outline green emphasis row' id='save-button'>Validate and Save</button>
<button type='submit' class='button outline green emphasis row' id='save-button'>Validate and Save</button>
</div>

<script type='module' src='options.js'></script>
Expand Down
25 changes: 15 additions & 10 deletions src/popup/popup.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<!DOCTYPE html>
<html id='popup'>
<html lang='en-GB' id='popup'>

<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Notion Canvas Assignment Import</title>

<link rel='stylesheet' href='../stylesheet.css'>
</head>

<body>
<div class='row'>
<h1>Notion Assignment Import</h1>
<a href='#' id='options-icon'>
<a href='#' title='Configure Options' id='options-icon'>
<svg width='513' height='513' viewBox='0 0 513 513' xmlns='http://www.w3.org/2000/svg' version='1.1'>
<path d='m396.67,233.336l-280,0c-41.68,0 -80.195,-22.238 -101.04,-58.336c-20.84,-36.094 -20.84,-80.57 0,-116.66c20.84,-36.098 59.355,-58.336 101.04,-58.336l280,0c41.68,0 80.195,22.238 101.04,58.336c20.84,36.094 20.84,80.57 0,116.66c-20.84,36.098 -59.355,58.336 -101.04,58.336zm-280,-186.67c-25.008,0 -48.117,13.344 -60.621,35s-12.504,48.344 0,70s35.613,35 60.621,35l280,0c25.008,0 48.117,-13.344 60.621,-35s12.504,-48.344 0,-70s-35.613,-35 -60.621,-35l-280,0z' />
<path d='m396.67,513.336l-280,0c-41.68,0 -80.195,-22.238 -101.04,-58.336c-20.84,-36.094 -20.84,-80.57 0,-116.66c20.84,-36.098 59.355,-58.336 101.04,-58.336l280,0c41.68,0 80.195,22.238 101.04,58.336c20.84,36.094 20.84,80.57 0,116.66c-20.84,36.098 -59.355,58.336 -101.04,58.336zm-280,-186.67c-25.008,0 -48.117,13.344 -60.621,35s-12.504,48.344 0,70s35.613,35 60.621,35l280,0c25.008,0 48.117,-13.344 60.621,-35s12.504,-48.344 0,-70s-35.613,-35 -60.621,-35l-280,0z' />
Expand All @@ -21,7 +26,7 @@ <h1>Notion Assignment Import</h1>

<div>
<div class='row'>
<button class='button accent hover emphasis' id='parse-button'>
<button type='button' class='button accent hover emphasis' id='parse-button'>
<svg class='button-icon' width='513' height='513' viewBox='0 0 513 513' xmlns='http://www.w3.org/2000/svg' version='1.1'>
<path d='m419.996,513.338l-233.33,0c-24.754,0 -48.492,-9.8359 -65.996,-27.34c-17.504,-17.5 -27.336,-41.242 -27.336,-65.996l0,-233.33c0,-24.754 9.832,-48.492 27.336,-65.996s41.242,-27.336 65.996,-27.336l233.33,0c24.754,0 48.496,9.832 65.996,27.336c17.504,17.504 27.34,41.242 27.34,65.996l0,233.33c0,24.754 -9.8359,48.496 -27.34,65.996c-17.5,17.504 -41.242,27.34 -65.996,27.34zm-233.33,-373.34c-12.375,0 -24.246,4.918 -33,13.668c-8.75,8.7539 -13.668,20.625 -13.668,33l0,233.33c0,12.379 4.918,24.246 13.668,33c8.7539,8.75 20.625,13.668 33,13.668l233.33,0c12.379,0 24.246,-4.918 33,-13.668c8.75,-8.7539 13.668,-20.621 13.668,-33l0,-233.33c0,-12.375 -4.918,-24.246 -13.668,-33c-8.7539,-8.75 -20.621,-13.668 -33,-13.668l-233.33,0z' />
<path d='m93.336,419.998c-24.754,0 -48.496,-9.832 -65.996,-27.336c-17.504,-17.504 -27.34,-41.242 -27.34,-65.996l0,-233.33c0,-24.754 9.8359,-48.496 27.34,-65.996c17.5,-17.504 41.242,-27.34 65.996,-27.34l233.33,0c24.754,0 48.492,9.8359 65.996,27.34c17.504,17.5 27.336,41.242 27.336,65.996l-46.664,0c0,-12.379 -4.918,-24.246 -13.668,-33c-8.7539,-8.75 -20.625,-13.668 -33,-13.668l-233.33,0c-12.379,0 -24.246,4.918 -33,13.668c-8.75,8.7539 -13.668,20.621 -13.668,33l0,233.33c0,12.375 4.918,24.246 13.668,33c8.7539,8.75 20.621,13.668 33,13.668l0,46.664z' />
Expand All @@ -31,7 +36,7 @@ <h1>Notion Assignment Import</h1>
</div>

<div class='row hidden'>
<button class='button accent hover emphasis' id='notion-oauth-button'>
<button type='button' class='button accent hover emphasis' id='notion-oauth-button'>
<svg class='button-icon' viewBox='0 0 516 518' width='516' height='518' xmlns='http://www.w3.org/2000/svg' version='1.1'>
<path d='m92.84072,518.47521c-20.273,0.05078 -40.016,-6.5039 -56.234,-18.668c-21.254,-15.797 -34.547,-40.086 -36.398,-66.5c-1.8672,-28.719 8.8633,-56.832 29.398,-77l159.37,-158.43c2.2695,-2.4492 3.3008,-5.7969 2.8008,-9.0977c-4.6562,-30.066 -0.60547,-60.832 11.664,-88.668c11.398,-26.605 29.566,-49.762 52.699,-67.16c23.129,-17.398 50.414,-28.434 79.137,-32.008c48.293,-5.2109 96.398,11.344 131.26,45.168s52.859,81.406 49.109,129.83c-2.4414,28.641 -12.34,56.141 -28.715,79.762c-16.379,23.621 -38.656,42.543 -64.621,54.871c-28.738,14.754 -61.375,20.141 -93.332,15.402c-3.2227,-0.42969 -6.4727,0.59766 -8.8672,2.8008l-41.066,41.301l0,-0.00391c-10.918,11.02 -24.801,18.625 -39.961,21.898c-15.164,3.2734 -30.949,2.0703 -45.438,-3.4648l2.5664,19.367c3.2656,25.039 -5.3672,50.16 -23.336,67.902l-14.23,15.164c-17.426,17.527 -41.086,27.43 -65.801,27.535l-0.005,-0.00039zm259.46,-470.87l-12.133,0c-41.723,4.8242 -77.727,31.492 -94.5,70c-8.7539,19.688 -11.668,41.473 -8.3984,62.766c2.7617,18.039 -3.2148,36.316 -16.102,49.234l-158.66,159.6c-10.867,10.617 -16.57,25.438 -15.637,40.598c0.81641,12.906 7.3086,24.785 17.734,32.434c8.9805,6.793 20.117,10.113 31.352,9.3398c11.238,-0.77344 21.812,-5.582 29.781,-13.539l16.566,-15.398c7.457,-7.4766 10.996,-18.008 9.5664,-28.469l-3.0352,-23.332l0.00391,0c-1.4609,-10.48 0.875,-21.137 6.5859,-30.043c5.7109,-8.9102 14.418,-15.48 24.551,-18.531c10.129,-3.0469 21.02,-2.3711 30.695,1.9062c6.1953,2.6562 13.047,3.3867 19.664,2.0938c6.6172,-1.2891 12.691,-4.5391 17.438,-9.3281l41.301,-41.301l0,0.00391c12.746,-11.82 30.164,-17.227 47.363,-14.703c22.465,3.3281 45.41,-0.50781 65.57,-10.965c18.723,-8.9102 34.77,-22.594 46.523,-39.676c11.758,-17.078 18.805,-36.953 20.441,-57.625c2.3359,-32.371 -8.9141,-64.25 -31.055,-87.98c-22.137,-23.73 -53.156,-37.172 -85.613,-37.086l-0.00161,0.00039z' />
<path d='m375.64072,164.27521c0,12.887 -10.449,23.332 -23.336,23.332s-23.332,-10.445 -23.332,-23.332s10.445,-23.336 23.332,-23.336s23.336,10.449 23.336,23.336' />
Expand All @@ -41,7 +46,7 @@ <h1>Notion Assignment Import</h1>
</div>

<div class='row hidden'>
<button class='button accent hover emphasis' id='configure-database-button'>
<button type='button' class='button accent hover emphasis' id='configure-database-button'>
<svg class='button-icon' width='513' height='513' viewBox='0 0 513 513' xmlns='http://www.w3.org/2000/svg' version='1.1'>
<path d='m396.67,233.336l-280,0c-41.68,0 -80.195,-22.238 -101.04,-58.336c-20.84,-36.094 -20.84,-80.57 0,-116.66c20.84,-36.098 59.355,-58.336 101.04,-58.336l280,0c41.68,0 80.195,22.238 101.04,58.336c20.84,36.094 20.84,80.57 0,116.66c-20.84,36.098 -59.355,58.336 -101.04,58.336zm-280,-186.67c-25.008,0 -48.117,13.344 -60.621,35s-12.504,48.344 0,70s35.613,35 60.621,35l280,0c25.008,0 48.117,-13.344 60.621,-35s12.504,-48.344 0,-70s-35.613,-35 -60.621,-35l-280,0z' />
<path d='m396.67,513.336l-280,0c-41.68,0 -80.195,-22.238 -101.04,-58.336c-20.84,-36.094 -20.84,-80.57 0,-116.66c20.84,-36.098 59.355,-58.336 101.04,-58.336l280,0c41.68,0 80.195,22.238 101.04,58.336c20.84,36.094 20.84,80.57 0,116.66c-20.84,36.098 -59.355,58.336 -101.04,58.336zm-280,-186.67c-25.008,0 -48.117,13.344 -60.621,35s-12.504,48.344 0,70s35.613,35 60.621,35l280,0c25.008,0 48.117,-13.344 60.621,-35s12.504,-48.344 0,-70s-35.613,-35 -60.621,-35l-280,0z' />
Expand All @@ -53,7 +58,7 @@ <h1>Notion Assignment Import</h1>
</div>

<div class='row'>
<button class='button accent hover emphasis' id='export-button'>
<button type='submit' class='button accent hover emphasis' id='export-button'>
<svg class='button-icon' viewBox='0 0 513 513' width='513' height='513' xmlns='http://www.w3.org/2000/svg' version='1.1'>
<path d='m489.996,192.9686c-6.1875,0 -12.121,-2.4609 -16.496,-6.8359c-4.3789,-4.375 -6.8359,-10.309 -6.8359,-16.5l0,-99.633c0,-6.1875 -2.457,-12.121 -6.8359,-16.496c-4.375,-4.3789 -10.309,-6.8359 -16.496,-6.8359l-93.336,0c-6.1875,0 -12.121,-2.457 -16.496,-6.8359c-4.3789,-4.375 -6.8359,-10.309 -6.8359,-16.496c0,-6.1914 2.457,-12.125 6.8359,-16.5c4.375,-4.375 10.309,-6.8359 16.496,-6.8359l93.336,0c18.562,0 36.367,7.375 49.496,20.504c13.129,13.129 20.504,30.934 20.504,49.496l0,99.633c0,6.1914 -2.4609,12.125 -6.8359,16.5s-10.309,6.8359 -16.5,6.8359l-0.0003,-0.0003z' />
<path d='m209.996,303.3386c-4.3438,-4.375 -6.7852,-10.285 -6.7852,-16.453c0,-6.1641 2.4414,-12.078 6.7852,-16.449l263.43,-263.66l33.133,33.133l-263.66,263.43c-4.3711,4.3438 -10.285,6.7852 -16.449,6.7852c-6.168,0 -12.078,-2.4414 -16.453,-6.7852l-0.001,-0.001z' />
Expand All @@ -69,12 +74,12 @@ <h3>Saved Assignments</h3>

<div class='tile'>
<div class='row'>
<button class='button' id='list-assignments-button'>Expand</button>
<button class='button hidden' id='list-courses-button'>Collapse</button>
<button type='button' class='button' id='list-assignments-button'>Expand</button>
<button type='button' class='button hidden' id='list-courses-button'>Collapse</button>

<button class='button hidden' id='copy-json-button'>Copy <code>JSON</code></button>
<button type='button' class='button hidden' id='copy-json-button'>Copy <code>JSON</code></button>

<button class='button red hover' id='clear-storage-button'>Clear</button>
<button type='reset' class='button red hover' id='clear-storage-button'>Clear</button>
</div>

<div id='saved-courses-list'></div>
Expand Down

0 comments on commit b38a96b

Please sign in to comment.