Merge branch 'main' into fix/react/warnings-from-SideNav-in-console

docs/guides/support.md

@@ -6,7 +6,8 @@
 ## Table of Contents
 
 - [Overview](#overview)
-  - [What does "ongoing support" mean?](#what-does-ongoing-support-mean)
+  - [What does "ongoing support" mean regarding GitHub?](#what-does-ongoing-support-mean-regarding-github)
+  - [What does "ongoing support" mean regarding Slack?](#what-does-ongoing-support-mean-regarding-slack)
   - [What repositories do we support?](#what-repositories-do-we-support)
 - [Issues](#issues)
   - [Types of issues](#types-of-issues)
@@ -16,7 +17,7 @@
     - [type: question ❓](#type-question-)
     - [type: enhancement 💡](#type-enhancement-)
   - [Severity](#severity)
-  - [Impact](#impact)
+  - [Project](#project)
   - [Other labels](#other-labels)
   - [Alerting a team or subject matter expert](#alerting-a-team-or-subject-matter-expert)
 - [Pull requests](#pull-requests)
@@ -29,22 +30,71 @@
 
 ## Overview
 
-Ongoing support for Carbon and previous version (which will be prioritized in
-that order)
+Ongoing support for the latest version Carbon and the previous version (which
+will be prioritized in that order)
 
-### What does "ongoing support" mean?
+Whether you are triaging new issues in GitHub or responding to Slack threads in
+our support channels, here are some responses that can help get the conversation
+started in case you get stuck.
+
+- “Could you share more about what you’ve already tried?”
+- “Can you share more about your usecase?”
+- “Can you add a repro (reproduction) using Stackblitz?”
+- “After searching through [FILL IN RESOURCE HERE], I was able to find this and
+  thought it might be helpful... Let me know if that works.”
+
+### What does "ongoing support" mean regarding GitHub?
 
 - Incoming pull requests (code review, initial communication, ongoing
-  discussion, rejection or merge) from the community (i.e. not from the core
-  team)
-- Triage and shepherd issues to close. Answer questions and help our users find
-  solutions to their problems
+  discussion, rejection or merge) from the maintainer team and the community (in
+  that order).
+- Triage
+  [new issues](https://github.com/orgs/carbon-design-system/projects/39/views/6)
+  on your support day.
+- Designers triage design issues and developers triage dev issues.
 - Does not include feature enhancements or new feature requests
 
+### What does "ongoing support" mean regarding Slack?
+
+- A minimum of twice per day that maintainers monitor #carbon-design-system and
+  #carbon-react Slack support channels and respond to questions. Help our users
+  find solutions to their problems.
+- The goal is to _respond_ to every thread on your day.
+- Go into threads where members of the community answer a question and validate
+  the person in the community that answered it by adding an emoji or response
+  reiterating the answer and acknowledging the community member.
+- Use discretion to respond to applicable threads. Lean on the maintainer team's
+  private #carbon-support channel to look for subject matter experts when a
+  question goes beyond your skillset. When you ask in this channel, take a leap
+  of faith in your skills and propose a response, such as, "This is how I want
+  to respond ... YOUR REPLY HERE". Follow the question by practicing humility,
+  "How far off am I"? "What am I missing"? Remember, you're acting as an
+  advocate for the person who originally asked the question. Respresent their
+  needs to the best of your ability.
+- If a question is Carbon-related, but not necessarily related to the core
+  components, route the person to the correct Slack channel where they might
+  receive support.
+  - [ibmproducts-pal-dev](https://ibm.enterprise.slack.com/archives/C013ZTX0N6B)
+  - [ibmproducts-pal](https://ibm.enterprise.slack.com/archives/CQGR0HC05)
+  - [carbon-ng](https://ibm.enterprise.slack.com/archives/CBZC0LM2N)
+  - [carbon-for-cloud](https://ibm.enterprise.slack.com/archives/C0603NZDXRD)
+  - [carbon-charts](https://ibm.enterprise.slack.com/archives/CCA7L4MS9)
+  - [carbon-for-ibm-dotcom](https://ibm.enterprise.slack.com/archives/C2PLX8GQ6)
+  - [carbon-web-components](https://ibm.enterprise.slack.com/archives/CL83LMKSA)
+  - [carbon-wg-typescript](https://ibm.enterprise.slack.com/archives/C03C8VASVED)
+
+### Configuring the GitHub Slack integration
+
+`/github subscribe carbon-design-system/carbon`
+
+For additional guidance checkout their
+[docs](https://github.com/integrations/slack).
+
 ### What repositories do we support?
 
 - carbon-design-system/carbon
 - carbon-design-system/carbon-website
+- carbon-design-system/carbon-design-kit
 
 ## Issues
 
@@ -64,14 +114,20 @@ to define the issue their having._
 
 Using these templates also helps Project-Bot automatically move issues and new
 pull requests to the right workstreams by auto labeling the issues according to
-the template type. There are three types of issues The Support and Maintenance
-team are concerned with:
+the template type. There are three types of issues the maintainer team is
+concerned with:
 
-- type: a11y ♿
 - type: question ❓
 - type: bug 🐛
 - type: enhancement 💡
 
+In addition to the types above, the issue may also fit one or more of the
+following types of issues based on the work being performed.
+
+- type: a11y ♿
+- type: docs 📖
+- type: infrastructure 🤖
+
 ### Triaging a new issue
 
 Triage is the process of determining the severity and priority of issues _as
@@ -81,11 +137,9 @@ quickly it should be addressed.
 ### Triage Process
 
 For the different types of issues, we have created the process to triaging each
-one so that they can be moved into our Backlog. For all types of issues, assign
-yourself to the issue until it's moved to the Backlog pipeline so that others
-know the issue is being addressed.
+one so that they can be moved into our Backlog.
 
-#### type: bug 🐛 & type: a11y ♿
+#### type: bug 🐛
 
 _Process to triaged_
 
@@ -110,9 +164,8 @@ close the issue.
 Sometimes people mark their issues as a bug when in reality, they are an
 enhancement request or a question.
 
-If you find this to be the case, remove the bug label, add the
-`type: question ❓` or `type: enhancement 💡` label, and then follow the
-directions in that section.
+If you find this to be the case, remove the bug label, add the appropriate
+label, and then follow the directions in that section.
 
 </details>
 
@@ -136,8 +189,7 @@ browser or version info.
 
 </details>
 
-After all that, move the issue to the backlog pipeline in zenhub and then you're
-done! 🎉
+After all that, move the issue to the backlog and then you're done! 🎉
 
 #### type: question ❓
 
@@ -294,7 +346,7 @@ business impact that the feature will bring with future research done.
 
 ### Severity
 
-There are 4 levels of severity for issues in the Carbon core repositories:
+There are 4 levels of severity for bugs in the Carbon core repositories:
 
 - https://github.com/carbon-design-system/carbon/labels/severity%3A%201 - _"Must
   be fixed ASAP"_
@@ -374,6 +426,28 @@ workaround, a
 https://github.com/carbon-design-system/carbon/labels/severity%3A%202 or lower
 is more appropriate.
 
+After applying the severity label, be sure to also apply the appropriate role to
+the issue. Either `role: dev 🤖` or `role: design :pencil2:`, depending on which
+discipline should be working on it.
+
+### Project
+
+After assigning the role and severity, be sure to apply the correct categories
+in the GitHub Project:
+
+- Status
+  - Triage - Issues that need triaging
+  - Needs Refined - Issues that will be worked on in future sprints, but need to
+    be broken down into smaller chunks and discussed.
+  - Needs a11y review - Issues that need to be brought to the Carbon
+    Accessibility Guild for further refinement and clarity.
+  - Backlog - Issues that have been refined move into the Backlog, where they
+    will be sized and assigned for a future sprint.
+  - In progress - Issues that are being actively worked on in a given sprint.
+  - Area - The part of the system that the issue effects.
+  - Role - The discipline that will take the lead and deliver the issue to
+    completion.
+
 ### Other labels
 
 There is a large collection of labels that can help communicate the nature of an

e2e/components/Accordion/Accordion-test.avt.e2e.js

@@ -57,29 +57,33 @@ test.describe('Accordion @avt', () => {
       },
     });
 
-    const accordin_btn1 = page.getByRole('button', { name: 'Section 1 title' });
-    const accordin_btn2 = page.getByRole('button', { name: 'Section 2 title' });
+    const accordion_btn1 = page.getByRole('button', {
+      name: 'Section 1 title',
+    });
+    const accordion_btn2 = page.getByRole('button', {
+      name: 'Section 2 title',
+    });
 
-    await expect(accordin_btn1).toBeVisible();
+    await expect(accordion_btn1).toBeVisible();
     await page.keyboard.press('Tab');
 
     // Check the focus on Accordion 1
-    await expect(accordin_btn1).toBeFocused();
+    await expect(accordion_btn1).toBeFocused();
     await page.keyboard.press('Enter');
 
     // Open the Accordion 1
-    await expect(accordin_btn1).toHaveAttribute('aria-expanded', 'true');
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'true');
     await page.keyboard.press('Enter');
-    await expect(accordin_btn1).toHaveAttribute('aria-expanded', 'false');
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'false');
 
     await page.keyboard.press('Tab');
 
     // Check the focus and open state on Accordion 2
-    await expect(accordin_btn2).toBeFocused();
+    await expect(accordion_btn2).toBeFocused();
     await page.keyboard.press('Space');
-    await expect(accordin_btn2).toHaveAttribute('aria-expanded', 'true');
+    await expect(accordion_btn2).toHaveAttribute('aria-expanded', 'true');
     await page.keyboard.press('Escape');
-    await expect(accordin_btn2).toHaveAttribute('aria-expanded', 'false');
+    await expect(accordion_btn2).toHaveAttribute('aria-expanded', 'false');
   });
 
   test('@avt-advanced-states mouse click', async ({ page }) => {
@@ -90,16 +94,18 @@ test.describe('Accordion @avt', () => {
         theme: 'white',
       },
     });
-    const accordin_btn1 = page.getByRole('button', { name: 'Section 1 title' });
-    await accordin_btn1.click();
-    await expect(accordin_btn1).toHaveAttribute('aria-expanded', 'true');
+    const accordion_btn1 = page.getByRole('button', {
+      name: 'Section 1 title',
+    });
+    await accordion_btn1.click();
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'true');
 
     // Checking for ACViolation
     await expect(page).toHaveNoACViolations(
       'Accordion @avt-advanced-states mouse click'
     );
-    await accordin_btn1.click();
-    await expect(accordin_btn1).toHaveAttribute('aria-expanded', 'false');
+    await accordion_btn1.click();
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'false');
   });
 
   test('@avt-advanced-states mouse hover', async ({ page }) => {
@@ -110,8 +116,10 @@ test.describe('Accordion @avt', () => {
         theme: 'white',
       },
     });
-    const accordin_btn1 = page.getByRole('button', { name: 'Section 1 title' });
-    await accordin_btn1.hover();
+    const accordion_btn1 = page.getByRole('button', {
+      name: 'Section 1 title',
+    });
+    await accordion_btn1.hover();
     await expect(page).toHaveNoACViolations(
       'Accordion @avt-advanced-states mouse hover'
     );
@@ -128,8 +136,10 @@ test.describe('Accordion @avt', () => {
         disabled: true,
       },
     });
-    const accordin_btn1 = page.getByRole('button', { name: 'Section 1 title' });
-    await expect(accordin_btn1).toBeDisabled();
+    const accordion_btn1 = page.getByRole('button', {
+      name: 'Section 1 title',
+    });
+    await expect(accordion_btn1).toBeDisabled();
     await expect(page).toHaveNoACViolations(
       'Accordion @avt-advanced-states disabled'
     );

e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,6 +19,100 @@ test.describe('FluidComboBox @avt', () => {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('FluidComboBox @avt-default-state');
+    await expect(page).toHaveNoACViolations('FluidComboBox');
+  });
+
+  // Skipping now due to AVT violation, possible false positive
+  test.skip('@avt-advanced-states open', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidComboBox',
+      id: 'experimental-unstable-fluidcombobox--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const combobox = page.getByRole('combobox');
+
+    await expect(combobox).toBeVisible();
+    // Tab and open the ComboBox
+    await page.keyboard.press('Tab');
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('combobox', { expanded: true })).toBeVisible;
+    await expect(combobox).toBeFocused();
+
+    await expect(page).toHaveNoACViolations('FluidComboBox-open');
+  });
+
+  test('@avt-keyboard-nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidComboBox',
+      id: 'experimental-unstable-fluidcombobox--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const combobox = page.getByRole('combobox');
+    const menu = page.getByRole('listbox');
+    const clearButton = page.getByRole('button', {
+      name: 'Clear selected item',
+    });
+    const optionOne = page.getByRole('option', {
+      name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+    });
+    const optionTwo = page.getByRole('option', {
+      name: 'Option 2',
+    });
+
+    await expect(combobox).toBeVisible();
+    await expect(clearButton).not.toBeVisible();
+    // Tab and open the ComboBox with Arrow Down
+    await page.keyboard.press('Tab');
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(menu).toBeVisible();
+    // Close with Escape, retain focus, and open with Spacebar
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('Space');
+    await expect(menu).toBeVisible();
+    // Close and clear with Escape, retain focus, and open with Enter
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(menu).toBeVisible();
+    // Navigation inside the menu
+    // move to first option
+    await page.keyboard.press('ArrowDown');
+    await expect(optionOne).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select first option (should only select with enter)
+    await page.keyboard.press('Space');
+    await expect(combobox).toHaveValue(' ');
+    await page.keyboard.press('Enter');
+    await expect(combobox).toHaveValue(
+      'Lorem, ipsum dolor sit amet consectetur adipisicing elit.'
+    );
+    // focus comes back to the toggle button after selecting
+    await expect(combobox).toBeFocused();
+    await expect(menu).not.toBeVisible();
+    await expect(clearButton).toBeVisible();
+    // should only clear selection when escape is pressed when the menu is closed
+    await page.keyboard.press('Escape');
+    await expect(clearButton).not.toBeVisible();
+    await expect(combobox).toHaveValue('');
+    // should highlight menu items based on text input
+    await page.keyboard.press('2');
+    await expect(menu).toBeVisible();
+    await expect(optionTwo).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // Should select and populate combobox with current filtered item
+    await page.keyboard.press('Enter');
+    await expect(combobox).toHaveValue('Option 2');
   });
 });