Merge branch 'master' into 2880-tabs-keyboard-navigation

.github/labeler.yml

@@ -1,2 +1,123 @@
 'squad: system':
-  - ./**/*
+  - '*'
+  - '**/*'
+
+'package: browserslist-config-carbon':
+  - packages/browserslist-config-carbon/*
+  - packages/browserslist-config-carbon/**/*
+
+'package: bundler':
+  - packages/bundler/*
+  - packages/bundler/**/*
+
+'package: cli':
+  - packages/cli/*
+  - packages/cli/**/*
+
+'package: cli-reporter':
+  - packages/cli-reporter/*
+  - packages/cli-reporter/**/*
+
+'package: colors':
+  - packages/colors/*
+  - packages/colors/**/*
+
+'package: components':
+  - packages/components/*
+  - packages/components/**/*
+
+'package: elements':
+  - packages/elements/*
+  - packages/elements/**/*
+
+'package: eslint-config-carbon':
+  - packages/eslint-config-carbon/*
+  - packages/eslint-config-carbon/**/*
+
+'package: grid':
+  - packages/grid/*
+  - packages/grid/**/*
+
+'package: icon-build-helpers':
+  - packages/icon-build-helpers/*
+  - packages/icon-build-helpers/**/*
+
+'package: icon-helpers':
+  - packages/icon-helpers/*
+  - packages/icon-helpers/**/*
+
+'package: icons':
+  - packages/icons/*
+  - packages/icons/**/*
+
+'package: icons-angular':
+  - packages/icons-angular/*
+  - packages/icons-angular/**/*
+
+'package: icons-handlebars':
+  - packages/icons-handlebars/*
+  - packages/icons-handlebars/**/*
+
+'package: icons-react':
+  - packages/icons-react/*
+  - packages/icons-react/**/*
+
+'package: icons-vue':
+  - packages/icons-vue/*
+  - packages/icons-vue/**/*
+
+'package: import-once':
+  - packages/import-once/*
+  - packages/import-once/**/*
+
+'package: layout':
+  - packages/layout/*
+  - packages/layout/**/*
+
+'package: motion':
+  - packages/motion/*
+  - packages/motion/**/*
+
+'package: pictograms':
+  - packages/pictograms/*
+  - packages/pictograms/**/*
+
+'package: pictograms-react':
+  - packages/pictograms-react/*
+  - packages/pictograms-react/**/*
+
+'package: react':
+  - packages/react/*
+  - packages/react/**/*
+
+'package: react-hooks':
+  - packages/react-hooks/*
+  - packages/react-hooks/**/*
+
+'package: scss-generator':
+  - packages/scss-generator/*
+  - packages/scss-generator/**/*
+
+'package: sketch':
+  - packages/sketch/*
+  - packages/sketch/**/*
+
+'package: stylelint-config-elements':
+  - packages/stylelint-config-elements/*
+  - packages/stylelint-config-elements/**/*
+
+'package: text-utils':
+  - packages/text-utils/*
+  - packages/text-utils/**/*
+
+'package: themes':
+  - packages/themes/*
+  - packages/themes/**/*
+
+'package: type':
+  - packages/type/*
+  - packages/type/**/*
+
+'package: upgrade':
+  - packages/upgrade/*
+  - packages/upgrade/**/*

.github/workflows/labeler.yml

@@ -1,12 +1,13 @@
-name: 'Label pull request'
-
+name: 'Label pull requests'
 on:
-  - pull_request
-
+  schedule:
+    - cron: '*/5 * * * *'
 jobs:
-  triage:
+  labeler:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v2
-        with:
-          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+      - uses: paulfantom/periodic-labeler@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          LABEL_MAPPINGS_FILE: .github/labeler.yml

packages/components/docs/sass.md

@@ -21918,6 +21918,7 @@ Tag styles
 @mixin tags() {
   .#{$prefix}--tag {
     @include type-style('label-01');
+    @include button-reset($width: false);
 
     display: inline-flex;
     align-items: center;

packages/components/src/components/tag/_tag.scss

@@ -17,6 +17,7 @@
 @mixin tags {
   .#{$prefix}--tag {
     @include type-style('label-01');
+    @include button-reset($width: false);
 
     display: inline-flex;
     align-items: center;

packages/react/src/components/DatePicker/DatePicker.js

@@ -383,6 +383,13 @@ export default class DatePicker extends Component {
     }
   }
 
+  componentDidUpdate({ dateFormat: prevDateFormat }) {
+    const { dateFormat } = this.props;
+    if (this.cal && prevDateFormat !== dateFormat) {
+      this.cal.set({ dateFormat });
+    }
+  }
+
   componentWillUnmount() {
     if (this.cal) {
       this.cal.destroy();

packages/react/src/components/Tag/Tag-story.js

@@ -26,7 +26,7 @@ const props = {
       'red'
     ),
     disabled: boolean('Disabled (disabled)', false),
-    title: 'Clear Selection',
+    title: 'Clear Filter',
   }),
   filter() {
     return { ...this.regular(), onClick: action('onClick') };

packages/react/src/components/Tag/Tag-test.js

@@ -10,10 +10,43 @@ import Tag from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
 import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
+import { render, cleanup } from '@carbon/test-utils/react';
 
 const { prefix } = settings;
 
 describe('Tag', () => {
+  afterEach(cleanup);
+
+  describe('automated accessibility testing', () => {
+    it('should have no Axe violations', async () => {
+      const { container } = render(<Tag>This is not a tag</Tag>);
+      await expect(container).toHaveNoAxeViolations();
+    });
+
+    it('should have no DAP violations', async () => {
+      const { container } = render(
+        <main>
+          <Tag>This is not a tag</Tag>
+        </main>
+      );
+      await expect(container).toHaveNoDAPViolations('Tag');
+    });
+  });
+
+  describe('with a screenreader', () => {
+    it('filtered variant should have appropriate aria-label', () => {
+      const children = 'tag content';
+      const { container } = render(<Tag filter>{children}</Tag>);
+      const button = container.querySelector('[aria-label], [aria-labelledby]');
+      const accessibilityLabel =
+        button.getAttribute('aria-label') ||
+        button.getAttribute('aria-labelledby');
+      // This check would mirror our "Accessibility label must contain at least all of visible label"
+      // requirement
+      expect(accessibilityLabel).toEqual(expect.stringContaining(children));
+    });
+  });
+
   describe('Renders as expected', () => {
     it('should render with the appropriate type', () => {
       const tag = shallow(<Tag type="beta" />);

packages/react/src/components/Tag/Tag.js

@@ -41,19 +41,21 @@ const Tag = ({
     [`${prefix}--tag--filter`]: filter,
   });
   return filter ? (
-    <span
-      role="button"
+    <button
       className={tagClasses}
-      title={title || 'Clear filter'}
-      tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+      aria-label={
+        title !== undefined
+          ? `${title} ${children}`
+          : `Clear filter ${children}`
+      }
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
-      <Close16 aria-label={title || 'Clear filter'} />
-    </span>
+      <Close16 />
+    </button>
   ) : (
-    <span className={tagClasses} {...other}>
+    <button className={tagClasses} {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
-    </span>
+    </button>
   );
 };