Merge branch 'main' into typescript-iconskeleton

carbon-design-system · Sep 12, 2023 · a6f5916 · a6f5916
2 parents dc82efa + 149fc26
commit a6f5916
Show file tree

Hide file tree

Showing 13 changed files with 272 additions and 111 deletions.
diff --git a/.github/workflows/contribution-approved.yml b/.github/workflows/contribution-approved.yml
@@ -1,36 +1,26 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-# GitHub recommends pinning actions to a commit SHA.
-# To get a newer version, you will need to update the SHA.
-# You can also reference a tag or branch, but the action may change without warning
-name: Add comment on enhancement issue
+name: Contribution triage - proposal accepted and community contribution
 on:
   issues:
     types: [labeled, opened]
 
 permissions:
-      issues: write
+  issues: write
 
 jobs:
   add-comment:
     name: Add comment to with proposal accepted and community contribution
     runs-on: ubuntu-latest
-    if: 
-      ${{ (
-        contains(github.event.label.name, format('proposal{0} accepted', ':')) &&
-        contains(github.event.issue.labels.*.name, format('community contribution'))
-      ) || (
-        contains(github.event.label.name, format('community contribution')) &&
-        contains(github.event.issue.labels.*.name, format('proposal{0} accepted', ':'))
-      )}}
+    if:
+      ${{ ( contains(github.event.label.name, format('proposal{0} accepted',
+      ':')) && contains(github.event.issue.labels.*.name, format('community
+      contribution')) ) || ( contains(github.event.label.name, format('community
+      contribution')) && contains(github.event.issue.labels.*.name,
+      format('proposal{0} accepted', ':')) )}}
+
     steps:
       - name: Log github event
         env:
-          $GITHUB_CONTEXT_LABELS:
-            ${{ toJson(github.event.label) }}
+          $GITHUB_CONTEXT_LABELS: ${{ toJson(github.event.label) }}
         run: echo "$GITHUB_CONTEXT_LABELS"
       - name: Add comment
         uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 #v6.4.1

diff --git a/.github/workflows/proposal-not-pursuing.yml → ...ws/contribution-proposal-not-pursuing.yml b/.github/workflows/proposal-not-pursuing.yml → ...ws/contribution-proposal-not-pursuing.yml
@@ -1,33 +1,27 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-# GitHub recommends pinning actions to a commit SHA.
-# To get a newer version, you will need to update the SHA.
-# You can also reference a tag or branch, but the action may change without warning
-name: Add comment on enhancement issue
+name: Contribution triage - proposal not pursuing
 on:
   issues:
     types: [labeled, opened]
 
 permissions:
-      issues: write
+  issues: write
 
 jobs:
   add-comment:
-    name: If new enhancement issue is submitted, then post the following comment.
+    name:
+      If proposal is marked as not pursuing, then post the following comment.
     runs-on: ubuntu-latest
+    if:
+      ${{ contains(github.event.label.name, format('proposal{0} not pursuing',
+      ':')) }}
     steps:
       - name: Add comment
         uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 #v6.4.1
-        if: 
-          github.event.label.name == 'proposal\uFE55 not pursuing'
         with:
           script: |
             github.rest.issues.createComment({
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
               body: 'Thank you for submitting your proposal. Unfortunately, it doesn't align with our roadmap or philosophy at this time. We value your contribution and encourage you to keep engaging with the community. For more information about our triage workflow and philosophy, please visit [here](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/support.md#type-enhancement-).'
-            })
+            })
diff --git a/.github/workflows/contribution-proposal.yml b/.github/workflows/contribution-proposal.yml
@@ -1,26 +1,20 @@
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-# GitHub recommends pinning actions to a commit SHA.
-# To get a newer version, you will need to update the SHA.
-# You can also reference a tag or branch, but the action may change without warning
-name: Add comment on enhancement issue
+name: Contribution triage - enhancement created
 on:
   issues:
     types: [labeled, opened]
 
 permissions:
-      issues: write
+  issues: write
 
 jobs:
   add-comment:
