fix(buttons): Add aria-pressed to stateful Buttons (#4650)

* update stateful buttons with aria-pressed

* update stateful button tests

* add release notes

* update docs with aria-pressed info

* make stateful buttons interactive

* update tests

Author: Dottenpixel

RELEASENOTES.md

@@ -10,6 +10,11 @@
 
 ## Release 2.15.5 - April 29, 2021
 
+## Components
+### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
+#### Added
+- Added `aria-pressed` attribute to stateful Button variants
+
 ## Release 2.15.4 - April 27, 2021
 
 ## Release 2.15.3 - April 15, 2021

ui/components/buttons/RELEASENOTES.md

@@ -3,6 +3,11 @@
 # Buttons Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.15.5
+
+### Added
+
+- Added `aria-pressed` attribute to stateful Button variants
 
 ## 2.15.0
 

ui/components/buttons/__tests__/__snapshots__/snapshot.spec.jsx.snap

@@ -113,6 +113,7 @@ exports[`Button  renders an outline brand button 1`] = `
 exports[`Dual Stateful Button renders a disabled dual stateful button 1`] = `
 <button
   aria-live="assertive"
+  aria-pressed="false"
   className="slds-button slds-button_neutral slds-button_dual-stateful"
   disabled={true}
   onClick={[Function]}
@@ -149,6 +150,7 @@ exports[`Dual Stateful Button renders a disabled dual stateful button 1`] = `
 exports[`Dual Stateful Button renders a not-pressed dual stateful button 1`] = `
 <button
   aria-live="assertive"
+  aria-pressed="false"
   className="slds-button slds-button_neutral slds-button_dual-stateful"
   onClick={[Function]}
 >
@@ -184,6 +186,7 @@ exports[`Dual Stateful Button renders a not-pressed dual stateful button 1`] = `
 exports[`Dual Stateful Button renders a pressed dual stateful button 1`] = `
 <button
   aria-live="assertive"
+  aria-pressed="true"
   className="slds-button slds-button_neutral slds-button_dual-stateful slds-is-pressed"
   onClick={[Function]}
 >
@@ -219,8 +222,11 @@ exports[`Dual Stateful Button renders a pressed dual stateful button 1`] = `
 exports[`Stateful Button  renders a not-selected stateful button 1`] = `
 <button
   aria-live="assertive"
+  aria-pressed="false"
   className="slds-button slds-button_neutral slds-button_stateful slds-not-selected"
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
 >
   <span
     className="slds-text-not-selected"
@@ -267,8 +273,11 @@ exports[`Stateful Button  renders a not-selected stateful button 1`] = `
 exports[`Stateful Button  renders a selected and focused stateful button 1`] = `
 <button
   aria-live="assertive"
+  aria-pressed="true"
   className="slds-button slds-button_neutral slds-button_stateful slds-is-selected-clicked"
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
 >
   <span
     className="slds-text-not-selected"
@@ -315,8 +324,11 @@ exports[`Stateful Button  renders a selected and focused stateful button 1`] = `
 exports[`Stateful Button  renders a selected stateful button 1`] = `
 <button
   aria-live="assertive"
+  aria-pressed="true"
   className="slds-button slds-button_neutral slds-button_stateful slds-is-selected"
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
 >
   <span
     className="slds-text-not-selected"

ui/components/buttons/docs.mdx

@@ -210,7 +210,12 @@ The button contains three spans with classes that hide or show the content of th
 
 <Blockquote type="a11y" header="Accessibility Requirement">
   <p>
-    Be sure to include the attribute <code>aria-live="assertive"</code> on the
+    The stateful button should have <code>aria-pressed="true"</code> or <code>"false"</code> and the accessible label
+    should be static and describe the pressed state, so for example a "follow" button
+    would always say "follow" and the sense that you are "following" is actually derived
+    from <code>aria-pressed</code> being true.
+
+    Also, be sure to include the attribute <code>aria-live="assertive"</code> on the
     button. The <code>aria-live="assertive"</code> attribute means the value of
     the <code>&lt;span&gt;</code> inside the button will be spoken whenever it
     changes.
@@ -258,7 +263,12 @@ The button contains two spans. Each span contains display text and a correspondi
 
 <Blockquote type="a11y" header="Accessibility Requirement">
   <p>
-    Be sure to include the attribute <code>aria-live="assertive"</code> on the
+    The stateful button should have <code>aria-pressed="true"</code> or <code>"false"</code> and the accessible label
+    should be static and describe the pressed state, so for example a "follow" button
+    would always say "follow" and the sense that you are "following" is actually derived
+    from <code>aria-pressed</code> being true.
+
+    Also, be sure to include the attribute <code>aria-live="assertive"</code> on the
     button. The <code>aria-live="assertive"</code> attribute means the value of
     the <code>&lt;span&gt;</code> inside the button will be spoken whenever it
     changes.

ui/components/buttons/dual-stateful/example.jsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import SvgIcon from '../../../shared/svg-icon';
 import classNames from 'classnames';
@@ -43,15 +43,18 @@ PressedText.propTypes = {
 
 const DualStatefulButton = props => {
   const { isDisabled, isPressed } = props;
+  const [buttonSelected, setButtonSelected] = useState(isPressed);
 
   return (
     <Button
       isNeutral
       className={classNames('slds-button_dual-stateful', {
-        'slds-is-pressed': isPressed
+        'slds-is-pressed': buttonSelected
       })}
       disabled={isDisabled}
       aria-live="assertive"
+      aria-pressed={Boolean(buttonSelected).toString()}
+      onClick={() => setButtonSelected(!buttonSelected)}
     >
       <DefaultText>Follow</DefaultText>
       <PressedText>Following</PressedText>

ui/components/buttons/stateful/example.jsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import SvgIcon from '../../../shared/svg-icon';
 import classNames from 'classnames';
@@ -15,17 +15,25 @@ export let StatefulButton = props => {
     isSelected,
     isSelectedClicked
   } = props;
+  const [buttonSelected, setButtonSelected] = useState(
+    isSelected || isSelectedClicked
+  );
+  const [buttonFocused, setButtonFocused] = useState(isSelectedClicked);
 
   return (
     <Button
       className={classNames('slds-button_stateful', className, {
-        'slds-not-selected': isNotSelected,
-        'slds-is-selected': isSelected,
-        'slds-is-selected-clicked': isSelectedClicked
+        'slds-not-selected': !buttonSelected,
+        'slds-is-selected': buttonSelected && !buttonFocused,
+        'slds-is-selected-clicked': buttonSelected && buttonFocused
       })}
       disabled={disabled}
       aria-live="assertive"
+      aria-pressed={Boolean(buttonSelected).toString()}
       isNeutral
+      onBlur={() => setButtonFocused(false)}
+      onFocus={() => setButtonFocused(true)}
+      onClick={() => setButtonSelected(!buttonSelected)}
     >
       <span className="slds-text-not-selected">
         <SvgIcon