Skip to content

Commit

Permalink
[FEATURE] TAB navigation for menu and focus target section after click
Browse files Browse the repository at this point in the history
  • Loading branch information
t3brightside committed Mar 23, 2023
1 parent d107d8c commit ac7ad02
Show file tree
Hide file tree
Showing 11 changed files with 34 additions and 14 deletions.
2 changes: 2 additions & 0 deletions ChangeLog
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,5 @@
- [TASK] Link to composer kickstarter file in README
- [BUGFIX] Set logo z-index higher
- [BUGFIX] Social links ul margin
* 4.0.2
- [FEATURE] TAB navigation for menu and focus target section after click
2 changes: 1 addition & 1 deletion Resources/Private/Partials/Menus/Hmbrgr.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ea:asset.css embed="1" priority="1" identifier="hmbrgr" href="EXT:microtemplate/Resources/Public/Css/Menus/hmbrgr.css" />

<button id="hmbrgr" class="hmbrgr" aria-label="Menu" style="display: none"></button>
<button id="hmbrgr" class="hmbrgr" aria-label="Collapse or expand the menu" aria-haspopup="true" aria-expanded="false" style="display: none"></button>

<ea:asset.script embed="1" identifier="hmbrgr" src="EXT:microtemplate/Resources/Public/JavaScript/Menus/hmbrgr.js" />
2 changes: 1 addition & 1 deletion Resources/Private/Partials/Menus/LanguageMenu.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<f:for each="{languageMenu}" as="item">
<f:if condition="{item.available}">
<li class="{f:if(condition: item.active, then: 'act')}">
<a href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
<a tabindex="-1" href="{item.link}" hreflang="{item.hreflang}" title="{item.title}">
{item.navigationTitle}
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion Resources/Private/Partials/Menus/SectionMenu.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<f:for each="{sectionMenu}" as="section">
<f:if condition="{section.data.header}">
<li id="m{section.data.uid}">
<a href="/{f:if(condition: section.data.uid, then: '#c{section.data.uid}')}" title="{section.data.header}">
<a tabindex="-1" href="/{f:if(condition: section.data.uid, then: '#c{section.data.uid}')}" title="{section.data.header}">
{section.data.header}
</a>
</li>
Expand Down
12 changes: 6 additions & 6 deletions Resources/Private/Partials/Menus/SocialLinks.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,40 @@
<ul id="social-links">
<f:if condition="{settings.linkedinUrl}">
<li>
<a title="LinkedIn" href="{settings.linkedinUrl}"><svg xmlns="http://www.w3.org/2000/svg" width="34.546" height="34.466" viewBox="0 0 34.546 34.466"><g transform="translate(-65.006 -284.397)"><path d="M65.576,295.838h7.168v23.025H65.576ZM69.161,284.4a4.15,4.15,0,1,1-4.155,4.147,4.15,4.15,0,0,1,4.155-4.147m8.074,34.466h7.153V307.474c0-3,.567-5.91,4.293-5.91,3.668,0,3.72,3.433,3.72,6.105v11.194h7.151V306.235c0-6.2-1.335-10.966-8.582-10.966a7.524,7.524,0,0,0-6.777,3.719H84.1v-3.15H77.235Z"/></g></svg></a>
<a tabindex="-1" title="LinkedIn" href="{settings.linkedinUrl}"><svg xmlns="http://www.w3.org/2000/svg" width="34.546" height="34.466" viewBox="0 0 34.546 34.466"><g transform="translate(-65.006 -284.397)"><path d="M65.576,295.838h7.168v23.025H65.576ZM69.161,284.4a4.15,4.15,0,1,1-4.155,4.147,4.15,4.15,0,0,1,4.155-4.147m8.074,34.466h7.153V307.474c0-3,.567-5.91,4.293-5.91,3.668,0,3.72,3.433,3.72,6.105v11.194h7.151V306.235c0-6.2-1.335-10.966-8.582-10.966a7.524,7.524,0,0,0-6.777,3.719H84.1v-3.15H77.235Z"/></g></svg></a>
</li>
</f:if>
<f:if condition="{settings.twitterUrl}">
<li>
<a title="Twitter" href="{settings.twitterUrl}">
<a tabindex="-1" title="Twitter" href="{settings.twitterUrl}">
<svg xmlns="http://www.w3.org/2000/svg" width="38.706" height="31.74" viewBox="0 0 38.706 31.74"><g transform="translate(-174.619 -105.696)"><path d="M213.1,109.5a16.137,16.137,0,0,1-3.935,1.113c.627-.106,1.53-1.241,1.9-1.7a7.123,7.123,0,0,0,1.286-2.361c.034-.067.054-.152-.013-.2a.227.227,0,0,0-.209.017,19.879,19.879,0,0,1-4.625,1.77.309.309,0,0,1-.32-.085,3.772,3.772,0,0,0-.4-.413,8.163,8.163,0,0,0-2.24-1.372,7.8,7.8,0,0,0-3.435-.554,8.219,8.219,0,0,0-3.26.921,8.413,8.413,0,0,0-2.629,2.147,8.084,8.084,0,0,0-1.57,3.145,8.5,8.5,0,0,0-.083,3.321c.025.185.008.211-.16.185-6.35-.945-11.615-3.217-15.888-8.087-.185-.212-.286-.212-.439.016-1.869,2.8-.962,7.307,1.374,9.52.311.3.631.59.976.859a8.11,8.11,0,0,1-3.066-.859c-.185-.118-.278-.05-.295.16a4.827,4.827,0,0,0,.051.91,8.148,8.148,0,0,0,5.021,6.5,4.689,4.689,0,0,0,1.019.311,9.083,9.083,0,0,1-3.007.094c-.219-.043-.3.067-.219.277,1.323,3.607,4.179,4.68,6.318,5.291.286.05.573.05.86.117-.018.026-.035.026-.051.051-.71,1.082-3.169,1.887-4.315,2.287a15.453,15.453,0,0,1-6.553.839c-.352-.052-.426-.048-.522,0s-.012.143.1.235c.447.295.9.556,1.365.81a21.689,21.689,0,0,0,4.38,1.751c7.873,2.174,16.74.577,22.651-5.3,4.641-4.612,6.268-10.971,6.268-17.34,0-.249.295-.387.47-.518a15.631,15.631,0,0,0,3.153-3.206,1.248,1.248,0,0,0,.276-.614V109.5C213.325,109.4,213.252,109.429,213.1,109.5Z"/></g></svg>
</a>
</li>
</f:if>
<f:if condition="{settings.instagramUrl}">
<li>
<a title="Instagram" href="{settings.instagramUrl}">
<a tabindex="-1" title="Instagram" href="{settings.instagramUrl}">
<svg xmlns="http://www.w3.org/2000/svg" width="38.694" height="38.694" viewBox="0 0 38.694 38.694"><g transform="translate(-289.407 -102.154)"><path d="M321.24,111.166A2.244,2.244,0,1,1,319,108.921,2.245,2.245,0,0,1,321.24,111.166Zm-2.795,10.062a9.428,9.428,0,1,1-9.428-9.428A9.439,9.439,0,0,1,318.445,121.228Zm-3.388,0a6.04,6.04,0,1,0-6.04,6.04A6.047,6.047,0,0,0,315.057,121.228Zm13.044-7.574a11.5,11.5,0,0,0-11.5-11.5H300.907a11.5,11.5,0,0,0-11.5,11.5v15.694a11.5,11.5,0,0,0,11.5,11.5H316.6a11.5,11.5,0,0,0,11.5-11.5Zm-3.776,15.521a7.9,7.9,0,0,1-7.9,7.9H301.08a7.9,7.9,0,0,1-7.9-7.9V113.827a7.9,7.9,0,0,1,7.9-7.9h15.347a7.9,7.9,0,0,1,7.9,7.9Z"/></g></svg>
</a>
</li>
</f:if>
<f:if condition="{settings.facebookUrl}">
<li>
<a title="Facebook" href="{settings.facebookUrl}">
<a tabindex="-1" title="Facebook" href="{settings.facebookUrl}">
<svg xmlns="http://www.w3.org/2000/svg" width="17.614" height="37.917" viewBox="0 0 17.614 37.917"><g transform="translate(-73.472 -102.477)"><path d="M77.353,121.585v18.332a.478.478,0,0,0,.478.477h6.807a.478.478,0,0,0,.477-.477V121.286h4.936a.478.478,0,0,0,.476-.437L91,115.236a.478.478,0,0,0-.476-.518h-5.41v-3.982a1.69,1.69,0,0,1,1.69-1.69h3.8a.477.477,0,0,0,.477-.478v-5.613a.477.477,0,0,0-.477-.478H84.182a6.829,6.829,0,0,0-6.829,6.829v5.412h-3.4a.478.478,0,0,0-.477.478v5.613a.477.477,0,0,0,.477.477h3.4Z" fill-rule="evenodd"/></g></svg>
</a>
</li>
</f:if>
<f:if condition="{settings.youtubeUrl}">
<li>
<a title="YouTube" href="{settings.youtubeUrl}">
<a tabindex="-1" title="YouTube" href="{settings.youtubeUrl}">
<svg xmlns="http://www.w3.org/2000/svg" width="40.03" height="27.388" viewBox="0 0 40.03 27.388"><g transform="translate(-173.957 -291.635)"><path d="M213.987,300.386a8.752,8.752,0,0,0-8.752-8.751H182.709a8.752,8.752,0,0,0-8.752,8.751v9.885a8.752,8.752,0,0,0,8.752,8.752h22.526a8.752,8.752,0,0,0,8.752-8.752Zm-12.387,5.2-10.074,4.965c-.393.213-1.768-.072-1.768-.519V299.843c0-.453,1.386-.738,1.78-.513l9.625,5.226C201.566,304.786,202.008,305.368,201.6,305.589Z"/></g></svg>
</a>
</li>
</f:if>
<f:if condition="{settings.githubUrl}">
<li>
<a title="GitHub" href="{settings.githubUrl}">
<a tabindex="-1" title="GitHub" href="{settings.githubUrl}">
<svg xmlns="http://www.w3.org/2000/svg" width="97.627" height="96" viewBox="0 0 97.627 96"><path d="M48.854,0A49.266,49.266,0,0,0,33.4,95.907c2.427.49,3.316-1.059,3.316-2.362,0-1.141-.08-5.052-.08-9.127-13.59,2.934-16.42-5.867-16.42-5.867-2.184-5.7-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015,4.934.326,7.523,5.052,7.523,5.052,4.367,7.5,11.4,5.378,14.235,4.074a10.485,10.485,0,0,1,3.074-6.6c-10.839-1.141-22.243-5.378-22.243-24.283a19.268,19.268,0,0,1,5.014-13.2c-.485-1.222-2.184-6.275.486-13.038,0,0,4.125-1.3,13.426,5.052a46.573,46.573,0,0,1,24.427,0c9.3-6.356,13.427-5.052,13.427-5.052,2.67,6.763.97,11.816.485,13.038a18.9,18.9,0,0,1,5.015,13.2c0,18.905-11.4,23.06-22.324,24.283,1.78,1.548,3.316,4.481,3.316,9.126,0,6.6-.08,11.9-.08,13.526,0,1.3.89,2.853,3.316,2.364A49.267,49.267,0,0,0,48.854,0Z" fill-rule="evenodd"/></svg>
</a>
</li>
Expand Down
4 changes: 2 additions & 2 deletions Resources/Private/Partials/Sub/CloseLink.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<f:if condition="{rootPageId}">
<f:then><f:link.page pageUid="{rootPageId}" title="Close" class="closelink"></f:link.page></f:then>
<f:else><f:link.page pageUid="{site.rootPageId}" title="Close" class="closelink"></f:link.page></f:else>
<f:then><f:link.page pageUid="{rootPageId}" title="Back to main page" aria-label="Back to main page" class="closelink"></f:link.page></f:then>
<f:else><f:link.page pageUid="{site.rootPageId}" title="Back to main page" aria-label="Back to main page" class="closelink"></f:link.page></f:else>
</f:if>
12 changes: 12 additions & 0 deletions Resources/Public/JavaScript/Menus/hmbrgr.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
const hmbrgr = document.getElementById('hmbrgr');
const menu = document.getElementById('menu');
const menuLinks = menu.querySelectorAll('a');

