fix: update the css query and events used to rename copy button aria-labels (#3271)

* Update the css query and events used to rename copy button aria-labels

* Add the additional header text to the button aria-labels

* Remove logs and update notes

* Use a descriptive function name

* Update package version

* Update function names

Co-authored-by: Nickii Miaro <[email protected]>

---------

Co-authored-by: Nickii Miaro <[email protected]>

Author: musale

.storybook/components/ElementNamer.jsx

@@ -1,3 +1,4 @@
+import { use } from '@esm-bundle/chai';
 import React, { useEffect } from 'react';
 
 export const TableNamer = ({ names }) => {
@@ -17,21 +18,32 @@ export const TableNamer = ({ names }) => {
 };
 
 export const CopyButtonNamer = ({ names }) => {
-  useEffect(() => {
-    const onWindowLoadHander = () => {
-      const buttons = document.getElementsByClassName('css-3ltsna');
+  const windowScrollHandler = () => {
+    const buttons = document.getElementsByClassName('css-1fdphfk');
+    if (buttons) {
       if (buttons.length !== names.length) {
         console.error(
           '🦒: CopyButtonNamer: number of buttons does not match number of names',
           `Found ${buttons?.length ?? 0} buttons and was provided ${names?.length ?? 0} names`
         );
+        return;
       }
+
       for (let i = 0; i < buttons.length; i++) {
         buttons[i].setAttribute('aria-label', names[i]);
       }
-    };
-    window.addEventListener('load', onWindowLoadHander);
-    return () => window.removeEventListener('load', onWindowLoadHander);
+      // avoid triggering the scroll event again if you keep scrolling.
+      window.removeEventListener('scroll', windowScrollHandler);
+    }
+  };
+
+  useEffect(() => {
+    // NOTE: a good event here is load or DOMContentLoaded BUT for unknown
+    // reasons, they don't trigger on the page. The scroll event is a hack
+    // based on the fact that to reach the area the code needs an update,
+    // you have to scroll - using a mouse or tabbing.
+    window.addEventListener('scroll', windowScrollHandler);
+    return () => window.removeEventListener('scroll', windowScrollHandler);
   }, [names]);
   return <></>;
 };

packages/mgt-element/src/utils/version.ts

@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '4.2.3';
+export const PACKAGE_VERSION = '4.2.4';

stories/overview.stories.mdx

@@ -104,4 +104,4 @@ The Microsoft Graph Toolkit is supported in the following browsers.
 - Check out the Microsoft Graph Toolkit on [GitHub](https://aka.ms/mgt).
 
 <TableNamer names={['Microsoft Graph Toolkit Components', 'Microsoft Graph Toolkit Providers', 'Supported browsers']}/>
-<CopyButtonNamer names={['Copy mgt-loader script tag', 'Copy npm install command']}/>
+<CopyButtonNamer names={['Copy mgt-loader script tag from a cdn', 'Copy npm install command via npm']}/>