feat(modal): close button bckg color accessibility (#5168)

* feat(modal): close button bckg color accessibility

* feat(modal): release notes

* fix release notes

---------

Co-authored-by: Lauren Suh <[email protected]>
Co-authored-by: dugg molidor <[email protected]>

Author: 3 people

RELEASENOTES.general.md

@@ -3,6 +3,7 @@
 
 
 ## 2.21.0 - Upcoming
+
 ## Fixed
 
 - Update transparency values (rgba and design tokens) with transparent SLDS global styling hooks

RELEASENOTES.md

@@ -4,12 +4,127 @@
 ## Release 2.21.0 - Upcoming
 
 ## Fixed
+- Update transparency values (rgba and design tokens) with transparent SLDS global styling hooks
 - Changed anchor link ouline border black color to blue-50
+- Updated background colors for Standard and Actions icons
+- Updated icons to `v10.6.0`
+  - Standard Set:
+    - Added `bill_of_materials`
+    - Added `buyer_group_qualifier`
+    - Added `datashare_target`
+    - Added `datashares`
+    - Added `disclosure_and_compliance`
+    - Added `document_preview`
+    - Added `facility_bed`
+    - Added `market`
+    - Added `price_sheet`
+    - Added `mulesoft`
+  - Utility Set:
+    - Added `add_source`
+    - Added `app_web_messaging`
+    - Added `bookmark_stroke`
+    - Added `buyer_group_qualifier`
+    - Added `document_preview`
+    - Added `expired`
+    - Added `favorite_alt`
+    - Added `heart`
+    - Added `hourglass`
+    - Added `integration`
+    - Added `market`
+    - Added `more`
+    - Added `notification_off`
+    - Added `notification_snoozed`
+    - Added `profile_alt`
+    - Added `promotion_tiers`
+    - Added `sender_email`
+    - Added `service_appointment`
+    - Added `service_report`
+    - Added `toggle_off`
+    - Added `toggle_on`
+    - Added `mulesoft`
 
 ## Components
+### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
+#### Added
+- Configured `--slds-c-button-text-color-hover` Styling hook in Button with dual-stateful to accurately apply the text color on-hover 
+
+### [Global Navigation](https://www.lightningdesignsystem.com/components/global-navigation)
+#### Added
+- Added `role="presentation"` for globlal navigation's overflow tab item 
+
+### [Menus](https://www.lightningdesignsystem.com/components/menus)
+## Fixed
+- Fixed invalid aria roles issue in subheadings with `role=presentation`
+<!-- ## [Unreleased] -->
+
+### [Modals](https://www.lightningdesignsystem.com/components/modals)
+#### Fixed  
+- Fixed `aria-labelledby` to meet accessibility requirements specifically for screen readers.
+
 ### [Modals](https://www.lightningdesignsystem.com/components/modals)
 #### Changed
 - Added full size option for modal. This will allow the modal to reach full screen for mobile screen size and devices. When screen is bigger than mobile screen width (from 768px), full size modal will take on large size modal behaviour. 
+- Changed close button to meet accessibility requirement when in full size and in mobile width.
+
+### [Path](https://www.lightningdesignsystem.com/components/path)
+#### Added
+- Added `aria-labelledby` to meet accessibility requirements specifically for screen readers.
+
+### [Picklist](https://www.lightningdesignsystem.com/components/picklist)
+#### Added
+- Added aria-label and tabindex to fix aria-allowed-attr and aria-label sa11y issue.
+<!-- ## [Unreleased] -->
+
+### [Picklist](https://www.lightningdesignsystem.com/components/picklist)
+#### Added
+- Added `aria-label` for picklist examples to meet accessibility requirements.
+
+### [Popovers](https://www.lightningdesignsystem.com/components/popovers)
+#### Added button to the story `body-max-height-small` to fix scrollable-region-focusable wcag issue.
+## 2.19
+#### Fixed
+- Fixed hardcoded walk through header and alt image paths
+<!-- ## [Unreleased] -->
+
+### [Progress Bar](https://www.lightningdesignsystem.com/components/progress-bar)
+#### Added
+- Added id to aria-labelledby to meet accessibility requirements.
+<!-- ## [Unreleased] -->
+
+### [Progress Indicator](https://www.lightningdesignsystem.com/components/progress-indicator)
+#### Added
+- Added id to aria-labelledby to meet accessibility requirements.
+<!-- ## [Unreleased] -->
+
+### [Progress Ring](https://www.lightningdesignsystem.com/components/progress-ring)
+#### Added
+- Added aria-label attribute to the progress ring to meet accessibility requirements.
+
+### [Slider](https://www.lightningdesignsystem.com/components/slider)
+#### Added
+- Added unique id to fix duplicate-id-aria wcag issue
+<!-- ## [Unreleased] -->
+
+### [Tabs](https://www.lightningdesignsystem.com/components/tabs)
+#### Added
+- Added `role="presentation"` for overflow tab item.
+
+### [Vertical Navigation](https://www.lightningdesignsystem.com/components/vertical-navigation)
+#### Added
+- Configured `slds-nav-vertical__item` to add keyboard visual focus cue indicator
+
+### [Welcome Mat](https://www.lightningdesignsystem.com/components/welcome-mat)
+#### Fixed
+- Fixed by adding tabindex="0" and role="region" for Scrollable region must have keyboard access wcag issue
+## 2.19
+#### Fixed
+- Fixed hardcoded base info background image path
+<!-- ## [Unreleased] -->
+
+## Utilities
+### [Scrollable Utility](https://www.lightningdesignsystem.com/utilities/scrollable)
+#### Added
+- Added tabindex to fix Scrollable region must have keyboard access wcag issue
 
 ## Release 2.20.1 - December 16, 2022
 

ui/components/menus/RELEASENOTES.md

@@ -2,7 +2,7 @@
 
 # Menus Release Notes
 
-## 2.20.1
+## 2.21.0
 
 ## Fixed
 

ui/components/modals/RELEASENOTES.md

@@ -11,6 +11,7 @@
 ## 2.21.0
 ### Changed
 - Added full size option for modal. This will allow the modal to reach full screen for mobile screen size and devices. When screen is bigger than mobile screen width (from 768px), full size modal will take on large size modal behaviour. 
+- Changed close button to meet accessibility requirement when in full size and in mobile width.
 
 ## 2.19.0
 ### Changed

ui/components/modals/base/_index.scss

@@ -345,6 +345,17 @@
     }
   }
 
