fix(a11y): add distinct name definitions for copy code buttons in sto…

…rybook overview (#2622)

uses custom react component to add aria-labels to the copy buttons in the page

.storybook/components/ElementNamer.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+
+export const TableNamer = ({ names }) => {
+  useEffect(() => {
+    const tables = document.querySelectorAll('table:not([aria-hidden="true"])');
+    if (tables.length !== names.length) {
+      console.error(
+        '🦒: TableNamer: number of tables does not match number of names',
+        `Found ${tables?.length ?? 0} and was provided ${names?.length ?? 0}`
+      );
+    }
+    for (let i = 0; i < tables.length; i++) {
+      tables[i].setAttribute('title', names[i]);
+    }
+  }, [names]);
+  return <></>;
+};
+
+export const CopyButtonNamer = ({ names }) => {
+  useEffect(() => {
+    const onWindowLoadHander = () => {
+      const buttons = document.getElementsByClassName('css-3ltsna');
+      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`
+        );
+      }
+      for (let i = 0; i < buttons.length; i++) {
+        buttons[i].setAttribute('aria-label', names[i]);
+      }
+    };
+    window.addEventListener('load', onWindowLoadHander);
+    return () => window.removeEventListener('load', onWindowLoadHander);
+  }, [names]);
+  return <></>;
+};

stories/overview.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Source } from '@storybook/addon-docs';
 import { PACKAGE_VERSION } from '@microsoft/mgt';
 import { versionInfo } from '../.storybook/versionInfo';
-import { TableNamer } from '../.storybook/components/TableNamer';
+import { TableNamer, CopyButtonNamer } from '../.storybook/components/ElementNamer';
 
 <Meta title="Overview" />
 
@@ -105,3 +105,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', 'Components in preview', 'Microsoft Graph Toolkit Providers', 'Supported browsers']}/>
+<CopyButtonNamer names={['Copy mgt-loader script tag', 'Copy npm install command']}/>