Testing before 4.8.0 release

[moathabuhamad-cengage]

What to test

For each component, we will:

• Confirm functionality
• Cross browser test (Chrome, Firefox, Safari). We can also use LambdaTest to check other OS as needed
• Test accessibility (are elements read/announced as expected on a screenreader? do the elements get focus?)
• Test docs site: open all codesandbox links and ensure none are broken, confirm all relevant information is visible, etc.
• If the component had a big change (listed below), spend extra time testing that aspect (in both storybook and codesandbox)

Please complete all testing by end of day Feb 19.

Links for testing:

• https://next--upbeat-sinoussi-f675aa.netlify.app/
• https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/

Finding issues

If you find a bug or problem of any size, add a comment to this discussion. We will review all comments here and determine what is crucial for this release and what can wait. We will convert to tickets as needed.

Include the following information:

• Component:
• Description of bug:
• Steps to reproduce:
• Can it only be reproduced in dev or is it reproducible in the last released version?

Changes

Minor Changes

• 79435c9: feat(Select): Support disabling individual items in Select and Multi Select components

Patch Changes

• 4484ad2: fix(NativeSelect): Add aria-describedby to helper and error messages to associate them with the Select.
• 285a259: chore: Fix remaining unit test errors
• e689dc0: fix(TimePicker): Fix input wrong number validation.
• 4c9fa50: fix(Dropdown): fix click outside behavior in Dropdown
• 3c17025: fix(FormGroup): Fix validation for InputMessage.
• b95b94c: fix(GlobalStyles): fix @import rule warning in GlobalStyles
• 16aaefb: fix(Table): fix logic for the default rowsPerPage value.
• 9697b00: fix(Toast): Change property for Toast close button from aria-label to title.
• ed14a90: fix(MultiSelect): Fix a bug where the page refreshes when you click on a selected item.
• bbc13e6: fix(Table): Reconfigured the table CSS to better allow for content within a table to overlay the container, such as dropdowns.
• 5011751: fix(Toast): fix ring time duration
• 2b097ce: build(deps): bump path-to-regexp and express
• 48d786c: build(deps): bump nanoid from 3.3.7 to 3.3.8

Docs site

• charts docs bug fixes
• magma charts docs

What am I testing

Chris

• Container
• Dropdown
• FormGroup
• GlobalStyles

Laura

• Spinner
• Stepper
• TimePicker
• Toast

Moe

• Pagination
• Search
• Select
• NativeSelect
• NavTabs

Nikita

• ToggleButton
• Input
• Modal
• Table
• Tabs

Orion

1. Magma charts docs
2. affected doc pages

• /design-intro/get-started/
• /design/icon/
• /api-intro/usage/
• /api/button/
• /api/dropdown/
• /api/formgroup/
• /api/global-styles/
• /api/transition/
• /design/modal/
• /api-intro/styles-and-themes/
• /api/tooltip/

[silvalaura]

Component: Toast
Description of bug: The first toast under the basic usage example is not announced (all browsers). All others are.
Steps to reproduce: Navigate to https://next--upbeat-sinoussi-f675aa.netlify.app/api/toast/#basic_usage and with a screenreader, notice the default toast does not get announced.
Can it only be reproduced in dev or is it reproducible in the last released version? All versions, but this is something we specifically tried to fix in this version.

Notes
I think it's because of this conditional

      <Announce>
        {showToast ? (
          <Toast onDismiss={handleDismiss}>Default Toast</Toast>
        ) : null}
      </Announce>

if it was swapped to the following like in the other examples, it would be announced

      <Announce>
        {showToast && (
          <Toast onDismiss={handleDismiss}>Default Toast</Toast>
        )}
      </Announce>

[silvalaura]

⬇️ low priority

