fix(accessibility): Replace aria-hidden wt hidden (#5188)

* fix(accessibility): Replace aria-hidden wt hidden

* review comments addressed

* updated release notes.

* release notes text updated

---------

Co-authored-by: Manjunath Kalburgi <[email protected]>

Author: manjunathkalburgi

ui/components/activity-timeline/RELEASENOTES.md

@@ -3,5 +3,8 @@
 # Activity Timeline Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Changed
+- Replaced aria-hidden with hidden attribute for components that show/hide content
 
 <!-- ## [VERSION] -->

ui/components/activity-timeline/base/example.jsx

@@ -223,7 +223,7 @@ export const DescriptionCard = props => (
       props.className
     )}
     id={props.id}
-    aria-hidden={!props.isExpanded}
+    hidden={!props.isExpanded}
   >
     {props.fields && <FieldInfoList {...props} />}
     {props.children && (

ui/components/activity-timeline/docs.mdx

@@ -30,7 +30,7 @@ Text describing the type of timeline item is placed in a `span`. It is the first
 
 **Section:**
 
-- `aria-hidden` indicates if the details section is open or closed, and if set to `true`, assistive technology hides the details section.
+- `hidden` indicates if the details section is open or closed, and if set to `true`, assistive technology hides the details section.
 
 #### Keyboard Interactions
 
@@ -46,10 +46,10 @@ Text describing the type of timeline item is placed in a `span`. It is the first
 
 <Blockquote type="a11y" header="Accessibility Note">
   <p>
-    When the user interacts with the button to open the details section, <code>aria-expanded</code> on the button should be <code>true</code> and <code>aria-hidden</code> on the details section should be <code>false</code>.
+    When the user interacts with the button to open the details section, <code>aria-expanded</code> on the button should be <code>true</code> and <code>hidden</code> on the details section should be <code>false</code>.
   </p>
   <p>
-    When the user interacts with the button to close the details section, <code>aria-expanded</code> on the button should be <code>false</code> and <code>aria-hidden</code> on the details section should be <code>true</code>.
+    When the user interacts with the button to close the details section, <code>aria-expanded</code> on the button should be <code>false</code> and <code>hidden</code> on the details section should be <code>true</code>.
   </p>
 </Blockquote>
 

ui/components/carousel/RELEASENOTES.md

@@ -3,6 +3,9 @@
 # Carousel Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Changed
+- Replaced aria-hidden with hidden attribute for components that show/hide content
 
 ## 2.7.0
 

ui/components/carousel/docs.mdx

@@ -30,7 +30,7 @@ A Carousel is built using a tabbed UI specification and requires the following t
 - Selected tab’s anchor has `tabindex="0"`, all other tabs have `tabindex="-1"`
 - Each tab’s anchor has an `aria-controls` attribute whose value is the id of the associated `<div role="tabpanel">`
 - Each tab panel has an `aria-labelledby` attribute whose value is the id of its associated `<a role="tab">`
-- Each tab panel has an `aria-hidden` attribute whose value is toggled based on which panel is visible
+- Each tab panel has an `hidden` attribute whose value is toggled based on which panel is visible
 - When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set
 
 #### Keyboard Interactions

ui/components/carousel/index.jsx

@@ -39,7 +39,7 @@ const CarouselPanel = props => (
     id={props.id}
     className={classNames('slds-carousel__panel', props.className)}
     role="tabpanel"
-    aria-hidden={props.isActive ? 'false' : 'true'}
+    hidden={!props.isActive}
     aria-labelledby={props.indicatorId}
   >
     <a
@@ -96,7 +96,7 @@ class Carousel extends Component {
           <div
             className="slds-carousel__panels"
             style={{
-              transform: `translateX(-${(this.props.panelActive - 1) * 100}%)`
+              transform: `translateX(-${(this.props.panelActive - 3) * 100}%)`
             }}
           >
             <CarouselPanel

ui/components/expandable-section/RELEASENOTES.md

@@ -3,6 +3,9 @@
 # Expandable Section Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Changed
+- Replaced aria-hidden with hidden attribute for components that show/hide content
 
 ## 2.15.0
 

ui/components/expandable-section/base/example.jsx

@@ -22,7 +22,7 @@ export let Section = props => (
 
 export let SectionContent = props => (
   <div
-    aria-hidden={props.isOpen ? 'false' : 'true'}
+    hidden={props.isOpen ? 'false' : 'true'}
     className={classNames('slds-section__content', props.className)}
     id={props.referenceId}
   >

ui/components/panels/RELEASENOTES.md

@@ -3,6 +3,9 @@
 # Panels Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Changed
+- Replaced aria-hidden with hidden attribute for components that show/hide content
 
 ## 2.15.7
 

ui/components/panels/index.jsx

@@ -21,7 +21,7 @@ export const Container = props => {
         props.drawer && 'slds-panel_drawer',
         props.isVisible ? 'slds-is-open' : 'slds-hidden'
       )}
-      aria-hidden={!props.isVisible}
+      hidden={!props.isVisible}
       id={props.id}
     >
       {props.children}