Merge pull request #2421 from salesforce-ux/fix/regression-expando

fix(expandable-section): fix accessibility regression
salesforce-ux · May 12, 2017 · 9111552 · 9111552
2 parents bef10e8 + f20567c
commit 9111552
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/ui/components/expandable-section/_doc.scss b/ui/components/expandable-section/_doc.scss
@@ -4,24 +4,22 @@
 /**
  * Section Titles are interactive titles that open and close sections, typically on a form.
  *
- * <h4 class="site-text-heading--label">Accessibility</h4>
+ * #### Accessibility
  * If the Section Title is interactive, the button needs to be associated with the section so that assistive technology knows what the button opens and closes. The button and section also need aria attributes to indicate the open and closed state of the section.
  *
- * **Notable attributes**
+ * #### Notable attributes
  *
- * Button:
+ * **Button:**
  * - `aria-controls` is used to create an association between the button and the section. If the section has an `id="content"`, then the button should have `aria-controls="content"`.
  * - `aria-expanded` indicates if the section is open or closed and is read aloud by assitive technology when the button is focused.
  *
- * Section:
+ * **Section:**
  * - `aria-hidden` indicates if the section is open or closed, and if set to `true`, assistive technology hides the section.
  *
- *
- * **Keyboard navigation**
+ * ##### Keyboard navigation
  * - The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.
  *
- *
- * **Updating Operation and State**
+ * #### Updating Operation and State
  * - When the user interacts with the button to open the section, `aria-expanded` on the button should be `true` and `aria-hidden` on the section should be `false`.
  * - When the user interacts with the button to close the section, `aria-expanded` on the button should be `false` and `aria-hidden` on the section should be `true`.
  *

diff --git a/ui/components/expandable-section/base/_index.scss b/ui/components/expandable-section/base/_index.scss
@@ -34,7 +34,7 @@
    * @summary Element containing the action inside of an expandable section title
    *
    * @selector .slds-section__title-action
-   * @restrict .slds-section-title button
+   * @restrict .slds-section__title button
    */
   &__title-action {
     display: flex;
@@ -58,8 +58,8 @@
   /**
    * @summary Element containing the content of an expandable section
    *
-   * @selector .slds-section__title
-   * @restrict .slds-section h3
+   * @selector .slds-section__content
+   * @restrict .slds-section div
    */
   &__content {
     visibility: hidden;
@@ -72,7 +72,7 @@
   }
 
   /**
-   * Toggle visibility of section content
+   * @summary Toggle visibility of section content
    *
    * @selector .slds-is-open
    * @restrict .slds-section

diff --git a/ui/components/expandable-section/base/example.jsx b/ui/components/expandable-section/base/example.jsx
@@ -5,18 +5,23 @@ import React from 'react';
 import SvgIcon from '../../../shared/svg-icon';
 import classNames from 'classnames';
 
-/// ////////////////////////////////////////
-// Partial(s)
-/// ////////////////////////////////////////
+/* -----------------------------------------------------------------------------
+    Variables
+----------------------------------------------------------------------------- */
 
+const referenceId = 'expando-unique-id';
+
+/* -----------------------------------------------------------------------------
+    Public
+----------------------------------------------------------------------------- */
 export let Section = props =>
   <div className={classNames('slds-section', props.className)}>
     {props.children}
   </div>;
 
 export let SectionContent = props =>
   <div
-    aria-hidden={!props.isOpen}
+    aria-hidden={props.isOpen ? 'false' : 'true'}
     className={classNames('slds-section__content', props.className)}
     id={props.referenceId}
   >
@@ -31,25 +36,29 @@ export let SectionTitle = props =>
 export let SectionTitleAction = props =>
   <button
     aria-controls={props.referenceId}
-    aria-expanded={props.isOpen}
+    aria-expanded={props.isOpen ? 'true' : 'false'}
     className="slds-button slds-section__title-action"
   >
-    <SvgIcon className="slds-section__title-action-icon slds-button__icon slds-button__icon_left" sprite="utility" symbol="switch" />
+    <SvgIcon
+      className="slds-section__title-action-icon slds-button__icon slds-button__icon_left"
+      sprite="utility"
+      symbol="switch"
+    />
     <span className="slds-truncate" title={props.children}>{props.children}</span>
   </button>;
 
-/// ////////////////////////////////////////
-// Export
-/// ////////////////////////////////////////
+/* -----------------------------------------------------------------------------
+    Exports
+----------------------------------------------------------------------------- */
 
 export default (
-  <Section>
+  <Section className="slds-is-open">
     <SectionTitle>
-      <SectionTitleAction referenceId="contentClosed">
+      <SectionTitleAction referenceId={referenceId} isOpen={true}>
         Section Title
       </SectionTitleAction>
     </SectionTitle>
-    <SectionContent referenceId="contentClosed">
+    <SectionContent referenceId={referenceId} isOpen={true}>
       <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
     </SectionContent>
   </Section>
@@ -64,7 +73,25 @@ export let examples = [
         <SectionTitle className="slds-theme_shade">
           <span className="slds-truncate slds-p-horizontal_small" title="Section Title">Section Title</span>
         </SectionTitle>
-        <SectionContent isOpen>
+        <SectionContent isOpen={true}>
+          <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
+        </SectionContent>
+      </Section>
+  }
+];
+
+export let states = [
+  {
+    id: 'closed',
+    label: 'Closed',
+    element:
+      <Section>
+        <SectionTitle>
+          <SectionTitleAction referenceId={referenceId}>
+            Section Title
+          </SectionTitleAction>
+        </SectionTitle>
+        <SectionContent referenceId={referenceId}>
           <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
         </SectionContent>
       </Section>