Component: Stepper
Description of bug: I noticed that on Chrome and Firefox, each Step in the stepper gets announced by Voiceover as "clickable" even though they are not. Voiceover + Safari does not mention clickable. Even the content area is announced the same: "Step Content One, clickable"
Steps to reproduce: Navigate to any Stepper example (https://next--upbeat-sinoussi-f675aa.netlify.app/api/stepper/) on Chrome/FF and turn on Voiceover. Navigate through the component and notice the wording.
Can it only be reproduced in dev or is it reproducible in the last released version? All versions

[silvalaura]

Component: TimePicker
Description of bug:
The implemented fix for #1517 helps the previous issue, but it doesn't fully match how MUI behaves and therefore I don't think it fully addressed the issue. It depends where you click within the time picker whether or not both numbers will be fully replaced.
https://jam.dev/c/753aa091-be3d-4fce-9630-1c1852c7328a

In MUI, you cannot place your cursor between two numbers-- it automatically selects both numbers, then pressing a number clears both. I think this is a much better experience.

This is true for all browsers.

Can it only be reproduced in dev or is it reproducible in the last released version? Dev

[orion-cengage]

Magma Charts Docs
When will the "VIEW DEMO" links on the Chart Types page correctly link over to the correct demos?

https://next--upbeat-sinoussi-f675aa.netlify.app/data-visualization/chart-types/

[silvalaura]

This ticket is still pending: #1549

[orion-cengage]

Page: https://next--upbeat-sinoussi-f675aa.netlify.app/design/icon/

Outdated link: "rounded variant"

Needs to be updated to: https://fonts.google.com/icons?icon.style=Rounded

There is currently a redirect in place on Google's side, but it doesn't pick the rounded variant the way I want it to.

[orion-cengage]

Component: Button
Section: Inverse

Codesandbox link shows error

[orion-cengage]

Page: /api-intro/styles-and-themes/
Section: Style Prop

Error showing on Codesandbox link

[chris-cedrone-cengage]

Component: Dropdown
Description of bug: Doc site example warning in both Expandable Menu Items & Expandable Menu with item auto expanded
Steps to reproduce: Go to Docs > Dropdown > Expandable Menu Items > Edit in CodeSandbox > Line 54 > Notice warning

Can it only be reproduced in dev or is it reproducible in the last released version? Both

[chris-cedrone-cengage]

Component: Dropdown
Description of bug: Voice over keyboard navigation
Steps to reproduce: Docs > Open any Dropdown example in CodeSandbox > Turn on Voiceover > Open dropdown > Verify keyboard down arrow closes Dropdown instead of navigating to next item.
Can it only be reproduced in dev or is it reproducible in the last released version? Both

[chris-cedrone-cengage]

Component: Dropdown
Description of bug: Doc site example not functioning properly.
Steps to reproduce: Docs > Active Item Index > Click on Dropdown > Make selection > Confirm Dropdown doesn't close when item is clicked.

Can it only be reproduced in dev or is it reproducible in the last released version? Both

[chris-cedrone-cengage]

Component: Dropdown
Description of bug: Doc site example not functioning properly in CodeSandbox.
Steps to reproduce bug 1/2: Docs > Handle Focus on Close > Open CodeSandbox > Click on Dropdown > Make selection > Confirm Dropdown doesn't close when item is clicked.

Steps to reproduce bug 2/2: Docs > Handle Focus on Close > Open CodeSandbox > Verify warning on onClick.

Can it only be reproduced in dev or is it reproducible in the last released version? Both

[nikitaorliak-cengage]

Component: ToggleButton
Section: Size
Description of bug: Error showing on Codesandbox link

[nikitaorliak-cengage]

Component: Table
Section: Min-Width
Description of bug: The example is broken (The table extends beyond the border instead of enabling scrolling)

[nikitaorliak-cengage]

Component: Modal (Design Page)
Description of bug: Incorrect working Modal
Steps to reproduce bug:

1. Go to https://next--upbeat-sinoussi-f675aa.netlify.app/design/modal/
2. Open any modal (Small/Medium/Large)
3. Close it by clicking on the 'X' icon or the 'Esc' button
4. See that the focus is NOT on the trigger button

What should be done: Return focus back to the trigger button

[nikitaorliak-cengage]

Component: Modal
Description of bug: Incorrect working Modal
Steps to reproduce bug:

1. Go to https://next--upbeat-sinoussi-f675aa.netlify.app/api/modal/
2. Go to section "Nested Modals"
3. Open First Modal
4. Open Second Modal inside the first one
5. Close it
6. See that the focus is NOT on the trigger button

What should be done: Return focus back to the trigger button