Control button util: Implement descriptive text (#1404)

AprilSylph · Feb 22, 2024 · 6453cae · 6453cae
1 parent 0f98234
commit 6453cae
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/scripts/quick_tags.js b/src/scripts/quick_tags.js
@@ -233,7 +233,7 @@ popupForm.addEventListener('submit', processFormSubmit);
 postOptionPopupElement.addEventListener('click', processPostOptionBundleClick);
 
 export const main = async function () {
-  controlButtonTemplate = createControlButtonTemplate(symbolId, buttonClass);
+  controlButtonTemplate = createControlButtonTemplate(symbolId, buttonClass, 'Quick Tags');
 
   pageModifications.register(`${postSelector} footer ${controlIconSelector} a[href*="/edit/"]`, addControlButtons);
   registerPostOption('quick-tags', { symbolId, onclick: togglePostOptionPopupDisplay });

diff --git a/src/scripts/trim_reblogs.js b/src/scripts/trim_reblogs.js
@@ -171,7 +171,7 @@ const processPosts = postElements => filterPostElements(postElements).forEach(as
 });
 
 export const main = async function () {
-  controlButtonTemplate = createControlButtonTemplate(symbolId, buttonClass);
+  controlButtonTemplate = createControlButtonTemplate(symbolId, buttonClass, 'Trim Reblogs');
   onNewPosts.addListener(processPosts);
 };
 

diff --git a/src/util/control_buttons.js b/src/util/control_buttons.js
@@ -8,11 +8,12 @@ $('.xkit-control-button-container').remove();
  * Create a button template that can be cloned with cloneControlButton() for inserting into the controls of a post.
  * @param {string} symbolId - The name of the RemixIcon to use
  * @param {string} buttonClass - An extra class to identify the extension that added the button
+ * @param {string} label - Descriptive text to be set as the button aria-label property and tooltip
  * @returns {HTMLDivElement} A button that can be cloned with cloneControlButton()
  */
-export const createControlButtonTemplate = function (symbolId, buttonClass) {
+export const createControlButtonTemplate = function (symbolId, buttonClass, label = '') {
   return dom('div', { class: `xkit-control-button-container ${buttonClass}` }, null, [
-    dom('button', { class: 'xkit-control-button' }, null, [
+    dom('button', { class: 'xkit-control-button', 'aria-label': label, title: label }, null, [
       dom('span', { class: 'xkit-control-button-inner', tabindex: '-1' }, null, [
         buildSvg(symbolId)
       ])