fix(menus): Add aria-expanded attribute to Button Icon menu trigger (#4621)

Dottenpixel · web-flow · commit aa6cad3960ef · 2021-04-07T13:49:16.000-07:00
* add aria-expanded attribute

* add docs

* refactor out more className props

* update menus and color-picker tests

* update aria-expanded attr assignment on button-icons

* update page-header tests

* update button groups to use aria-expanded

* update button-groups and button-icons tests

* update data-tables tests

* add release ntoes

* remove debugging code
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -1,6 +1,13 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
+## Release 2.15.1 - April 2, 2021
+
+## Components
+### [Menus](https://www.lightningdesignsystem.com/components/menus)
+#### Added
+- Added `aria-expanded` attribute to menu triggers with value dependent on menu's open state
+
 ## Release 2.15.0 - March 25, 2020
 
 - Removed Salesforce Sans as the default typeface and replaced it with OS-specific defaults.
diff --git a/ui/components/breadcrumbs/base/example.jsx b/ui/components/breadcrumbs/base/example.jsx
@@ -23,7 +23,7 @@ const moreIcon = (
 );
 
 let BreadcrumbMenu = props => (
-  <Trigger className="slds-is-open" triggerIcon={moreIcon}>
+  <Trigger isOpen triggerIcon={moreIcon}>
     <Menu className="slds-dropdown_left slds-dropdown_actions">
       <MenuList>
         <MenuItem tabIndex="0">Menu Item One</MenuItem>
diff --git a/ui/components/button-groups/__tests__/__snapshots__/index.spec.js.snap b/ui/components/button-groups/__tests__/__snapshots__/index.spec.js.snap
@@ -80,9 +80,10 @@ exports[`renders a button group with overflow open 1`] = `
       Save
     </button>
     <div
-      className="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last slds-is-open"
+      className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-button_last"
     >
       <button
+        aria-expanded="true"
         aria-haspopup="true"
         className="slds-button slds-button_icon slds-button_icon-border-filled"
         onClick={[Function]}
@@ -207,6 +208,7 @@ exports[`renders a row a button icons spaced out 1`] = `
       className="slds-dropdown-trigger slds-dropdown-trigger_clicked"
     >
       <button
+        aria-expanded="false"
         aria-haspopup="true"
         className="slds-button slds-button_icon slds-button_icon-more"
         onClick={[Function]}
@@ -243,6 +245,7 @@ exports[`renders a row a button icons spaced out 1`] = `
       className="slds-dropdown-trigger slds-dropdown-trigger_clicked"
     >
       <button
+        aria-expanded="false"
         aria-haspopup="true"
         className="slds-button slds-button_icon slds-button_icon-more"
         onClick={[Function]}
diff --git a/ui/components/button-groups/__tests__/index.spec.js b/ui/components/button-groups/__tests__/index.spec.js
@@ -33,7 +33,7 @@ it('renders a button group with overflow open', () =>
         <Button isNeutral>Refresh</Button>
         <Button isNeutral>Edit</Button>
         <Button isNeutral>Save</Button>
-        <Trigger className="slds-button_last slds-is-open">
+        <Trigger className="slds-button_last" isOpen>
           <Menu className="slds-dropdown_right slds-dropdown_actions">
             <MenuList>
               <MenuItem tabIndex="0">Overflow Item One</MenuItem>
diff --git a/ui/components/button-groups/base/example.jsx b/ui/components/button-groups/base/example.jsx
@@ -65,7 +65,7 @@ export let states = [
         <Button isNeutral>Refresh</Button>
         <Button isNeutral>Edit</Button>
         <Button isNeutral>Save</Button>
-        <Trigger className="slds-button_last" ariaExpanded="false" />
+        <Trigger className="slds-button_last" />
       </ButtonGroup>
     )
   },
@@ -78,7 +78,7 @@ export let states = [
           <Button isNeutral>Refresh</Button>
           <Button isNeutral>Edit</Button>
           <Button isNeutral>Save</Button>
-          <Trigger className="slds-button_last slds-is-open">
+          <Trigger className="slds-button_last" isOpen>
             <Menu className="slds-dropdown_right slds-dropdown_actions">
               <MenuList>
                 <MenuItem tabIndex="0">Overflow Item One</MenuItem>
diff --git a/ui/components/button-groups/list/example.jsx b/ui/components/button-groups/list/example.jsx
@@ -83,7 +83,7 @@ export let states = [
           <Button isNeutral>Save</Button>
         </ButtonGroupListItem>
         <ButtonGroupListItem>
-          <Trigger className="slds-button_last" ariaExpanded="false" />
+          <Trigger className="slds-button_last" />
         </ButtonGroupListItem>
       </ButtonGroupList>
     )
@@ -104,7 +104,7 @@ export let states = [
             <Button isNeutral>Save</Button>
           </ButtonGroupListItem>
           <ButtonGroupListItem>
-            <Trigger className="slds-button_last slds-is-open">
+            <Trigger className="slds-button_last" isOpen>
               <Menu className="slds-dropdown_right">
                 <MenuList>
                   <MenuItem tabIndex="0">Overflow Item One</MenuItem>
diff --git a/ui/components/button-icons/__tests__/__snapshots__/snapshot.spec.jsx.snap b/ui/components/button-icons/__tests__/__snapshots__/snapshot.spec.jsx.snap
@@ -260,6 +260,7 @@ exports[`button icon with container renders a disabled button icon 1`] = `
 
 exports[`button menu icon for dropdowns renders a button menu icon 1`] = `
 <button
+  aria-expanded="false"
   aria-haspopup="true"
   className="slds-button slds-button_icon slds-button_icon-more"
   onClick={[Function]}
@@ -290,6 +291,7 @@ exports[`button menu icon for dropdowns renders a button menu icon 1`] = `
 
 exports[`button menu icon for dropdowns renders a button menu icon on inversed background 1`] = `
 <button
+  aria-expanded="false"
   aria-haspopup="true"
   className="slds-button slds-button_icon slds-button_icon-container-more slds-button_icon-inverse"
   onClick={[Function]}
diff --git a/ui/components/button-icons/index.jsx b/ui/components/button-icons/index.jsx
@@ -27,6 +27,7 @@ class ButtonIcon extends Component {
       isFirst,
       isMiddle,
       isLast,
+      isOpen,
       useCurrentColor,
       innerRef,
       ...rest
@@ -112,6 +113,7 @@ class ButtonIcon extends Component {
           className
         )}
         aria-haspopup={hasDropdown ? 'true' : this.props['aria-haspopup']}
+        {...hasDropdown && { [`aria-expanded`]: isOpen ? 'true' : 'false' }}
         ref={innerRef}
         {...rest}
       >
diff --git a/ui/components/button-icons/menu/index.jsx b/ui/components/button-icons/menu/index.jsx
@@ -42,7 +42,12 @@ export const ButtonMenu = props => {
       {label ? (
         <ButtonText label={label} assistiveText={assistiveText} />
       ) : (
-        <ButtonIcon hasDropdown symbol={symbol} assistiveText={assistiveText} />
+        <ButtonIcon
+          isOpen
+          hasDropdown
+          symbol={symbol}
+          assistiveText={assistiveText}
+        />
       )}
       {children}
     </div>
diff --git a/ui/components/color-picker/__tests__/__snapshots__/index.spec.js.snap b/ui/components/color-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -5390,6 +5390,7 @@ exports[`renders a swatches only color picker 1`] = `
   className="slds-dropdown-trigger slds-dropdown-trigger_click"
 >
   <button
+    aria-expanded="false"
     aria-haspopup="true"
     className="slds-button slds-button_icon slds-button_icon-border-filled"
     onClick={[Function]}
@@ -7560,6 +7561,7 @@ exports[`renders an opened swatches only color picker 1`] = `
     className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
   >
     <button
+      aria-expanded="true"
       aria-haspopup="true"
       className="slds-button slds-button_icon slds-button_icon-border-filled"
       onClick={[Function]}
diff --git a/ui/components/color-picker/__tests__/index.spec.js b/ui/components/color-picker/__tests__/index.spec.js
@@ -49,7 +49,7 @@ it('renders a swatches only color picker', () =>
 it('renders an opened swatches only color picker', () =>
   matchesMarkup(
     <div style={{ height: '12rem' }}>
-      <Trigger className="slds-is-open">
+      <Trigger isOpen>
         <div className="slds-dropdown slds-dropdown--left">
           <div className="slds-color-picker slds-color-picker_swatches-only">
             <div className="slds-color-picker__selector">
diff --git a/ui/components/color-picker/swatches-only/example.jsx b/ui/components/color-picker/swatches-only/example.jsx
@@ -23,7 +23,7 @@ export const states = [
     label: 'Open',
     element: (
       <div style={{ height: '12rem' }}>
-        <Trigger className="slds-is-open">
+        <Trigger isOpen>
           <div className="slds-dropdown slds-dropdown_left">
             <div className="slds-color-picker slds-color-picker_swatches-only">
               <div className="slds-color-picker__selector">
diff --git a/ui/components/data-tables/__tests__/__snapshots__/index.spec.jsx.snap b/ui/components/data-tables/__tests__/__snapshots__/index.spec.jsx.snap
@@ -1691,15 +1691,15 @@ exports[`AdvancedDataTableHead component should set sort direction 1`] = `
           <input
             aria-labelledby="check-select-all-label column-group-header"
             defaultChecked={null}
-            id="checkbox-unique-id-15"
+            id="checkbox-unique-id-1"
             name="options"
             tabIndex="-1"
             type="checkbox"
-            value="checkbox-unique-id-15"
+            value="checkbox-unique-id-1"
           />
           <label
             className="slds-checkbox__label"
-            htmlFor="checkbox-unique-id-15"
+            htmlFor="checkbox-unique-id-1"
             id="check-select-all-label"
           >
             <span
@@ -1763,7 +1763,7 @@ exports[`AdvancedDataTableHead component should set sort direction 1`] = `
       </a>
       <span
         aria-atomic="true"
-        aria-live="assertive"
+        aria-live="polite"
         className="slds-assistive-text"
       >
         Sorted 
@@ -1775,7 +1775,7 @@ exports[`AdvancedDataTableHead component should set sort direction 1`] = `
         <input
           aria-label="Name column width"
           className="slds-resizable__input slds-assistive-text"
-          id="cell-resize-handle-21"
+          id="cell-resize-handle-1"
           max="1000"
           min="20"
           tabIndex="-1"
@@ -3298,7 +3298,7 @@ Array [
   </a>,
   <span
     aria-atomic="true"
-    aria-live="assertive"
+    aria-live="polite"
     className="slds-assistive-text"
   >
     Sorted 
@@ -3310,7 +3310,7 @@ Array [
     <input
       aria-label="Column Name column width"
       className="slds-resizable__input slds-assistive-text"
-      id="cell-resize-handle-7"
+      id="cell-resize-handle-1"
       max="1000"
       min="20"
       tabIndex="-1"
diff --git a/ui/components/menus/RELEASENOTES.md b/ui/components/menus/RELEASENOTES.md
@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.15.1
+
+### Added
+
+- Added `aria-expanded` attribute to menu triggers with value dependent on menu's open state
+
 ## 2.14.0
 
 ### Changed
diff --git a/ui/components/menus/__tests__/__snapshots__/index.spec.js.snap b/ui/components/menus/__tests__/__snapshots__/index.spec.js.snap
@@ -5,6 +5,7 @@ exports[`Base Menu renders a base menu to the bottom 1`] = `
   className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
 >
   <button
+    aria-expanded="true"
     aria-haspopup="true"
     className="slds-button slds-button_icon slds-button_icon-border-filled"
     onClick={[Function]}
@@ -118,6 +119,7 @@ exports[`Base Menu renders a base menu to the left 1`] = `
   className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
 >
   <button
+    aria-expanded="true"
     aria-haspopup="true"
     className="slds-button slds-button_icon slds-button_icon-border-filled"
     onClick={[Function]}
@@ -231,6 +233,7 @@ exports[`Base Menu renders a base menu to the right 1`] = `
   className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
 >
   <button
+    aria-expanded="true"
     aria-haspopup="true"
     className="slds-button slds-button_icon slds-button_icon-border-filled"
     onClick={[Function]}
@@ -344,6 +347,7 @@ exports[`Menu with submenu renders a closed submenu 1`] = `
   className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
 >
   <button
+    aria-expanded="true"
     aria-haspopup="true"
     className="slds-button slds-button_icon slds-button_icon-border-filled"
     onClick={[Function]}
@@ -530,6 +534,7 @@ exports[`Menu with submenu renders an open submenu 1`] = `
   className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
 >
   <button
+    aria-expanded="true"
     aria-haspopup="true"
     className="slds-button slds-button_icon slds-button_icon-border-filled"
     onClick={[Function]}
diff --git a/ui/components/menus/__tests__/index.spec.js b/ui/components/menus/__tests__/index.spec.js
@@ -21,9 +21,10 @@ describe('Base Menu', () => {
 });
 
 describe('Menu with submenu', () => {
-  it('renders a closed submenu', () => matchesMarkup(<Submenu />));
+  it('renders a closed submenu', () => matchesMarkup(<Submenu parentIsOpen />));
 
-  it('renders an open submenu', () => matchesMarkup(<Submenu ariaExpanded />));
+  it('renders an open submenu', () =>
+    matchesMarkup(<Submenu parentIsOpen ariaExpanded />));
 });
 
 describe('MenuItem', () => {
diff --git a/ui/components/menus/docs.mdx b/ui/components/menus/docs.mdx
@@ -28,6 +28,7 @@ The target HTML element and dropdown need to be wrapped in the class `.slds-drop
 #### Markup
 
 - The menu trigger is a focusable element (`<a>` or `<button>`) with `aria-haspopup="true"`
+- The menu trigger has the `aria-expanded` attribute applied and the value is set to `"true"` or `"false"` depending on if the menu is open or not.
 - The menu has `role="menu"` and an `aria-label` attribute whose value is the name of the menu trigger
 - The menu items have `role="menuitem"`, `role="menuitemcheckbox"`, or `role="menuitemradio"`, depending on the selection options
 
diff --git a/ui/components/menus/dropdown-height/example.jsx b/ui/components/menus/dropdown-height/example.jsx
@@ -11,7 +11,7 @@ import { Trigger, Menu, MenuList, MenuItem } from '../dropdown/example';
 
 let Length5 = props => (
   <div className="demo-only" style={{ height: '260px' }}>
-    <Trigger className="slds-is-open">
+    <Trigger isOpen>
       <Menu className="slds-dropdown_left slds-dropdown_small">
         <MenuList className="slds-dropdown_length-5">
           <MenuItem tabIndex="0">Menu Item One</MenuItem>
@@ -32,7 +32,7 @@ let Length5 = props => (
 
 let Length7 = props => (
   <div className="demo-only" style={{ height: '300px' }}>
-    <Trigger className="slds-is-open">
+    <Trigger isOpen>
       <Menu className="slds-dropdown_left slds-dropdown_small">
         <MenuList className="slds-dropdown_length-7">
           <MenuItem tabIndex="0">Menu Item One</MenuItem>
@@ -53,7 +53,7 @@ let Length7 = props => (
 
 let Length10 = props => (
   <div className="demo-only" style={{ height: '430px' }}>
-    <Trigger className="slds-is-open">
+    <Trigger isOpen>
       <Menu className="slds-dropdown_left slds-dropdown_small">
         <MenuList className="slds-dropdown_length-10">
           <MenuItem tabIndex="0">Menu Item One</MenuItem>
@@ -74,7 +74,7 @@ let Length10 = props => (
 
 let IconLength5 = props => (
   <div className="demo-only" style={{ height: '260px' }}>
-    <Trigger className="slds-is-open">
+    <Trigger isOpen>
       <Menu className="slds-dropdown_left slds-dropdown_small">
         <MenuList className="slds-dropdown_length-with-icon-5">
           <MenuItem tabIndex="0">
@@ -165,7 +165,7 @@ let IconLength5 = props => (
 
 let IconLength7 = props => (
   <div className="demo-only" style={{ height: '320px' }}>
-    <Trigger className="slds-is-open">
+    <Trigger isOpen>
       <Menu className="slds-dropdown_left slds-dropdown_small">
         <MenuList className="slds-dropdown_length-with-icon-7">
           <MenuItem tabIndex="0">
@@ -256,7 +256,7 @@ let IconLength7 = props => (
 
 let IconLength10 = props => (
   <div className="demo-only" style={{ height: '450px' }}>
-    <Trigger className="slds-is-open">
+    <Trigger isOpen>
       <Menu className="slds-dropdown_left slds-dropdown_small">
         <MenuList className="slds-dropdown_length-with-icon-10">
           <MenuItem tabIndex="0">
diff --git a/ui/components/menus/dropdown-positioning/example.jsx b/ui/components/menus/dropdown-positioning/example.jsx
diff --git a/ui/components/menus/dropdown/example.jsx b/ui/components/menus/dropdown/example.jsx
diff --git a/ui/components/menus/submenu/example.jsx b/ui/components/menus/submenu/example.jsx
diff --git a/ui/components/page-headers/__tests__/__snapshots__/snapshot.spec.js.snap b/ui/components/page-headers/__tests__/__snapshots__/snapshot.spec.js.snap
