Skip to content

Commit 4bf845e

Browse files
mfranzkemfranzke
authored
Refactor optimized html (#1439)
* refactor: let's use a consistent self-enclosing tag format * refactor: always define a buttons type compare to e.g. https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9
1 parent e5c6950 commit 4bf845e

File tree

29 files changed

+88
-73
lines changed

29 files changed

+88
-73
lines changed

‎packages/core/test/files/_meta/_head.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html class="{{ htmlClass }}">
33
<head>
44
<title>{{ title }}</title>
5-
<meta charset="UTF-8">
5+
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width" />
77

88
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />

‎packages/core/test/files/_meta/_head.mustache

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html class="{{ htmlClass }}">
33
<head>
44
<title>{{ title }}</title>
5-
<meta charset="UTF-8">
5+
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width" />
77

88
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
@@ -14,4 +14,4 @@
1414

1515
</head>
1616
<body class="{{ bodyClass }}">
17-
17+

‎packages/core/test/lineage_hunter_tests.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ tap.test('find_lineage - finds lineage', function (test) {
6868
template:
6969
'<!-- Begin .header -->\r\n<header class="header cf" role="banner">\r\n\t{{> atoms-logo }}\r\n\t<a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>\r\n\t<a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>\r\n\t{{> molecules-primary-nav }}\r\n\t{{> molecules-search }}\r\n</header>\r\n<!-- End .header -->\r\n',
7070
patternPartialCode:
71-
'<!-- Begin .header -->\r\n<header class="header cf" role="banner">\r\n<a href="/"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>\t<a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>\r\n\t<a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>\r\n<nav id="nav" class="nav">\r\n\t<ul>\r\n\t\t<li><a href="#">Home</a></li>\r\n\t\t<li><a href="#">About</a></li>\r\n\t\t<li><a href="#">Blog</a></li>\r\n\t\t<li><a href="#">Contact</a></li>\r\n\t</ul>\r\n</nav><!--end .nav-->\r\n<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form></header>\r\n<!-- End .header -->\r\n',
71+
'<!-- Begin .header -->\r\n<header class="header cf" role="banner">\r\n<a href="/"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>\t<a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>\r\n\t<a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>\r\n<nav id="nav" class="nav">\r\n\t<ul>\r\n\t\t<li><a href="#">Home</a></li>\r\n\t\t<li><a href="#">About</a></li>\r\n\t\t<li><a href="#">Blog</a></li>\r\n\t\t<li><a href="#">Contact</a></li>\r\n\t</ul>\r\n</nav><!--end .nav-->\r\n<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit" type="submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form></header>\r\n<!-- End .header -->\r\n',
7272
});
7373

7474
var patternlab = {
@@ -123,9 +123,9 @@ tap.test('find_lineage - finds lineage', function (test) {
123123
filename: 'search.mustache',
124124
data: null,
125125
template:
126-
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
126+
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit" type="submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
127127
patternPartialCode:
128-
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
128+
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit" type="submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
129129
patternBaseName: 'search',
130130
patternLink: 'molecules-forms-search/molecules-forms-search.html',
131131
patternGroup: 'molecules',

‎packages/development-edition-engine-react/source/_meta/_head.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html class="{{ htmlClass }}" lang="en">
33
<head>
44
<title>{{ title }}</title>
5-
<meta charset="UTF-8">
5+
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width" />
77

88
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />

‎packages/development-edition-engine-react/source/_meta/_head.mustache

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<html class="{{ htmlClass }}" lang="en">
33
<head>
44
<title>{{ title }}</title>
5-
<meta charset="UTF-8">
5+
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width" />
7-
7+
88
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
99
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
10-
10+
1111
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
1212
{{{ patternLabHead }}}
1313
<!-- End Pattern Lab -->
14-
14+
1515
</head>
1616
<body class="{{ bodyClass }}">
17-
17+

‎packages/docs/src/_includes/components/header.njk

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44

55
<button
66
class="c-btn c-btn--inverted c-btn--small c-header__nav-btn js-nav-trigger c-btn--small c-header__nav-btn"
7+
type="button"
78
>
89
Menu
910
</button>
1011

1112
<div class="c-header__nav-container js-nav-panel">
1213
{% include "components/tree-nav.njk" %}
1314

14-
15-
15+
16+
1617
</div>
1718
</div>
1819
<!--end c-header__inner-->
1920
</header>
20-
<!--end c-header-->
21+
<!--end c-header-->
2122

‎packages/docs/src/_includes/components/tree-nav.njk

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
{% for item in navigation.items %}
66
<li class="c-tree-nav__item {% if item.subnav %}js-nav-dropdown{% endif %}">
77
{% if item.subnav %}
8-
<button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger" aria-expanded="true">
8+
<button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger" aria-expanded="true" type="button">
99
{{ item.label }}
1010
{% set className = "c-tree-nav__icon" %}
1111
{% include "components/icon-chevron-down.njk" %}
1212
</button>
13-
13+
1414
<ul class="c-tree-nav__subnav">
1515
{% for subnav in item.subnav %}
16-
16+
1717
<li class="c-tree-nav__subnav-item">
1818
<span class="c-tree-nav__subnav-title">
1919
{{ subnav.label }}
2020
</span><!--end c-tree-nav__subnav-link-->
2121
{% set subnavCategory = subnav.category %}
2222
{% include "components/tree-subnav.njk" %}
23-
</li><!--end c-tree-nav__subnav-item-->
24-
{% endfor %}
23+
</li><!--end c-tree-nav__subnav-item-->
24+
{% endfor %}
2525
</ul><!--end c-tree-nav__subnav-->
2626
{% else %}
2727
<a class="c-tree-nav__link" href="{{ item.url }}">{{ item.label }}</a>

‎packages/docs/src/js/components/theme-toggle.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,10 @@ class ThemeToggle extends HTMLElement {
6868
this.innerHTML = html`
6969
<div class="[ theme-toggle ] [ md:ta-right gap-top-500 ]">
7070
<div role="status" class="[ visually-hidden ][ js-mode-status ]"></div>
71-
<button class="[ button ] [ font-base text-base weight-bold ] [ js-mode-toggle ]">
71+
<button
72+
class="[ button ] [ font-base text-base weight-bold ] [ js-mode-toggle ]"
73+
type="button"
74+
>
7275
Dark theme
7376
</button>
7477
</div>

‎packages/edition-node-gulp/source/_meta/_head.mustache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html class="{{ htmlClass }}" lang="en">
33
<head>
44
<title>{{ title }}</title>
5-
<meta charset="UTF-8">
5+
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width" />
77

88
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />

‎packages/edition-node/source/_meta/_head.mustache

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html class="{{ htmlClass }}" lang="en">
33
<head>
44
<title>{{ title }}</title>
5-
<meta charset="UTF-8">
5+
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width" />
77

88
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
@@ -14,4 +14,4 @@
1414

1515
</head>
1616
<body class="{{ bodyClass }}">
17-
17+

0 commit comments

Comments
 (0)