Merge branch 'main' into logical-properties-cleanup-fixes

.all-contributorsrc

@@ -1241,6 +1241,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "cordesmj",
+      "name": "cordesmj",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7409239?v=4",
+      "profile": "https://github.com/cordesmj",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.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

.github/workflows/proposal-not-pursuing.yml → .github/workflows/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-).'
-            })
+            })

.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-).'
-            })
+            })

.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).'
+            })

README.md

@@ -251,6 +251,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/djragsdale"><img src="https://avatars.githubusercontent.com/u/4396766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Ragsdale</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=djragsdale" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/haocheng6"><img src="https://avatars.githubusercontent.com/u/7645930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hao Cheng</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=haocheng6" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/cordesmj"><img src="https://avatars.githubusercontent.com/u/7409239?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cordesmj</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cordesmj" title="Code">💻</a></td>
   </tr>
 </table>
 

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

@@ -71,20 +71,19 @@ test.describe('Dropdown @avt', () => {
     await expect(menu).not.toBeVisible();
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
-    // Navigation inside the menu
-    await page.keyboard.press('ArrowDown');
+    // Should focus on selected item by default
     await expect(
       page.getByRole('option', {
-        name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+        name: 'Option 1',
       })
     ).toHaveClass(
-      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+      'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
     );
-    // move to second option
+    // Navigation inside the menu
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
-        name: 'Option 1',
+        name: 'Option 2',
       })
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'

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

@@ -172,7 +172,7 @@ test.describe('MultiSelect @avt', () => {
     await expect(selection).not.toBeVisible();
   });
 
-  test('filterable multiselect - keyboard nav', async ({ page }) => {
+  test.slow('filterable multiselect - keyboard nav', async ({ page }) => {
     await visitStory(page, {
       component: 'FilterableMultiSelect',
       id: 'components-multiselect--filterable',

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');
+  });
 });

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),

packages/react/src/components/DataTable/Table.tsx

@@ -11,6 +11,7 @@ import React, {
   useRef,
   useCallback,
   useLayoutEffect,
+  useState,
 } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -111,6 +112,7 @@ export const Table = ({
 }: PropsWithChildren<TableProps>) => {
   const { titleId, descriptionId } = useContext(TableContext);
   const prefix = usePrefix();
+  const [isScrollable, setIsScrollable] = useState(false);
   const tableRef = useRef<HTMLTableElement>(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -185,6 +187,26 @@ export const Table = ({
 
   useWindowEvent('resize', debouncedSetTableAlignment);
 
+  // Used to set a tabIndex when the Table is horizontally scrollable
+  const setTabIndex = useCallback(() => {
+    const tableContainer = tableRef?.current?.parentNode as HTMLElement;
+    const tableHeader = tableRef?.current?.firstChild as HTMLElement;
+
+    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
+      setIsScrollable(true);
+    } else {
+      setIsScrollable(false);
+    }
+  }, []);
+
+  const debouncedSetTabIndex = debounce(setTabIndex, 100);
+
+  useWindowEvent('resize', debouncedSetTabIndex);
+
+  useLayoutEffect(() => {
+    setTabIndex();
+  }, [setTabIndex]);
+
   // recalculate table alignment once fonts have loaded
   if (
     typeof document !== 'undefined' &&
@@ -201,7 +223,10 @@ export const Table = ({
   }, [setTableAlignment, size]);
 
   const table = (
-    <div className={`${prefix}--data-table-content`}>
+    <div
+      className={`${prefix}--data-table-content`}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={isScrollable ? 0 : undefined}>
       <table
         aria-labelledby={titleId}
         aria-describedby={descriptionId}