feat: [M3-5915] Accessible graph data #9045

abailly-akamai · 2023-04-21T20:11:40Z

Description 📝

Apart from a general description as to what the chart is representing, there's is currently no information details available to screen readers users. This is an accessibility issue described in M3-5915.

This PR attempts to improve this limitation by adding a visually hidden data table to each line chart. Please refer to the self review for implementation details as well as the code inline comments.

This PR follows the accessibility guidelines for the canvas element.

Note: this only targets <Linegraphs /> and does not address Longview graphs (I added a separate M3-6517 ticket for those, which is lower priority).

Preview 📷

There is no visual change associated with this PR

How to test 🧪

A few ways this PR should be tested.

Use an accessibility tool to inspect the new data tables for various graphs
Inspect the tables visually (locally) by removing the sx={visuallyHidden} prop at https://github.com/abailly-akamai/manager/blob/d09521ff8b924106c05a29df8a19d962f68c35a9/packages/manager/src/components/LineGraph/AccessibleGraphData.tsx#L77 - make sure the filters are working for the tabled data as well.
Use the PR preview link to inspect that page performance isn't affected by much, and that graphs that rely on pagination also get their data tables re-rendered. (ex: /linodes/[id]/networking)

cypress · 2023-04-21T20:34:44Z

2 flaky tests on run #3202 ↗︎

0	151	3	0	2

Details:

feat: [M3-5915] - address feedback
Project: Cloud Manager E2E	Commit: `63310a9526`
Status: Passed	Duration: 20:25 💡
Started: Apr 26, 2023 8:30 PM	Ended: Apr 26, 2023 8:51 PM

linodes/resize-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
resize linode > resizes a linode		`Output` `Screenshots` `Video`

longview/longview.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
longview > tests longview		`Output` `Screenshots` `Video`

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

abailly-akamai · 2023-04-24T15:27:09Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+                : ''}
+            </td>
+            <td>
+              {value && Number(value).toFixed(2)}


I don't see why we'd need more than two decimals here, but do not object to changing this

