playbook_ui 14.25.0.pre.alpha.PLAY2413togglefocusstate9789 → 14.25.0.pre.alpha.PLAY2422fixedconftoastaccessibility9840

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de6d77764e1005d84f779b54ad0d3c2e2f5ee63c1691aed260cf27c693218404
-  data.tar.gz: 145ef5440f3929315bf4c3d99a29f50e1caa587d0672ce09d145878cb650939b
+  metadata.gz: 1dc9dcfd7fc8bed8ccd07cbec3b1ec442d15dbb66207cff99291683c3fcb5bf4
+  data.tar.gz: 1b0852b24cf432723f49cd373243f671041cdb5e2570ef971007b8efa293a62b
 SHA512:
-  metadata.gz: 22c3c0a055a6d6f1743bcdabbd23e5a7cb6b1fa0f103e29db749364b85b8012fb2438cf0008877d14465545d033e6ef136220b569b6438c4589c028aea9ff7b0
-  data.tar.gz: b4f81fcd52d01d76e0d03cdf23df691384a1c8f24d2dc76f85b4759d045d2734a920fb624b08cf5e55cb1b1b102ff245f572379a9c362103d270c73cf3d64158
+  metadata.gz: a1c5fc5ee7cc4377f5541a5ffbfedf0d054364004bad811e7d16d7500188c867e84b36d91a97119c7118cc1a301ba0b5ad37267d29332de54ad9ff2d67a6ba1c
+  data.tar.gz: e3e5cdf76e498f93d7bb97f653cf61288b05d8c3b6df6055f4e3de5e4dfdb9048448269775873ce8787417ae0fc15842e4266317858c1b68def2f5fc1812867d

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -35,6 +35,8 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+  const [hydrated, setHydrated] = useState(false);
+
   const {
     autoClose = 0,
     children,
@@ -84,12 +86,24 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     onClose();
   };
 
+  // prevents Screen Reader from announcing all examples on page load, just dynamic on open
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+
   return (
     <>
       {showToast && (
         <div
+            aria-atomic={hydrated && open ? "true" : undefined}
+            aria-live={hydrated && open ? "polite" : undefined} 
             className={css}
             onClick={handleClick}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") handleClick();
+            }}
+            role="status"
+            tabIndex={0}
             {...htmlProps}
         >
           {returnedIcon && icon !== "none" && (
@@ -112,6 +126,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
           {closeable && (
             <Icon
+                aria={{ "label": "Close Toast" }}
                 className="pb_icon"
                 cursor="pointer"
                 fixedWidth={false}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,6 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0) do %>
     <% if object.icon_value && object.icon_value != "none" %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
     <% end %>
     <% if content %>
         <%= content %>
@@ -8,5 +8,5 @@
         <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -46,16 +46,7 @@ $transition: .2s ease-in-out;
     }
 
     input {
-      position: absolute;
-      opacity: 0;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-
-      &:focus + .pb_toggle_control {
-        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
-        outline: none;
-      }
+      display: none;
 
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
@@ -70,11 +61,7 @@ $transition: .2s ease-in-out;
     }
 
     input:checked {
-      position: absolute;
-      opacity: 0;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
+      display: none;
 
       &:checked + .pb_toggle_control {
         border: $border_success;
@@ -86,11 +73,6 @@ $transition: .2s ease-in-out;
         }
       }
 
-      &:checked:focus + .pb_toggle_control {
-        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
-        outline: none;
-      }
-
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
         opacity: 0.5;

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -23,7 +23,6 @@ type Props = {
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
-  tabIndex?: number,
   value?: string,
 } & GlobalProps
 
@@ -41,7 +40,6 @@ const Toggle = ({
   // Function body here
   },
   size = 'sm',
-  tabIndex,
   value,
   ...props
 }: Props): React.ReactElement => {
@@ -75,7 +73,6 @@ const Toggle = ({
               disabled={disabled}
               name={name}
               onChange={onChange}
-              tabIndex={tabIndex}
               type="checkbox"
               value={value}
           />

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb

@@ -1,11 +1,9 @@
 <%= pb_rails("toggle", props: {
-  checked: true,  
-  input_options: { tabindex: 0 }
+  checked: true
 }) %>
 
 <br>
 
 <%= pb_rails("toggle", props: {
-  checked: false,
-  input_options: { tabindex: 0 }
+  checked: false
 }) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -6,12 +6,11 @@ const ToggleDefault = () => {
     <>
       <Toggle
           checked
-          tabIndex={0}
       />
 
       <br />
 
-      <Toggle tabIndex={0} />
+      <Toggle />
     </>
   )
 }