+  /* Close button style for modal size="full" in mobile */
+  .slds-modal_full-close-button {
+      border: none;
+
+      @include mq-medium-min {
+        /* Revert back to non-mobile sizing style.
+        All variants' closing button should look the same once out of mobile sizing. */
+        background-color: transparent;
+      }
+  }
+
   .slds-modal__close {
     right: $spacing-medium;
 

ui/components/modals/base/example.jsx

@@ -59,7 +59,8 @@ export let Modal = (props) => (
         props.closeButton !== false ? (
           <ButtonIcon
             className={classNames('slds-modal__close',
-            {'slds-button_icon-inverse': props.closeButtonInverse }
+            {'slds-button_icon-inverse': !props.isFullSize,
+            'slds-button_icon-border-filled slds-modal_full-close-button': props.isFullSize }
             )}
             iconClassName="slds-button__icon_large"
             symbol="close"
@@ -75,13 +76,13 @@ export let Modal = (props) => (
 Modal.propTypes = {
   tabIndex: PropTypes.oneOf(['-1', '0']),
   closeButtonDisabled: PropTypes.bool,
-  closeButtonInverse: PropTypes.bool,
+  isFullSize: PropTypes.bool,
 };
 
 Modal.defaultProps = {
   tabIndex: '-1',
   closeButtonDisabled: false,
-  closeButtonInverse: true,
+  isFullSize: false,
 };
 
 export let ModalHeader = (props) => (
@@ -184,10 +185,9 @@ export let ModalSizes = (props) => (
         props.size === 'small' && 'slds-modal_small',
         props.size === 'medium' && 'slds-modal_medium',
         props.size === 'large' && 'slds-modal_large',
-        props.size === 'full' &&
-        'slds-modal_full'
+        props.size === 'full' && 'slds-modal_full'
       )}
-      closeButtonInverse={props.size !== 'full'}
+      isFullSize={props.size === 'full'}
       aria-labelledby="modal-heading-01"
     >
       <ModalHeader>
@@ -225,7 +225,7 @@ export let FullTaglines = (props) => (
         props.size === 'full' &&
         'slds-modal_full'
       )}
-      closeButtonInverse={props.size !== 'full'}>
+      isFullSize={props.size === 'full'}>
       <ModalHeader>
         <h1 id="modal-heading-01" className="slds-modal__title slds-hyphenate">
           Modal header
@@ -265,7 +265,7 @@ export let FullHeadless = (props) => (
         'slds-modal_full'
       )}
       aria-labelledby="modal-heading-01"
-      closeButtonInverse={props.size !== 'full'}
+      isFullSize={props.size === 'full'}
     >
       <ModalContent className={classNames(
         props.size === 'full' && 'slds-modal_full-content slds-p-around_medium slds-modal__content_headless'
@@ -297,7 +297,7 @@ export let FullFootless = (props) => (
         'slds-modal_full'
       )}
       aria-labelledby="modal-heading-01"
-      closeButtonInverse={props.size !== 'full'}
+      isFullSize={props.size === 'full'}
     >
       <ModalHeader>
         <h1 id="modal-heading-01" className="slds-modal__title slds-hyphenate" tabindex="-1">

ui/components/progress-indicator/RELEASENOTES.md

@@ -2,7 +2,7 @@
 
 # Progress Indicator Release Notes
 
-## 2.20.0
+## 2.21.0
 
 ### Added