abailly-akamai · 2023-04-24T15:28:17Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+          <tr key={`accessible-graph-data-body-row-${idx}`}>
+            <td>
+              {timestamp
+                ? DateTime.fromMillis(Number(timestamp)).toLocaleString(


Unsure if a better format should be used for succinct date reading. I tested it via screen reader emulator and it felt quite natural

abailly-akamai · 2023-04-24T15:30:11Z

packages/manager/src/components/LineGraph/LineGraph.tsx

@@ -46,6 +47,7 @@ export interface Props {
  rowHeaders?: Array<string>;
  legendRows?: Array<any>;
  unit?: string;
+  accessibleUnit?: string;


This new prop was added because there is no unified way of displaying units through our charts. Refactoring for it would be outside the scope of this work

abailly-akamai · 2023-04-24T15:32:59Z

packages/manager/src/components/LineGraph/LineGraph.tsx

+        <canvas
+          height={chartHeight || 300}
+          ref={inputEl}
+          role="img"


I moved the role straight to the canvas. The original role="graphics-document" tag added to the wrapper was misleading because it assumes interactive content. While true visually, the role was wrong because there is no way for a screen reader to interact with the canvas. See https://pauljadam.com/demos/canvas.html

abailly-akamai · 2023-04-24T15:38:18Z

packages/manager/src/components/LineGraph/LineGraph.tsx

+        ariaLabel={ariaLabel}
+        hiddenDatasets={hiddenDatasets}
+        accessibleUnit={accessibleUnit}
+      />


Note, the graph data should NEVER be be inclosed by the canvas element. The screen reader user would hear it all as a single string of text and will not be able to navigate the cells and hear row and column headers spoken or a table caption. Instead the aria label is responsible for relating the data to its canvas representation as well as the aria-describedby tag - see https://pauljadam.com/demos/canvas.html

jaalah-akamai · 2023-04-24T17:36:30Z

packages/manager/src/components/LineGraph/LineGraph.tsx

+        />
+      </div>
+      <AccessibleGraphData
+        id={chartID}


The tables generated by AccessibleGraphData use the same ID's. Perhaps we can generate the id's in the AccessibleGraphData and use a callback for aria-describedby so that we annotate both IDs, IE: aria-describedby="table-id-1 table-id-2".

Great catch! this is my bad, I was trying to add an aria-describedby where there shouldn't be one. The reason is we can have multiple data tables representing one canvas. This label is not mandatory as long as the table summary is clear, which I improved by adding the label. ex:

jaalah-akamai · 2023-04-24T17:45:44Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+interface GraphTabledDataProps {
+  id?: string;
+  ariaLabel?: string;
+  accessibleUnit?: string;


I think we want to make this a required prop since it's used in the rendering

Yes, I modified the interface so it's clearer:

accessibleDataTable?: { unit: string; };

Table will not render unless accessibleDataTable is declared (if declared unit is required)

The reason is that we don't want to display the accessible data by default (because of longview - see https://jira.linode.com/browse/M3-6517)

jaalah-akamai · 2023-04-24T18:00:30Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+  id?: string;
+  ariaLabel?: string;
+  accessibleUnit?: string;
+  chartInstance: React.MutableRefObject<any>['current'];


Instead of any here, what do you think about:

type ChartType = typeof Chart; type ChartInstance = InstanceType<ChartType>; chartInstance: React.MutableRefObject<ChartInstance | null>['current'];

Great suggestion to improve the types. I ended up just doing

chartInstance: React.MutableRefObject<Chart | null>['current'];

jaalah-akamai · 2023-04-24T18:09:26Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+    );
+  });
+
+  return <Grid sx={visuallyHidden}>{tables}</Grid>;


Minor nit: We could probably just use a Box here or div/style combo to trim some overhead, especially since Grid isn't doing much

Sure thing! - made that change

jaalah-akamai

Nice changes 🚢

dwiley-akamai

If I'm understanding this correctly, the data table should be visually hidden but screen readers should be able to get to them, right? I couldn't seem to get Apple VoiceOver to pick up the data tables on the Linode Analytics tab

abailly-akamai · 2023-04-26T15:54:35Z

@dwiley-akamai the table is properly announced (see video). however with the voice over app you need an extra set of command to navigate it see https://support.apple.com/guide/voiceover/navigate-sort-and-reorder-tables-mchlp2723/mac

Screen.Recording.2023-04-26.at.11.52.22.AM.mov

mjac0bs

After I commented out sx={visuallyHidden} locally, I did see the tables and confirm that toggling the filters works.

Is my understanding correct that a screenreader should be able to read out all of the data by rows in AccessibleGraphData when each Linegraph is focused? (Maybe that's what your screencap was showing, but it had no sound.) I'm sure this is user error and I was not pressing the right key combination, but I couldn't get VoiceOver to read out any more details of the graph beyond "you are on a group", after it is announced. It was able to read out the CPU% table rows to me using the VO commands to navigate rows.

Screen.Recording.2023-04-26.at.9.14.37.AM.mov

mjac0bs · 2023-04-26T14:51:54Z

CHANGELOG.md


 ### Changed:
- `<RegionSelect />` can now dynamically get country flag and group all countrys #8996
+- `<RegionSelect />` can now dynamically get country flag and group all countries #8996


Thanks for fixing!

abailly-akamai · 2023-04-26T20:09:28Z

@mjac0bs & @dwiley-akamai I think you may have a misunderstanding on how screen readers or emulators like voiceOver read tabulated data.

You can't just tab your way through it (if that's what you were trying to do). You can try it with any table out there. ex: https://www.codecademy.com/resources/docs/html/tables - you'll see you won't land on the table by tabbing.
Tables are not interactive element, but rather read as plain text, with the exception that the screen reader will interpret them as tabulated data, referencing rows and columns as it is being read (if reader configured to do that)

In order to do that with voiceOver you could just get close to the content in question, then press Caps Lock + A (in some machines the VO command is option + control + shortcut i think) to toggle the "Read All" mode. See a list of voice modifier commands at https://www.apple.com/voiceover/info/guide/_1128.html

VoiceOver is great as tool to check interactive content, but gets pretty tricky to use for much else in my opinion. I would recommend using Xcode's Accessibility Inspector (xCode > Xcode menu entry > open developer tools > Accessibility Inspector) to check accessibility features in more details and get a sense of all the content a screen reader would go through.

cpathipa

Nice work! @abailly-akamai Approving with very minor pending change related to naming convention.

cpathipa · 2023-04-26T20:09:45Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+    const { label, data } = dataset;
+    const hidden = hiddenDatasets.includes(tableID);
+
+    const tableHeader = (


To be consistent with the documentatiuon, can we rename tableHeader to TableHeader ?

cpathipa · 2023-04-26T20:09:55Z

packages/manager/src/components/LineGraph/AccessibleGraphData.tsx

+      </tr>
+    );
+
+    const tableBody =


ah yes! good catch, addressed

dwiley-akamai · 2023-04-26T20:22:58Z

In order to do that with voiceOver you could just get close to the content in question, then press Caps Lock + A (in some machines the VO command is option + control + shortcut i think) to toggle the "Read All" mode. See a list of voice modifier commands at https://www.apple.com/voiceover/info/guide/_1128.html

Caps Lock + A did the trick for me, and thanks for the additional context and resources!

mjac0bs

In order to do that with voiceOver you could just get close to the content in question, then press Caps Lock + A (in some machines the VO command is option + control + shortcut i think) to toggle the "Read All" mode. See a list of voice modifier commands at https://www.apple.com/voiceover/info/guide/_1128.html

Caps Lock + A did the trick for me, and thanks for the additional context and resources!

Seconded, I had tried VO+R and VO + arrow keys but VO+A was what I was missing. Bookmarking!

@dwiley-akamai

* feat: [M3-5915] Accessible graph data (#9045) * fix: [M3-5915] - initial commit for new component * feat: [M3-5915] - initial commit for new component * fix: [M3-5915] - dynamic rendering based on filters * fix: [M3-5915] - markup, comments, styles & cleanup * fix: [M3-5915] - improve canvas accessibility tags * fix: [M3-5915] - accessible units for new chart data table * feat: [M3-5915] - add aria-describedby * feat: [M3-5915] - safeguards * feat: [M3-5915] - changelo update * feat: [M3-5915] - safer ID * feat: [M3-5915] - add test * feat: [M3-5915] - address feedback * feat: [M3-5915] - address feedback 2 * feat: [M3-5915] - address feedback 3 * feat: [M3-5915] - update storybook * feat: [M3-5915] - code cleanup * feat: [M3-5915] - prevent malformed value data * feat: [M3-5915] - address feedback * fix: [M3-6454] - Show error for PayPal payments * feat: [M3-6525] - Storybook config cleanup (#9055) * feat: [M3-6525] - initial commit * feat: [M3-6525] - fix build errors * feat: [M3-6525] - move fonts outside of public dir * feat: [M3-6525] - more config cleanup * feat: [M3-6525] - revert font move * chore: [M3-6496] - Add Adobe Analytics custom event tracking (#9004) * Add AA launch scripts and DCR on tracked events * Update satellite.track function to use generic, single identifier * Update launch script src assignment with logic for additional envs * Use a single env var from Jenkins * Disable tracking on custom events in Adobe for now * Cleanup * Enable direct call rule for AA custom event tracking * Add AA launch scripts and DCR on tracked events * Update satellite.track function to use generic, single identifier * Update launch script src assignment with logic for additional envs * Use a single env var from Jenkins * Disable tracking on custom events in Adobe for now * Cleanup * Only append Adobe Analytics script with valid url * Prevent errors if AA env is not defined * Update sendEvent * Test if loadScript works instead * Revert previous commit to move location of script * Log error when sendEvent fails * refactor: [M3-6306] - MUI v5 Migration SRC > Components > CopyableTextField (#9018) * refactor: [M3-6306] - SRC > Components > CopyableTextField * PR feedback * resolve specificity * Update styling * refactor styles using styled * Update CHANGELOG.md * refactor: [M3-6320] - MUI v5 Migration - Components > DialogTitle (#9050) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * fix: [M3-5852] - Phone Verification - Verification Code State Does Not Reset (#9059) * reset the code mutation whenever the user sends a code to their phone * reset code input on Enter Different Phone Number --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: Prepare for React Query for Linodes (#9049) - Does some preliminary moving around of some code to prepare for React Query for Linodes - Updates React Query for Volumes to use our new query key pattern - Sets up Linode RQ event handler so we can have peace of mind that RQ is up to date --------- Co-authored-by: Banks Nussman <banks@nussman.us> * feat: [M3-6525] - Storybook story POC (#9060) * feat: [M3-6525] - initial commit * feat: [M3-6525] - move fonts outside of public dir * feat: [M3-6525] - more config cleanup * feat: [M3-6525] - revert font move * feat: [M3-6526] - initial commit * refactor: [M3-6217] - Refactor Domains E2E Test Intercepts (#9057) * style: [M3-6030] - Adjust banner text size and spacing to improve readability (#9064) * Remove Notice inner p fontSize of 16px (1rem) * Removed commented code * Define lineHeight * Add changelog entry; add forgotten changelog entry * test: [M3-6052] - Add LKE cluster update and delete integration tests (#9054) * Add LKE mock utilities * Add LKE deletion integration tests * Add LKE landing page integration tests * Add Cypress downloaded file utils * Add LKE update integration tests * Add QA data attributes for node pool sections * Add QA data attributes for node pool rows * Add Kubernetes dashboard response factory * Dismiss LKE node recycle dialog upon confirmation * chore: Update changelog with unreleased section (#9074) * fix: [M3-6022] - Add compression to logo when rendering in JPG format during invoice PDF generation #9069 * fix: add compression to logo when rendering in JPG format during PDF generation * Update changelog --------- Co-authored-by: mjac0bs <mjacobs@akamai.com> Co-authored-by: Richie McIntosh <93939013+richardmcintosh@users.noreply.github.com> * fix: [M3-6540] - Surface general errors in the Object Storage Bucket Create Drawer (#9067) Surfaces any general errors as a notice in the Object Storage Create Bucket drawer Previously, only errors specific to the label and region would show --------- Co-authored-by: Banks Nussman <banks@nussman.us> * feat: [M3-6464] – Add resource links to empty Volumes landing page (#9065) * feat: [M3-6520] - Add new flag to deliver DC availability notice for premium plans (#9066) * feat: [M3-6520] - Add new flag to deliver DC availability notice for premium plans * feat: [M3-6520] - Move to new component for reusability * feat: [M3-6520] - feedback * refactor: [M3-6484] - React Query Linodes - Linodes Landing (#9062) - Uses API pagination and sorting on the Linodes Landing page - Made the CSV download actually contain useful information - Removed the group by tag and card views --------- Co-authored-by: Banks Nussman <banks@nussman.us> * feat: [M3-5655] - Allow user to download DNS zone file (#9075) * feat: [M3-5655] - Allow user to download DNS zone file * PR feedback - use util function downloadFile * PR -feedback * code cleanup * Added test coverage * Update packages/manager/src/features/Domains/DownloadDNSZoneFileButton.tsx Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * UX - Change and feedback * Code cleanup - use import instead of require --------- Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> * fix: [M3-6558] - Remove 'MongoDB' from ClusterControl description in Marketplace (#9081) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * fix: [M3-5088] - Allow simple search for IPv6 addresses (#9073) * fix: [M3-5088] - Add field search skipping rules * fix: [M3-5088] - Add comments * Changelogs for Cloud v1.92.0, JS Client v0.91.0, and Validation package v0.23.0 * fix: [M3-5088] - Renaming things * fix: [M3-5088] - Use better matching * fix: [M3-5088] - Cleanup * fix: [M3-5088] - Changelog * fix: [M3-5088] - minor feedback --------- Co-authored-by: Banks Nussman <banks@nussman.us> * fix: [M3-6509] Enable Cypress's experimental memory management config (#9076) * M3-6222: Refactor Images E2E Test Intercepts (#9080) * refactor: [M3-6400, M3-6401, M3-6404, M3-6408] - MUI v5 Migration - Components > Table, TableBody, TableHead, TableCell, TableSortCell, TableRow (#9082) MUI v5 Migration for most Table related components --------- Co-authored-by: Banks Nussman <banks@nussman.us> * feat: [M3-6465] Empty Firewall Landing Page Resources & Resources Abstraction (#9078) * feat: [M3-6465] saving progress * feat: [M3-6465] saving progress * feat: [M3-6465] improve API & compose page * feat: [M3-6465] Data & cleanup * feat: [M3-6465] fix for external icons * feat: [M3-6465] more cleanup * feat: [M3-6465] changelog entry * feat: [M3-6465] fix wrong link * feat: [M3-6465] convert ResourcesLinksSection to styled component * feat: [M3-6465] Address feedback - part 2 * feat: [M3-6465] Address feedback - part 3 * feat: [M3-6465] Address feedback - part 4 * feat: [M3-6465] Address feedback - part 5 * feat: [M3-6465] Cleanup and reusability * feat: [M3-6465] Abstract resource section * feat: [M3-6465] fixing icons on linodes, k8s and DBs * feat: [M3-6465] Final cleanup * chore: Upgrade Cypress to v12.11 (#9038) * Upgrade Cypress to v12.11 * Upgrade Cypress related dependencies * Update cached data * fix: Linode Details Access Table UI (#9085) Fixes UI regression in the Linode Details Entity Header access table caused by refactor: [M3-6400, M3-6401, M3-6404, M3-6408] - MUI v5 Migration - Components > Table, TableBody, TableHead, TableCell, TableSortCell, TableRow #9082 Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6492, M3-6315] - React Query - Linode Detail - Backups (#9079) - React Query for Linode Backups 🚀 - Modernizes the Linode Backups section of the Linodes Details page - Breaks up Backup related code into more components with more understandable names - Adds `available` to the LinodeBackup type because it was missing - Resolves Sentry errors caused by this section of the app (M3-6315) - Makes some minor UI and UX improvements 🎨 --------- Co-authored-by: Banks Nussman <banks@nussman.us> * change: [M3-6483] – Update OCAs highlighted on empty state Linodes landing page (#9083) * feat: [M3-6467] - Add resource links to Domains empty state landing page (#9092) * feat: [M3-6467] - Add resource links to Domains empty state landing page * Update CHANGELOG.md * change: [M3-6465] - Move linodes, k8s & dbs empty landing pages resources to HOC (#9088) * change: [M3-6465] move k8 empty landing page to POC * change: [M3-6465] move db empty landing page to POC * change: [M3-6465] fix db test * change: [M3-6465] move linodes empty landing page to POC * change: [M3-6465] add missing external icons * change: [M3-6465] cleanup and styling * change: [M3-6465] more cleanup and styling * refactor: [M3-6366] - MUI v5 - Components/Notice (#9094) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6326] - MUI v5 - Components > DownloadCSV (#9084) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6390] - MUI v5 - Components/ShowMoreExpansion (#9096) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6301] – `MUI v5 - Components > CheckoutSummary` (#9100) * refactor: [M3-6376] – `MUI v5 - Components > PrimaryNav` (#9090) * feat: [M3-6470] - Add resource links to StackScripts empty state landing state (#9091) * feat: [M3-6470] - Add resource links to StackScripts empty state landing page * Add StackScriptsIcon * Update CHANGELOG.md * Update right doc url for Shell Scripts * PR: feedback organize imports * PR: Feedback * Update youtube link for Shell Scripts Explained * change: [M3-6057] - Avoid saving/uploading Cypress recordings for successful specs in CI * refactor: [M3-6347] – MUI v5 - Components > IconButton (#9102) Style migration for <IconButton />, Removes any "wrapping" to the <IconButton /> because it was not needed --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: M3-6489: React Query Linode Details - Network Tab (#9097) React Query-ifys most things under the Linode Details Network Tab --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6488] - React Query for Linode Details - General Details (#9099) Switches the "top half" of the Linodes details page to use React Query --------- Co-authored-by: Banks Nussman <banks@nussman.us> * feat: [M3-6466] Add resource links to Images empty state (#9095) * feat: [M3-6466] Add resource links to Images empty state * feat: [M3-6466] Add changelog entry * feat: [M3-6467] - Add resource links to Domains empty state landing page (#9092) * feat: [M3-6467] - Add resource links to Domains empty state landing page * Update CHANGELOG.md * feat: [M3-6466] Add changelog entry * feat: [M3-6466] fix dupe changelo entry * feat: [M3-6466] feedback: responsive change * feat: [M3-6466] feedback: responsive change --------- Co-authored-by: cpathipa <119517080+cpathipa@users.noreply.github.com> * feat: [M3-6468] Add resource links to Object Storage empty state (#9098) * feat: [M3-6468] Add resource links to Object Storage empty state * feat: [M3-6468] Add changelog entry * feat: [M3-6468] Fix smoke test * feat: [M3-6468] Fix e2e suite * feat: [M3-6468] Fix access keys header display and associated tests * feat: [M3-6468] Icon and cleanup * feat: [M3-6468] missing icon file * feat: [M3-6468] generate mocked keys from utility * feat: [M3-6468] address feedback * feat: [M3-6468] address feedback: migrate LandingHeader from legacy grid * chore: Clean up `App.tsx` and `MainContent.tsx` (#9106) fixes useless whitespace in the HTML, removes unused styles, removes unused props --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6334] - MUI v5 - Components > EntityHeader (#9109) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * fix: [M3-5768] - Verify bug still exists * chore: [m3-6511] Changelog Automation (#9104) * chore: [m3-6511] initial commit * chore: [m3-6511] Wrap up changeset generation script * chore: [m3-6511] Some cleanup * chore: [m3-6511] Wrap up changelog generation script * chore: [m3-6511] cleanup * chore: [m3-6511] formatting, try catch blocks, sorting * chore: [m3-6511] delete job * chore: [m3-6511] semver prompt * chore: [m3-6511] cleanup part 1 * chore: [m3-6511] cleanup part 2 * chore: [m3-6511] Adding contribution guide * chore: [m3-6511] feedback * feat: [M3-6511] better file naming convention * feat: [M3-6511] fix commit step * feat: [M3-6511] Address feedback 1 * feat: [M3-6511] Address feedback 2 * feat: [M3-6511] Address feedback 3 * test: [M3-6550] - Add Domain delete, import a zone, and download zone file Cypress tests (#9111) * M3-6550: Add new Domain tests * Fix comments * refactor: [M3-6569] - React Query for Support Tickets - Ticket Details (#9105) * initial refactor * clean up and make mutation for close button * do some basic unit testing * fix e2e test not accounting for params * re-add `React.memo` to `ExpandableTicketPanel` * use tss for `CloseTicketLink` * feedback @dwiley-akamai * feedback @abailly-akamai --------- Co-authored-by: Banks Nussman <banks@nussman.us> * Revert - CreateIPv4Drawer should be deleted * fix: [M3-6578] Regression with create flow header doc link (#9122) * chore: [M3-6582] - Changeset description and bug fix (#9132) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6420] – `MUI v5 - Components > TransferDisplay` (#9107) * refactor: [M3-6246] - SRC > Features > CancelLanding (#9113) * refactor: [M3-6246] - SRC > Features > CancelLanding * code cleanup * refactor: [M3-6374, M3-6344] - MUI v5 Migration - `Components > Placeholder & H1Header` (#9131) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * fix: [M3-6581] - Fix Cloud Manager Maintenance Mode (#9130) ensure we mark feature flags as loaded even if we can't load API data --------- Co-authored-by: Banks Nussman <banks@nussman.us> * fix: [M3-5783] Firewall Rules - Improve form requirements and feedback (#9127) * fix: [M3-5783] Feature Cleanup * fix: [M3-5783] Feature Cleanup 2 * fix: [M3-5783] Improve form requirements and feedback * fix: [M3-5783] Fix tests * Add changeset * fix conflicts * fix conflicts * removed unused code that I missed in conflicts * use proper mutation handlers * refactor: [M3-6333] - MUI v5 Migration - `Components > EntityDetail` (#9123) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6329] - MUI v5 Migration - `Components > EditableEntityLabel` (#9129) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * refactor: [M3-6337] - MUI v5 Migration - `Components > ErrorState` (#9128) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * change: [OCA-1137] - deprecate unifi marketplace app (#9145) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Hana Xu <hxu@akamai.com> * ci: [M3-6566] - Update container environment variables for Cypress 12.3 changes (#9089) * Restore CYPRESS_PULL_REQUEST_* vars * Document Cypress Docker container environment vars * Use YAML anchors/aliases to reduce redundancy * Remove unneeded and undefined Jenkins version environment variable * chore: Remove unused Linode components (#9155) * remove unused linodes files * remove more unused components * remove old comment --------- Co-authored-by: Banks Nussman <banks@nussman.us> * refactor: [M3-6421 & M3-6422] – MUI v5 Migration - `Components > TypeToConfirm` & `Components > TypeToConfirmDialog` (#9124) * refactor: [M3-6423] - Remove unused ViewAllLink and ActivitySummary (#9154) ## Description 📝 The original ask was to migrate the styles in the `ViewAllLink` component but the component it was used in (`ActivitySummary`) wasn't being used as far as I could tell. And the Linode detail activity seems to be populated in the `LinodeActivity` component ## How to test 🧪 Check that removing ActivitySummary and ActivitySummaryContent didn't cause any regressions * change: [M3-5963] - Update Marketplace analytics search event (#9141) * refactor: [M3-6335] - MUI v5 Migration - `Components > EntityIcon` (#9125) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * fix: [M3-6622] - Fix Dialog Title Close Button Color (#9160) This PR sets the color of the close button in the Dialog title to primary to make it match production --------- Co-authored-by: Banks Nussman <banks@nussman.us> * Tech Story [M3-6276]: Nodebalancers MUI Migration (#9139) * Refactor: [M3-6276]: ConfigNodeIPSelect * Refactor: [M3-6276]: NodeBalancerConfigNode * Refactor: [M3-6276]: NodeBalancerConfigPanel * Refactor: [M3-6276]: NodeBalancerSummary * Refactor: [M3-6276]: NodeBalancerLandingEmpty * Refactor: [M3-6276]: NodeBalancerConfigurations * Refactor: [M3-6276]: SummaryPanel * Refactor: [M3-6276]: TablesPanel * Added changeset: Nodebalancers (feature) MUI Migration * Refactor: [M3-6276]: Address feedback * Chore: [M3-6511] Changeset BOT (#9137) * Feat m3 6511 bot squash (#1) * chore: [m3-6511] initial commit * chore: [m3-6511] Wrap up changeset generation script * chore: [m3-6511] Some cleanup * chore: [m3-6511] Wrap up changelog generation script * chore: [m3-6511] cleanup * chore: [m3-6511] semver prompt * chore: [m3-6511] cleanup part 1 * chore: [m3-6511] cleanup part 2 * chore: [m3-6511] Adding contribution guide * chore: [m3-6511] feedback * feat: [M3-6511] Initial bot commit * feat: [M3-6511] find PR changeset script * Add changeset * feat: [M3-6511] clean up old data * feat: [M3-6511] save progress with commenting script * feat: [M3-6511] save progress with commenting script 2 * feat: [M3-6511] Post rebase fix * feat: [M3-6511] dotenv update * feat: [M3-6511] dotenv update * feat: [M3-6511] workflow and cleanup * feat: [M3-6511] more cleanup * feat: [M3-6511] new workflow node V * feat: [M3-6511] new workflow node V * feat: [M3-6511] workflow update 1 * feat: [M3-6511] workflow update 2 * feat: [M3-6511] workflow update 3 * feat: [M3-6511] workflow update 4 * feat: [M3-6511] debug 1 * feat: [M3-6511] debug 2 * feat: [M3-6511] debug 3 * feat: [M3-6511] debug 4 * feat: [M3-6511] debug 5 * feat: [M3-6511] debug 6 * feat: [M3-6511] debug 7 * feat: [M3-6511] debug 8 * feat: [M3-6511] debug 9 * feat: [M3-6511] debug 10 * feat: [M3-6511] debug 11 * feat: [M3-6511] debug 12 * feat: [M3-6511] debug 13 * feat: [M3-6511] debug 14 * feat: [M3-6511] debug 15 * feat: [M3-6511] debug 16 * feat: [M3-6511] debug 17 * feat: [M3-6511] debug 18 * feat: [M3-6511] debug 19 * feat: [M3-6511] debug 20 * feat: [M3-6511] debug 21 * feat: [M3-6511] debug 22 * feat: [M3-6511] debug 23 * feat: [M3-6511] debug 24 * feat: [M3-6511] disable ci temporarily * feat: [M3-6511] debug 25 * feat: [M3-6511] debug 26 * feat: [M3-6511] debug 27 * feat: [M3-6511] debug 28 * feat: [M3-6511] debug 29 * feat: [M3-6511] debug 30 * feat: [M3-6511] cleanup * feat: [M3-6511] more cleanup * feat: [M3-6511] final cleanup * Added changeset: Changeset bot to remind contributors to include a changeset when needed * feat: [M3-6511] Post rebase fix * Update packages/manager/scripts/changelog/compiled/README.md Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> --------- Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * refactor: [M3-6493] - React Query - Linode Detail - Settings Tab (#9121) * react query-ify linode settings components * clean up exports * add basic testing for `<LinodeSettingsLabelPanel />` * improve the `<LinodeSettingsLabelPanel />` test * remove unneeded restricted user logic * Added changeset: React Query for Linode Details Settings Tab --------- Co-authored-by: Banks Nussman <banks@nussman.us> * fix: [M3-5768] - * refactor: [M3-6331] - MUI v5 - `Components > EnhancedNumberInput` (#9152) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * Chore: [M3-6511]: Fix Albot (#9166) * Chore: [M3-6511]: Fixing Albot part 1 * Chore: [M3-6511]: Fixing Albot part 2 * Chore: [M3-6511]: Fixing Albot part 3 * Chore: [M3-6511]: Fixing Albot part 4 * Chore: [M3-6511]: Fixing Albot part 5 * Chore: [M3-6511]: Fixing Albot part 6 * chore: Organize files under `src/foundations/` (#9157) Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * Chore: [M3-6511]: Goodbye for now, Albot (#9170) * Chore: [M3-6511]: Goodbye for now, Albot * Chore: [M3-6511]: Remove associated changeset * Refactor: [M3-6277] Notification center MUI Migration (#9162) * add changelog entry * Refactor: [M3-6277]: RenderEvent & RenderProgressEvent * Refactor: [M3-6277]: useFormattedNotifications * Refactor: [M3-6277]: cleanup and commenting * Refactor: [M3-6277]: NotificationSection * Refactor: [M3-6277]: Small styling fixes * Rebase fix * Refactor: [M3-6277]: Adjust styles * Refactor: [M3-6277]: Address feedback * Refactor: [M3-6277]: Address feedback 2 * Refactor: [M3-6277]: Address feedback 3 --------- Co-authored-by: Banks Nussman <banks@nussman.us> * fix: [M3-6586] - Improve error handing for loadScript and Adobe Analytics (#9161) * Remove exception logged when AA custom event cannot fire * Return a promise from loadScript * Update check in resolved promise * Add changeset * Define constant for Adobe script number * Address feedback * Changelogs for Cloud v1.94.0 and JS Client v0.93.0 * Cloud version 1.94.0, API v4 version 0.23.0 * Update changelog * Delete changeset, update api-v4 change log release date --------- Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com> Co-authored-by: ecarrill <ecarrill@akamai.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: carrillo-erik <119514965+carrillo-erik@users.noreply.github.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Co-authored-by: Banks Nussman <banks@nussman.us> Co-authored-by: cliu-akamai <126020611+cliu-akamai@users.noreply.github.com> Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com> Co-authored-by: rmcintosh <rmcintosh@users.noreply.github.com> Co-authored-by: mjac0bs <mjacobs@akamai.com> Co-authored-by: Richie McIntosh <93939013+richardmcintosh@users.noreply.github.com> Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> Co-authored-by: tbaka <48444023+tbaka@users.noreply.github.com> Co-authored-by: Hana Xu <hxu@akamai.com> Co-authored-by: Hana Xu <115299789+hana-linode@users.noreply.github.com>

abailly-akamai self-assigned this Apr 24, 2023

abailly-akamai commented Apr 24, 2023

View reviewed changes

abailly-akamai force-pushed the feature/accessible-graph-data branch from 11bb8e2 to e86597c Compare April 24, 2023 16:16

abailly-akamai marked this pull request as ready for review April 24, 2023 16:19

abailly-akamai requested a review from jdamore-linode April 24, 2023 16:19

jaalah-akamai reviewed Apr 24, 2023

View reviewed changes

abailly-akamai added 16 commits April 25, 2023 08:56

fix: [M3-5915] - initial commit for new component

7b6b033

feat: [M3-5915] - initial commit for new component

6d35c20

fix: [M3-5915] - dynamic rendering based on filters

516ea60

fix: [M3-5915] - markup, comments, styles & cleanup

b13c4d5

fix: [M3-5915] - improve canvas accessibility tags

5d8b163

fix: [M3-5915] - accessible units for new chart data table

fd0176a

feat: [M3-5915] - add aria-describedby

96ac771

feat: [M3-5915] - safeguards

88bc353

feat: [M3-5915] - changelo update

df9806e

feat: [M3-5915] - safer ID

33c9b2a

feat: [M3-5915] - add test

9800f02

feat: [M3-5915] - address feedback

4acfca4

feat: [M3-5915] - address feedback 2

bc718d1

feat: [M3-5915] - address feedback 3

e720d01

feat: [M3-5915] - update storybook

a60282f

feat: [M3-5915] - code cleanup

a38a1c4

abailly-akamai force-pushed the feature/accessible-graph-data branch from 8639305 to a38a1c4 Compare April 25, 2023 12:58

jaalah-akamai approved these changes Apr 26, 2023

View reviewed changes

jaalah-akamai added Add'tl Approval Needed Waiting on another approval! Accessibility Contains accessibility improvements or changes labels Apr 26, 2023

dwiley-akamai reviewed Apr 26, 2023

View reviewed changes

feat: [M3-5915] - prevent malformed value data

4413405

mjac0bs reviewed Apr 26, 2023

View reviewed changes

cpathipa approved these changes Apr 26, 2023

View reviewed changes

dwiley-akamai approved these changes Apr 26, 2023

View reviewed changes

feat: [M3-5915] - address feedback

63310a9

mjac0bs approved these changes Apr 26, 2023

View reviewed changes

abailly-akamai merged commit 55744e6 into linode:develop Apr 26, 2023

This was referenced May 15, 2023

Release v1.93.0 - Release → Staging #9115

Merged

Release v1.93.0 - Staging → Master #9116

Merged

Release v1.93.1 - staging → master #9138

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-5915] Accessible graph data #9045

feat: [M3-5915] Accessible graph data #9045

abailly-akamai commented Apr 21, 2023 •

edited by mjac0bs

Loading

cypress bot commented Apr 21, 2023 •

edited

Loading

abailly-akamai Apr 24, 2023

abailly-akamai Apr 24, 2023

abailly-akamai Apr 24, 2023

abailly-akamai Apr 24, 2023

abailly-akamai Apr 24, 2023 •

edited

Loading

jaalah-akamai Apr 24, 2023

abailly-akamai Apr 25, 2023

jaalah-akamai Apr 24, 2023

abailly-akamai Apr 25, 2023

jaalah-akamai Apr 24, 2023

abailly-akamai Apr 25, 2023

jaalah-akamai Apr 24, 2023

abailly-akamai Apr 25, 2023

jaalah-akamai left a comment

dwiley-akamai left a comment

abailly-akamai commented Apr 26, 2023

mjac0bs left a comment

mjac0bs Apr 26, 2023

abailly-akamai commented Apr 26, 2023 •

edited

Loading

cpathipa left a comment

cpathipa Apr 26, 2023

cpathipa Apr 26, 2023

abailly-akamai Apr 26, 2023

dwiley-akamai commented Apr 26, 2023

mjac0bs left a comment

feat: [M3-5915] Accessible graph data #9045

feat: [M3-5915] Accessible graph data #9045

Conversation

abailly-akamai commented Apr 21, 2023 • edited by mjac0bs Loading

Description 📝

Preview 📷

How to test 🧪

cypress bot commented Apr 21, 2023 • edited Loading

2 flaky tests on run #3202 ↗︎

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai Apr 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaalah-akamai left a comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai commented Apr 26, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai commented Apr 26, 2023 • edited Loading

cpathipa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dwiley-akamai commented Apr 26, 2023

mjac0bs left a comment

Choose a reason for hiding this comment

abailly-akamai commented Apr 21, 2023 •

edited by mjac0bs

Loading

cypress bot commented Apr 21, 2023 •

edited

Loading

abailly-akamai Apr 24, 2023 •

edited

Loading

abailly-akamai commented Apr 26, 2023 •

edited

Loading