Merge branch 'master' into chore/clean-up-aat-artifacts

carbon-design-system · Jan 5, 2021 · 8be5165 · 8be5165
2 parents ba29649 + 2c3b11b
commit 8be5165
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -10623,7 +10623,6 @@ $disabled-01: if(
   - [accordion [mixin]](#accordion-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
   - [date-picker [mixin]](#date-picker-mixin)
-  - [dropdown [mixin]](#dropdown-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [number-input [mixin]](#number-input-mixin)
   - [search [mixin]](#search-mixin)
@@ -20554,7 +20553,6 @@ Dropdown styles
   }
 
   .#{$prefix}--dropdown--disabled {
-    background-color: $disabled-01;
     border-bottom-color: transparent;
 
     &:hover {
@@ -20705,7 +20703,6 @@ Dropdown styles
   - [selected-ui [variable]](#selected-ui-variable)
   - [text-02 [variable]](#text-02-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
-  - [disabled-01 [variable]](#disabled-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
   - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
   - [carbon--spacing-04 [variable]](#carbon--spacing-04-variable)

diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
@@ -348,7 +348,6 @@
   }
 
   .#{$prefix}--dropdown--disabled {
-    background-color: $disabled-01;
     border-bottom-color: transparent;
 
     &:hover {

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
@@ -329,6 +329,7 @@ export default class DatePicker extends Component {
           onValueUpdate: onHook,
         });
         this.addKeyboardEvents(this.cal);
+        this.addRoleAttributeToDialog();
       }
     }
   }
@@ -386,6 +387,22 @@ export default class DatePicker extends Component {
     }
   };
 
+  /**
+   * Flatpickr's calendar dialog is not rendered in a landmark causing an
+   * error with IBM Equal Access Accessibility Checker so we add an aria
+   * role to the container div.
+   */
+  addRoleAttributeToDialog = () => {
+    if (this.inputField) {
+      this.cal.calendarContainer.setAttribute('role', 'region');
+      // IBM EAAC requires an aria-label on a role='region'
+      this.cal.calendarContainer.setAttribute(
+        'aria-label',
+        'calendar-container'
+      );
+    }
+  };
+
   addKeyboardEvents = (cal) => {
     if (this.inputField) {
       this.inputField.addEventListener('keydown', (e) => {