[Datepicker] - Fixed a11y violations (#14406)

* fix: fixed a11y issues in the avt.e2e tests * test: updated snapshot
carbon-design-system · Aug 11, 2023 · 7d2924a · 7d2924a
1 parent e28dfdd
commit 7d2924a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
@@ -50,7 +50,7 @@ test.describe('DatePicker @avt', () => {
  });
 
  // skipping for now due to accessibility violation
- test.skip('skeleton state @avt', async ({ page }) => {
+ test('skeleton state @avt', async ({ page }) => {
  await visitStory(page, {
  component: 'DatePicker',
  id: 'components-datepicker--skeleton',
@@ -63,7 +63,7 @@ test.describe('DatePicker @avt', () => {
  });
 
  // skipping for now due to accessibility violation
- test.skip('open state @avt', async ({ page }) => {
+ test('open state @avt', async ({ page }) => {
  await visitStory(page, {
  component: 'DatePicker',
  id: 'components-datepicker--playground',

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2783,6 +2783,9 @@ Map {
  "className": Object {
  "type": "string",
  },
+ "hideLabel": Object {
+ "type": "bool",
+ },
  "id": Object {
  "type": "string",
  },

diff --git a/packages/react/src/components/DatePicker/DatePicker.Skeleton.tsx b/packages/react/src/components/DatePicker/DatePicker.Skeleton.tsx
@@ -14,21 +14,24 @@ export interface DatePickerSkeletonProps
  extends HTMLAttributes<HTMLDivElement> {
  // Specify whether the skeleton should be of range date picker.
  range?: boolean;
+
+ /**
+ * Specify whether the label should be hidden, or not
+ */
+ hideLabel?: boolean;
 }
 
 const DatePickerSkeleton = ({
  range,
  id,
+ hideLabel,
  className,
  ...rest
 }: DatePickerSkeletonProps) => {
  const prefix = usePrefix();
  const dateInput = (
  <div className={`${prefix}--date-picker-container`}>
- {
- /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */
- <label className={`${prefix}--label`} htmlFor={id} />
- }
+ {!hideLabel && <span className={`${prefix}--label`} id={id} />}
  <div className={`${prefix}--date-picker__input ${prefix}--skeleton`} />
  </div>
  );
@@ -74,6 +77,11 @@ DatePickerSkeleton.propTypes = {
  */
  className: PropTypes.string,
 
+ /**
+ * Specify whether the label should be hidden, or not
+ */
+ hideLabel: PropTypes.bool,
+
  /**
  * Specify the id to add.
  */

diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -171,6 +171,7 @@ function updateClassNames(calendar, prefix) {
  );
  forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), (item) => {
  item.classList.add(`${prefix}--date-picker__day`);
+ item.setAttribute('role', 'button');
  if (
  item.classList.contains('today') &&
  calendar.selectedDates.length > 0