Skip to content

Commit

Permalink
Added ARIA roles for extension preferences page (part of issue #450)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aecreations
aecreations committed Jul 31, 2024
1 parent 7eba165 commit 1d0ea78
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 29 deletions.
47 changes: 24 additions & 23 deletions wx-src/pages/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,29 @@

<body>
<header>
<div id="pref-pg-hdr">
<img id="addon-icon" src="../img/icon.svg"/>
<div id="pref-pg-hdr" role="heading">
<img id="addon-icon" src="../img/icon.svg" role="presentation"/>
<h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
<button id="about-btn" data-i18n="aboutBtn"></button>
</div>
</header>

<main id="ae-clippings-preferences">
<div class="tab-container">
<div class="tab-container" role="tablist">
<div id="preftab-general" class="tab">
<button id="preftab-general-btn" class="active-tab" data-i18n="prefTabGen"></button>
<button id="preftab-general-btn" class="active-tab" role="tab" aria-controls="prefpane-general" data-i18n="prefTabGen"></button>
</div><div id="preftab-paste" class="tab">
<button id="preftab-paste-btn" data-i18n="prefTabPaste"></button>
<button id="preftab-paste-btn" role="tab" aria-controls="prefpane-paste" data-i18n="prefTabPaste"></button>
</div><div id="preftab-sync-clippings" class="tab">
<button id="preftab-sync-clippings-btn" data-i18n="syncClippings"></button>
<button id="preftab-sync-clippings-btn" role="tab" aria-controls="prefpane-sync-clippings" data-i18n="syncClippings"></button>
</div>
</div>

<div id="prefpane-general" class="tab-panel active-tab-panel">
<div id="prefpane-general" class="tab-panel active-tab-panel" role="tabpanel">
<p id="browser-action-opt-label" data-i18n="brwsActOpt"></p>
<div id="browser-action-opt-ctr" class="row browser-style">
<input type="radio" id="brws-act-open-clippings-mgr" name="browser-action-opt" value="1"><label for="brws-act-open-clippings-mgr" data-i18n="brwsActClpMgr"></label>
<input type="radio" id="brws-act-open-clippings-sidebar" name="browser-action-opt" value="2"><label for="brws-act-open-clippings-sidebar" data-i18n="brwsActSbar"></label>
<input type="radio" id="brws-act-open-clippings-mgr" name="browser-action-opt" value="1" aria-describedby="browser-action-opt-label"/><label for="brws-act-open-clippings-mgr" data-i18n="brwsActClpMgr"></label>
<input type="radio" id="brws-act-open-clippings-sidebar" name="browser-action-opt" value="2" aria-describedby="browser-action-opt-label"/><label for="brws-act-open-clippings-sidebar" data-i18n="brwsActSbar"></label>
</div>
<fieldset id="general-options">
<legend data-i18n="prefsHdgGeneralOptions"></legend>
Expand Down Expand Up @@ -87,19 +87,19 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</fieldset>
</div> <!-- /prefpane-general -->

<div id="prefpane-paste" class="tab-panel">
<div id="prefpane-paste" class="tab-panel" role="tabpanel">
<p id="html-paste-options" data-i18n="labelPasteOpts"></p>

<div id="html-paste-options-ctr">
<div class="row browser-style">
<input type="radio" id="paste-opt-formatted" name="html-paste-opt" value="1"/><label for="paste-opt-formatted" data-i18n="pasteOptFormatted"></label>
<input type="radio" id="paste-opt-formatted" name="html-paste-opt" value="1" aria-describedby="html-paste-options"/><label for="paste-opt-formatted" data-i18n="pasteOptFormatted"></label>
</div>
<div id="paste-formatted-opts" class="row indent browser-style">
<p id="html-paste-note" data-i18n="htmlPasteDescTB"></p>
<input type="checkbox" id="html-auto-line-break" class="checkbox"/><label id="html-auto-line-break-label" for="html-auto-line-break" data-i18n="cbAutoLineBreak"></label>
</div>
<div id="paste-opt-raw-html-row" class="row browser-style">
<input type="radio" id="paste-opt-raw-html" name="html-paste-opt" value="2"/><label for="paste-opt-raw-html" data-i18n="pasteOptRawHTML"></label>
<input type="radio" id="paste-opt-raw-html" name="html-paste-opt" value="2" aria-describedby="html-paste-options"/><label for="paste-opt-raw-html" data-i18n="pasteOptRawHTML"></label>
</div>
</div>

Expand Down Expand Up @@ -164,7 +164,7 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</fieldset>
</div> <!-- /prefpane-paste -->

<div id="prefpane-sync-clippings" class="tab-panel">
<div id="prefpane-sync-clippings" class="tab-panel" role="tabpanel">
<fieldset id="sync-options">
<legend data-i18n="syncClippings"></legend>

Expand All @@ -183,7 +183,8 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</main>

<!-- Dialog boxes -->
<div id="wnds-dlgs-opts-dlg" class="lightbox">
<div id="lightbox-bkgrd-ovl" class="lightbox-bkgrd"></div>
<div id="wnds-dlgs-opts-dlg" class="lightbox" role="dialog">
<div class="dlg-content">
<fieldset>
<legend data-i18n="wndsDlgsOptsTitle"></legend>
Expand Down Expand Up @@ -211,9 +212,9 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</div>
</div>

<div id="sidebar-opts-dlg" class="lightbox">
<div id="sidebar-opts-dlg" class="lightbox" role="dialog" aria-labelledby="sidebar-opts-dlg-hdg">
<div class="dlg-content">
<p class="dlg-subhead" data-i18n="sidebarTitle"></p>
<p id="sidebar-opts-dlg-hdg" class="dlg-subhead" data-i18n="sidebarTitle"></p>
<div class="row browser-style">
<input type="checkbox" id="enbl-sidebar-paste"><label for="enbl-sidebar-paste" data-i18n="optPasteFromSbar"></label><span class="experimental-label" data-i18n="labelExpermt"></span>
</div>
Expand All @@ -234,7 +235,7 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</div>
</div>

<div id="request-native-app-conxn-perm-dlg" class="lightbox">
<div id="request-native-app-conxn-perm-dlg" class="lightbox" role="alertdialog">
<div class="msgbox-icon"></div>
<div class="dlg-content">
<p class="dlg-subhead" data-i18n="syncPermReqTitle"></p>
Expand All @@ -251,8 +252,9 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</div>
</div>

<div id="sync-clippings-dlg" class="lightbox">
<div id="sync-clippings-dlg" class="lightbox" role="dialog">
<div class="dlg-content">
<!-- TO DO: Put dialog title here -->
<div id="sync-connection-check" class="deck">
<p class="label" data-i18n="syncConnect"><p>
<progress></progress>
Expand Down Expand Up @@ -300,7 +302,7 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</div>
</div>

<div id="turn-off-sync-clippings-dlg" class="lightbox">
<div id="turn-off-sync-clippings-dlg" class="lightbox" role="alertdialog">
<div class="msgbox-icon"></div>
<div class="dlg-content">
<p class="label" data-i18n="syncTurnOffConf"></p>
Expand All @@ -311,7 +313,7 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</div>
</div>

<div id="turn-off-sync-clippings-ack-dlg" class="lightbox">
<div id="turn-off-sync-clippings-ack-dlg" class="lightbox" role="alertdialog">
<div class="info-icon"></div>
<div class="dlg-content">
<p class="label" data-i18n="syncTurnOffAck"></p>
Expand All @@ -324,14 +326,14 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
</div>
</div>

<div id="sync-clippings-help-dlg" class="lightbox">
<div id="sync-clippings-help-dlg" class="lightbox" role="dialog">
<div class="dlg-content"></div>
<div class="dlg-btns">
<button class="dlg-accept default" data-i18n="btnOK"></button>
</div>
</div>

<div id="about-dlg" class="lightbox">
<div id="about-dlg" class="lightbox" role="dialog">
<div class="dlg-content">
<div id="ext-icon"></div>
<div id="ext-info">
Expand Down Expand Up @@ -373,7 +375,6 @@ <h2 id="pref-pg-hdr-text" data-i18n="prefsTitle"></h2>
<button class="dlg-accept default" data-i18n="btnOK"></button>
</div>
</div>
<div id="lightbox-bkgrd-ovl" class="lightbox-bkgrd"></div>

<script src="../lib/jquery.js"></script>
<script src="../lib/purify.min.js"></script>
Expand Down
24 changes: 18 additions & 6 deletions wx-src/pages/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,17 @@ $(async () => {
let lang = browser.i18n.getUILanguage();
document.body.dataset.locale = lang;

$("#preftab-general-btn").on("click", switchPrefsPanel);
$("#preftab-paste-btn").on("click", switchPrefsPanel);
$("#preftab-sync-clippings-btn").on("click", switchPrefsPanel);
let tabGeneral = $("#preftab-general-btn");
tabGeneral.on("click", switchPrefsPanel);
tabGeneral.ariaSelected = true;

let tabPaste = $("#preftab-paste-btn");
tabPaste.on("click", switchPrefsPanel);
tabPaste.ariaSelected = false;

let tabSync = $("#preftab-sync-clippings-btn");
tabSync.on("click", switchPrefsPanel);
tabSync.ariaSelected = false;

$("#sync-intro").html(sanitizeHTML(browser.i18n.getMessage("syncIntro")));

Expand Down Expand Up @@ -397,21 +405,25 @@ function switchPrefsPanel(aEvent)
let id = aEvent.target.id;

if (id == "preftab-general-btn") {
$("#preftab-paste-btn, #preftab-sync-clippings-btn").removeClass("active-tab");
$("#preftab-paste-btn, #preftab-sync-clippings-btn").removeClass("active-tab")
.attr("aria-selected", "false");
$("#prefpane-paste, #prefpane-sync-clippings").removeClass("active-tab-panel");
$("#prefpane-general").addClass("active-tab-panel");
}
else if (id == "preftab-paste-btn") {
$("#preftab-general-btn, #preftab-sync-clippings-btn").removeClass("active-tab");
$("#preftab-general-btn, #preftab-sync-clippings-btn").removeClass("active-tab")
.attr("aria-selected", "false");
$("#prefpane-general, #prefpane-sync-clippings").removeClass("active-tab-panel");
$("#prefpane-paste").addClass("active-tab-panel");
}
else if (id == "preftab-sync-clippings-btn") {
$("#preftab-general-btn, #preftab-paste-btn").removeClass("active-tab");
$("#preftab-general-btn, #preftab-paste-btn").removeClass("active-tab")
.attr("aria-selected", "false");
$("#prefpane-general, #prefpane-paste").removeClass("active-tab-panel");
$("#prefpane-sync-clippings").addClass("active-tab-panel");
}
aEvent.target.classList.add("active-tab");
aEvent.target.ariaSelected = true;
}


Expand Down

0 comments on commit 1d0ea78

Please sign in to comment.