RubyGems - playbook_ui - Versions diffs - 16.2.0.pre.rc.0 → 16.2.0.pre.rc.2 - Mend

playbook_ui 16.2.0.pre.rc.0 → 16.2.0.pre.rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb CHANGED Viewed

@@ -65,7 +65,7 @@
 }] %>
 <%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-label-rails",
-    label: "Select a department",
-    tree_data: treeData
+  id: "select_a_department",
+  label: "Select a Department",
+  tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx CHANGED Viewed

@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id='multiselect-label'
+          id="select_a_department"
           label="Select a Department"
           onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
+            console.log("Selected Items", selectedNodes)
+          }
           treeData={treeData}
           {...props}
       />
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md ADDED Viewed

@@ -0,0 +1,3 @@
+The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input.
+Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx CHANGED Viewed

@@ -192,7 +192,7 @@ describe('MultiLevelSelect multi variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#multi-disabled-test_input')
     fireEvent.click(input)
     const disabledCheckbox = kit.querySelector('input[type="checkbox"][disabled]')
@@ -227,7 +227,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-disabled-test_input')
     fireEvent.click(input)
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -246,7 +246,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-disabled-click-test_input')
     fireEvent.click(input)
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -267,7 +267,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-enabled-click-test_input')
     fireEvent.click(input)
     const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx CHANGED Viewed

@@ -178,22 +178,40 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
               {...inputProps}
           />
           <span
+              aria-label={
+                showPassphrase
+                  ? "Passphrase currently visible. Click icon to hide password"
+                  : "Passphrase currently hidden. Click icon to reveal password"
+              }
+              aria-pressed={showPassphrase}
               className="show-passphrase-icon"
               onClick={toggleShowPassphrase}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  toggleShowPassphrase(e as any)
+                }
+              }}
+              role="button"
+              tabIndex={0}
           >
             <Body
                 className={showPassphrase ? "hide-icon" : ""}
                 color="light"
                 dark={dark}
             >
-              <Icon icon="eye-slash" />
+              <Icon
+                  aria={{ label: "eye icon" }}
+                  icon="eye-slash"
+              />
             </Body>
             <Body
                 className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
-            <Icon
+            <Icon
+                aria={{ label: "eye icon" }}
                 className="svg-inline--fa"
                 customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
             />

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx CHANGED Viewed

@@ -94,25 +94,51 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions)
+  const fieldId = id ? (id as string) : null
+  const labelElementId = fieldId ? `${fieldId}-label` : null
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
     setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
+      const oldId = editorInstance.element?.getAttribute("input")
+      if (!oldId) return
+      const hiddenInput = document.getElementById(oldId) as HTMLElement | null
+      if (!hiddenInput) return
+      const hiddenInputId = (inputOptions.id as string) || oldId
+      if (hiddenInputId !== oldId) {
+        hiddenInput.id = hiddenInputId
+        editorInstance.element?.setAttribute("input", hiddenInputId)
+      }
+      if (inputOptions.name) {
+        hiddenInput.setAttribute("name", inputOptions.name as string)
       }
+      const editorDomId = (id as string) || `${hiddenInputId}_trix`
+      const trixLabelId = ((id as string) || hiddenInputId) + "-label"
+      if (label) {
+        editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
+      }
+      editorInstance.element!.id = editorDomId
     })
   }
+  useEffect(() => {
+    if (!advancedEditor || !fieldId || !labelElementId) return
+    const dom = advancedEditor.view?.dom as HTMLElement | undefined
+    if (!dom) return
+    dom.setAttribute("aria-labelledby", labelElementId)
+    dom.setAttribute("role", "textbox")
+    dom.setAttribute("aria-multiline", "true")
+  }, [advancedEditor, fieldId, labelElementId])
   // DOM manipulation must wait for editor to be ready
   if (editor && editor.element) {
     const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -214,6 +240,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
   return (
     <div
         {...ariaProps}
@@ -223,7 +251,14 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
     {label && (
-      <label  htmlFor={id}>
+      <label
+          {...(labelFor ? { htmlFor: labelFor, id: labelElementId } : {})}
+          onMouseDown={(e) => {
+            if (!advancedEditor || !fieldId) return
+            e.preventDefault()
+            advancedEditor.commands.focus()
+          }}
+      >
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
@@ -246,9 +281,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         advancedEditor ? (
           <div
               className={classnames(
-                "pb_rich_text_editor_advanced_container",
-                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-              )}
+              "pb_rich_text_editor_advanced_container",
+              { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+            )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedLabel = (props) => {
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+    if (!editor || !editorNoLabel) return null
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx CHANGED Viewed

@@ -22,6 +22,7 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
+          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+const RichTextEditorLabel = (props) => {
+  const [value, setValue] = useState(''),
+  handleOnChange = (html) => setValue(html)
+  return (
+    <div>
+      <RichTextEditor
+          id="example"
+          label="Example Label"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+      <br/>
+      <RichTextEditor
+          label="Example Label No ID"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+export default RichTextEditorLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx CHANGED Viewed

@@ -8,6 +8,7 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
+          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml CHANGED Viewed

@@ -32,6 +32,8 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_label: Label
+  - rich_text_editor_advanced_label: Advanced (Label)
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js CHANGED Viewed

@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
 export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
+export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
+export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_table/index.ts CHANGED Viewed

@@ -79,21 +79,22 @@ export default class PbTable extends PbEnhancedElement {
           header.classList.add('sticky-left-shadow');
         }
-        accumulatedWidth += (header as HTMLElement).offsetWidth;
+        const headerWidth = (header as HTMLElement).offsetWidth;
+        accumulatedWidth += headerWidth;
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
+          if (!isLastColumn) {
+            cell.classList.add('with-border-right');
+            cell.classList.remove('sticky-left-shadow');
+          } else {
+            cell.classList.remove('with-border-right');
+            cell.classList.add('sticky-left-shadow');
+          }
+        });
       }
-      cells.forEach((cell) => {
-        cell.classList.add('sticky');
-        (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-        if (!isLastColumn) {
-          cell.classList.add('with-border-right');
-          cell.classList.remove('sticky-left-shadow');
-        } else {
-          cell.classList.remove('with-border-right');
-          cell.classList.add('sticky-left-shadow');
-        }
-      });
     });
   }
@@ -140,21 +141,22 @@ export default class PbTable extends PbEnhancedElement {
           header.classList.add('sticky-right-shadow');
         }
-        accumulatedWidth += (header as HTMLElement).offsetWidth;
-      }
+        const headerWidth = (header as HTMLElement).offsetWidth;
+        accumulatedWidth += headerWidth;
-      cells.forEach((cell) => {
-        cell.classList.add('sticky');
-        (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
-        if (!isLastColumn) {
-          cell.classList.add('with-border-left');
-          cell.classList.remove('sticky-right-shadow');
-        } else {
-          cell.classList.remove('with-border-left');
-          cell.classList.add('sticky-right-shadow');
-        }
-      });
+          if (!isLastColumn) {
+            cell.classList.add('with-border-left');
+            cell.classList.remove('sticky-right-shadow');
+          } else {
+            cell.classList.remove('with-border-left');
+            cell.classList.add('sticky-right-shadow');
+          }
+        });
+      }
     });
   }

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb CHANGED Viewed