-    name: If new enhancement issue is submitted, then post the following comment.
+    name:
+      If new enhancement issue is submitted, then post the following comment.
     runs-on: ubuntu-latest
+    if:
+      ${{ contains(github.event.label.name, format('type{0} enhancement 💡', ':')) }}
     steps:
       - name: Add comment
-        if: github.event.label.name == format('type{0} enhancement', ':')
         uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 #v6.4.1
         with:
           script: |
@@ -32,4 +26,4 @@ jobs:
               Your proposal is open and is now being [triaged](https://github.com/orgs/carbon-design-system/projects/51/views/1) by the Carbon team. 
               If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request volunteers from the community. 
               Read the full triaging workflow [here](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/support.md#type-enhancement-).'
-            })
+            })
diff --git a/.github/workflows/contribution-ready-to-be-worked.yml b/.github/workflows/contribution-ready-to-be-worked.yml
@@ -0,0 +1,37 @@
+name: Contribution triage - Ready to be worked
+on:
+  issues:
+    types: [unlabeled]
+
+permissions:
+  issues: write
+
+jobs:
+  add-comment:
+    name: Add comment to with proposal accepted and community contribution
+    runs-on: ubuntu-latest
+    if:
+      ${{ ( 
+        contains(github.event.label.name, 'design contribution needed') &&
+        (!contains(github.event.issue.labels.*.name, 'development contribution
+        needed'))
+      ) || ( 
+        contains(github.event.label.name, 'development
+        contribution needed') && (!contains(github.event.issue.labels.*.name,
+        'design contribution needed')) 
+      )}}
+    steps:
+      - name: Log github event
+        env:
+          $GITHUB_CONTEXT_LABELS: ${{ toJson(github.event.label) }}
+        run: echo "$GITHUB_CONTEXT_LABELS"
+      - name: Add comment
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 #v6.4.1
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'This issue is ready to be worked on. Volunteers, please feel free to join any of the [relevant meetups](https://carbondesignsystem.com/whats-happening/meetups/) to get guidance and feedback. We encourage you to bring any work in progress, no matter its state of completion. You can also ask any questions on slack. For design questions, the best channels are: [#carbon-design-system](https://ibm-studios.slack.com/archives/C0M053VPT) and [#figma-guild](https://ibm-studios.slack.com/archives/C023WKW6J5U). For developer questions, the best channels are: [#carbon-react](https://ibm-studios.slack.com/archives/C2K6RFJ1G), [#carbon-web-components](https://ibm-studios.slack.com/archives/CL83LMKSA).'
+            })
diff --git a/e2e/components/TextInput/TextInput-test.avt.e2e.js b/e2e/components/TextInput/TextInput-test.avt.e2e.js
@@ -37,4 +37,47 @@ test.describe('TextInput @avt', () => {
     await expect(page.getByRole('textbox')).toBeDisabled();
     await expect(page).toHaveNoACViolations('TextInput-Disabled');
   });
+
+  test('accessibility-checker keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'components-textinput--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const input = page.getByRole('textbox');
+
+    // Check the focus
+    await expect(input).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(input).toBeFocused();
+
+    // Check input interaction
+    await input.fill('Text');
+    await expect(input).toHaveValue('Text');
+    await page.keyboard.press('Backspace');
+    await expect(input).toHaveValue('Tex');
+  });
+
+  test('accessibility-checker keyboard nav for password', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'components-textinput--toggle-password-visibility',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const input = page.getByRole('textbox');
+    const span = page.locator('span.cds--assistive-text');
+
+    await page.keyboard.press('Tab');
+    await input.fill('Text');
+
+    // Checking toggle interaction
+    await page.keyboard.press('Tab');
+    await expect(span).toHaveText('Show password');
+    await page.keyboard.press('Enter');
+    await expect(span).toHaveText('Hide password');
+  });
 });
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3866,6 +3866,7 @@ Map {
     },
   },
   "GlobalTheme" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -3882,6 +3883,7 @@ Map {
         "type": "oneOf",
       },
     },
