beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

aria-hidden and tabindex -1 in .settings to be loaded in javascript

Browse source 
this way people can still tab and use a screen reader when both css and js are disabled.
i don't know who or why you would even want to do that, but oh well.
This commit is contained in:
westtle 2024-02-13 22:11:46 +07:00
parent 8b5e7f0bd9
commit e5057a2ac3
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/scripts/settings.js
View file

@ -25,4 +25,10 @@ function toggleSettings() {
}; };
}; };
settingsToggle.addEventListener("click", toggleSettings); settingsToggle.addEventListener("click", toggleSettings);
document.addEventListener("DOMContentLoaded", () => {
// No tabbing and hide from screen reader until it is open.
settingsList.setAttribute("aria-hidden", true);
settingsItems.forEach(item => {item.tabIndex = -1});
});

12
index.html
View file

@ -64,9 +64,9 @@
</svg> </svg>
<span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings --sr-only">Press to open settings.</span> <span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings --sr-only">Press to open settings.</span>
</button> </button>
<ul id="settings__buttons" class="settings__buttons" aria-hidden="true" tabindex="-1"> <ul id="settings__buttons" class="settings__buttons">
<li class="settings__button-item"> <li class="settings__button-item">
<button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme" tabindex="-1"> <button class="settings__button settings__button--theme" aria-label="Theme" aria-describedby="settings__button-description--theme">
<svg class="settings__svg settings__svg--theme-moon" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="settings__svg settings__svg--theme-moon" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Theme</title> <title>Theme</title>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
@ -80,7 +80,7 @@
</li> </li>
<span class="settings__separator" aria-hidden="true"></span> <span class="settings__separator" aria-hidden="true"></span>
<li class="settings__button-item"> <li class="settings__button-item">
<button class="settings__button settings__button--clear" aria-label="Clear Note" aria-describedby="settings__button-description--clear" tabindex="-1"> <button class="settings__button settings__button--clear" aria-label="Clear Note" aria-describedby="settings__button-description--clear">
<svg class="settings__svg settings__svg--clear" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="settings__svg settings__svg--clear" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Clear Note</title> <title>Clear Note</title>
<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line> <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
@ -89,7 +89,7 @@
</button> </button>
</li> </li>
<li class="settings__button-item"> <li class="settings__button-item">
<button class="settings__button settings__button--download" aria-label="Download Note" aria-describedby="settings__button-description--download" tabindex="-1"> <button class="settings__button settings__button--download" aria-label="Download Note" aria-describedby="settings__button-description--download">
<svg class="settings__svg settings__svg--download" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="settings__svg settings__svg--download" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Download Note</title> <title>Download Note</title>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
@ -99,7 +99,7 @@
</li> </li>
<span class="settings__separator" aria-hidden="true"></span> <span class="settings__separator" aria-hidden="true"></span>
<li class="settings__button-item"> <li class="settings__button-item">
<a class="settings__button settings__button--github" aria-labelledby="settings__button-label--github" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank" tabindex="-1"> <a class="settings__button settings__button--github" aria-labelledby="settings__button-label--github" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank">
<svg class="settings__svg settings__svg--github" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="settings__svg settings__svg--github" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Github Repository</title> <title>Github Repository</title>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
@ -108,7 +108,7 @@
</a> </a>
</li> </li>
<li class="settings__button-item"> <li class="settings__button-item">
<a class="settings__button settings__button--westtle" aria-labelledby="settings__button-label--westtle" rel="noopener" href="https://westtle.github.io" target="_blank" tabindex="-1"> <a class="settings__button settings__button--westtle" aria-labelledby="settings__button-label--westtle" rel="noopener" href="https://westtle.github.io" target="_blank">
<svg class="settings__svg settings__svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)"> <svg class="settings__svg settings__svg--westtle" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 500 500" xml:space="preserve"><g transform="matrix(1 0 0 1 250 250)">
<title>westtle's Homepage</title> <title>westtle's Homepage</title>
<rect class="settings__svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0" /></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13" /></g> <rect class="settings__svg-westtle--background" width="500" height="500" fill="#000000" vector-effect="non-scaling-stroke" x="-250" y="-250" rx="0" ry="0" /></g><g transform="matrix(27.64 -1.71 1.71 27.64 255.15 262.17)"><path class="settings__svg-westtle--cat" fill="#ffffff" vector-effect="non-scaling-stroke" stroke-linecap="round" transform="translate(-7, -7)" d="M 3 12 L 4 12 L 4 13 L 3 13 M 3 11 L 4 11 L 4 12 L 3 12 M 4 11 L 5 11 L 5 12 L 4 12 M 4 10 L 5 10 L 5 11 L 4 11 M 4 9 L 5 9 L 5 10 L 4 10 M 3 9 L 4 9 L 4 10 L 3 10 M 2 8 L 3 8 L 3 9 L 2 9 M 1 7 L 2 7 L 2 8 L 1 8 M 0 8 L 1 8 L 1 9 L 0 9 M 1 6 L 2 6 L 2 7 L 1 7 M 1 5 L 2 5 L 2 6 L 1 6 M 1 4 L 2 4 L 2 5 L 1 5 M 0 3 L 1 3 L 1 4 L 0 4 M 2 3 L 3 3 L 3 4 L 2 4 M 2 2 L 3 2 L 3 3 L 2 3 M 3 1 L 4 1 L 4 2 L 3 2 M 4 2 L 5 2 L 5 3 L 4 3 M 5 3 L 6 3 L 6 4 L 5 4 M 6 3 L 7 3 L 7 4 L 6 4 M 7 3 L 8 3 L 8 4 L 7 4 M 8 3 L 9 3 L 9 4 L 8 4 M 9 2 L 10 2 L 10 3 L 9 3 M 10 1 L 11 1 L 11 2 L 10 2 M 11 2 L 12 2 L 12 3 L 11 3 M 11 3 L 12 3 L 12 4 L 11 4 M 12 4 L 13 4 L 13 5 L 12 5 M 13 3 L 14 3 L 14 4 L 13 4 M 12 5 L 13 5 L 13 6 L 12 6 M 12 6 L 13 6 L 13 7 L 12 7 M 12 7 L 13 7 L 13 8 L 12 8 M 13 8 L 14 8 L 14 9 L 13 9 M 11 8 L 12 8 L 12 9 L 11 9 M 10 9 L 11 9 L 11 10 L 10 10 M 9 9 L 10 9 L 10 10 L 9 10 M 8 9 L 9 9 L 9 10 L 8 10 M 7 9 L 8 9 L 8 10 L 7 10 M 6 9 L 7 9 L 7 10 L 6 10 M 5 9 L 6 9 L 6 10 L 5 10 M 9 10 L 10 10 L 10 11 L 9 11 M 9 11 L 10 11 L 10 12 L 9 12 M 9 12 L 10 12 L 10 13 L 9 13" /></g>