@@ -1,15 +1,16 @@
-<%= pb_content_tag(:div, id: nil ) do  %>
+<%= pb_content_tag(:div, id: nil) do %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
-    <% if object.required_indicator %>
-      <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
-        <%= object.label %><span style="color: #DA0014;"> *</span>
+    <label for="<%= object.input_options[:id] || object.id %>">
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+          <%= object.label %><span style="color: #DA0014;"> *</span>
+        <% end %>
+      <% else %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
       <% end %>
-    <% else %>
-    <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-    <% end %>
-  </label>
+    </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
       <%= content %>
@@ -26,4 +27,3 @@
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx CHANGED Viewed

@@ -120,6 +120,7 @@ const Textarea = ({
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
+  const errorId = error ? `${id}-error` : undefined
   return (
     <div
@@ -145,7 +146,10 @@ const Textarea = ({
     )}
       {children || (
         <textarea
+            aria-describedby={errorId}
+            aria-invalid={!!error}
             disabled={disabled}
+            id={id}
             name={name}
             onChange={emojiMask ? handleChange : onChange}
             onPaste={emojiMask ? handlePaste : undefined}
@@ -167,6 +171,9 @@ const Textarea = ({
             >
               <FlexItem>
                 <Body
+                    aria={{ atomic: "true", live: "polite" }}
+                    htmlOptions={{ role: "alert" }}
+                    id={errorId}
                     margin="none"
                     status="negative"
                     text={error}
@@ -182,6 +189,9 @@ const Textarea = ({
             </Flex>
           ) : (
             <Body
+                aria={{ atomic: "true", live: "polite" }}
+                htmlOptions={{ role: "alert" }}
+                id={errorId}
                 status="negative"
                 text={error}
             />

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb CHANGED Viewed

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
 <br/>
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
 <br/>
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx CHANGED Viewed

@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
+          id="default-example-1"
       />
       <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
+          id="default-example-2"
       />
       <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
+          id="default-example-3"
       />
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Add an `id` to your Textarea so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb CHANGED Viewed

@@ -1,12 +1,14 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, id: nil) do %>
   <% if object.label.present? %>
-    <% if object.required_indicator %>
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
-        <%= object.label %><span style="color: #DA0014;"> *</span>
+    <label for="<%= object.input_options[:id] || object.id %>" >
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
+          <%= object.label %><span style="color: #DA0014;"> *</span>
+        <% end %>
+      <% else %>
+        <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
       <% end %>
-    <% else %>
-    <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
-    <% end %>
+    </label>
   <% end %>
   <% if content.present? %>
     <%= content %>
@@ -22,14 +24,28 @@
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>
           <%= pb_rails("flex/flex_item") do %>
-             <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+            <%= pb_rails("body", props: {
+              dark: object.dark,
+              status: "negative",
+              text: object.error,
+              id: object.error_id,
+              aria: { atomic: "true", live: "polite" },
+              html_options: { role: "alert" },
+            }) %>
           <% end %>
           <%= pb_rails("flex/flex_item") do %>
             <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>
           <% end %>
         <% end %>
       <% else %>
-        <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+        <%= pb_rails("body", props: {
+          dark: object.dark,
+          status: "negative",
+          text: object.error,
+          id: object.error_id,
+          aria: { atomic: "true", live: "polite" },
+          html_options: { role: "alert" },
+        }) %>
       <% end %>
     <% else %>
       <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb CHANGED Viewed

@@ -47,7 +47,9 @@ module Playbook
         merged_data = data_attrs.merge(input_data)
         base_attributes = {
-          id: input_options[:id] || "object_method",
+          'aria-describedby': error.present? ? error_id : nil,
+          'aria-invalid': error.present?,
+          id: input_options[:id] || id || "object_method",
           max_characters: max_characters,
           name: name,
           onkeyup: onkeyup,
@@ -66,6 +68,10 @@ module Playbook
         result
       end
+      def error_id
+        "#{id}-error" if error.present?
+      end
     private
       def error_class