+    "render": [Function],
   },
   "Grid" => Object {
     "propTypes": Object {
@@ -4104,6 +4106,7 @@ Map {
     },
   },
   "Heading" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -4112,6 +4115,7 @@ Map {
         "type": "string",
       },
     },
+    "render": [Function],
   },
   "IconButton" => Object {
     "$$typeof": Symbol(react.forward_ref),
@@ -4393,6 +4397,7 @@ Map {
     },
   },
   "Layer" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "as": Object {
         "args": Array [
@@ -4427,6 +4432,7 @@ Map {
         "type": "oneOf",
       },
     },
+    "render": [Function],
   },
   "Link" => Object {
     "$$typeof": Symbol(react.forward_ref),
@@ -6640,6 +6646,7 @@ Map {
   },
   "SecondaryButton" => Object {},
   "Section" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "as": Object {
         "type": "elementType",
@@ -6654,6 +6661,7 @@ Map {
         "type": "number",
       },
     },
+    "render": [Function],
   },
   "Select" => Object {
     "$$typeof": Symbol(react.forward_ref),

diff --git a/packages/react/src/components/Heading/index.tsx b/packages/react/src/components/Heading/index.tsx
@@ -22,21 +22,26 @@ type SectionProps<E extends ElementType> = PolymorphicProps<
   SectionBaseProps
 >;
 
-export function Section<E extends ElementType = 'section'>({
-  as: BaseComponent = 'section' as E,
-  level: levelOverride,
-  ...rest
-}: SectionProps<E>) {
+export const Section = React.forwardRef(function Section<
+  E extends ElementType = 'section'
+>(
+  {
+    as: BaseComponent = 'section' as E,
+    level: levelOverride,
+    ...rest
+  }: SectionProps<E>,
+  ref: React.Ref<unknown>
+) {
   const parentLevel = React.useContext(HeadingContext);
   const level = levelOverride ?? parentLevel + 1;
   const BaseComponentAsAny = BaseComponent as any;
 
   return (
     <HeadingContext.Provider value={Math.min(level, 6) as HeadingLevel}>
-      <BaseComponentAsAny {...rest} />
+      <BaseComponentAsAny ref={ref} {...rest} />
     </HeadingContext.Provider>
   );
-}
+});
 
 Section.propTypes = {
   /**
@@ -63,10 +68,13 @@ Section.propTypes = {
 
 type HeadingProps = JSX.IntrinsicElements[`h${HeadingLevel}`];
 
-export function Heading(props: HeadingProps) {
+export const Heading = React.forwardRef(function Heading(
+  props: HeadingProps,
+  ref: React.Ref<HTMLHeadingElement>
+) {
   const HeadingIntrinsic = `h${React.useContext(HeadingContext)}` as const;
-  return <HeadingIntrinsic {...props} />;
-}
+  return <HeadingIntrinsic ref={ref} {...props} />;
+});
 
 Heading.propTypes = {
   /**

diff --git a/packages/react/src/components/Layer/index.js b/packages/react/src/components/Layer/index.js
@@ -26,13 +26,16 @@ export function useLayer() {
   };
 }
 
-export function Layer({
-  as: BaseComponent = 'div',
-  className: customClassName,
-  children,
-  level: overrideLevel,
-  ...rest
-}) {
+export const Layer = React.forwardRef(function Layer(
+  {
+    as: BaseComponent = 'div',
+    className: customClassName,
+    children,
+    level: overrideLevel,
+    ...rest
+  },
+  ref
+) {
   const contextLevel = React.useContext(LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();
@@ -42,12 +45,12 @@ export function Layer({
 
   return (
     <LayerContext.Provider value={value}>
-      <BaseComponent {...rest} className={className}>
+      <BaseComponent ref={ref} {...rest} className={className}>
         {children}
       </BaseComponent>
     </LayerContext.Provider>
   );
-}
+});
 
 Layer.propTypes = {
   /**