hmbrgr.addEventListener('click', () => {
hmbrgr.classList.toggle('open');
menu.classList.toggle('open');
if(hmbrgr.classList.contains('open')) {
hmbrgr.setAttribute("aria-expanded", "true");
menuLinks.forEach(link => {
link.setAttribute('tabindex', '0');
});
} else {
hmbrgr.setAttribute("aria-expanded", "false");
menuLinks.forEach(link => {
link.setAttribute('tabindex', '-1');
});
}
});

hmbrgr.style.display = "block";
4 changes: 4 additions & 0 deletions Resources/Public/JavaScript/Menus/section-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ window.addEventListener('resize', function() {
menu.addEventListener("click", function (event) {
if (event.target.matches("a")) {
hmbrgr.classList.remove('open');
hmbrgr.setAttribute("aria-expanded", "false");
menu.classList.remove('open');
menuLinks.forEach(link => {
link.setAttribute('tabindex', '-1');
});
}
});

Expand Down
4 changes: 3 additions & 1 deletion Resources/Public/JavaScript/Pages/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ window.addEventListener('scroll', function () {
document.querySelectorAll('a[href*="#"]:not([href="#"])').forEach(trigger => {
trigger.addEventListener('click', e => {
e.preventDefault();
let hash = '#' + trigger.getAttribute('href').split('#')[1];
let id = trigger.getAttribute('href').split('#')[1];
let hash = '#' + id;
let target = document.querySelector(hash);
let headerOffset = 0;
let elementPosition = target.offsetTop;
Expand All @@ -27,6 +28,7 @@ document.querySelectorAll('a[href*="#"]:not([href="#"])').forEach(trigger => {
behavior: 'smooth',
top: offsetPosition
});
document.getElementById(id).focus();
});
});

Expand Down
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"require": {
"typo3/cms-core": "^11.5 || ^12.1",
"typo3/cms-fluid-styled-content": "^11.5 || ^12.1",
"t3brightside/containeritems": "^4.1",
"t3brightside/containeritems": "^4.1.1",
"t3brightside/embedassets": "^1.2",
"ichhabrecht/content-defender": "^3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion ext_emconf.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
'title' => 'Microtemplate',
'description' => 'One page template with sections and lightbox like sub pages. Demo at: https://microtemplate.t3brightside.com',
'category' => 'fe',
'version' => '4.0.1',
'version' => '4.0.2',
'state' => 'stable',
'clearCacheOnLoad' => 1,
'author' => 'Tanel Põld',
Expand Down

0 comments on commit ac7ad02

Please sign in to comment.