feat(CDropdownToggle): add splitLabel prop for customizable screen reader text

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx

@@ -34,6 +34,14 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    */
   split?: boolean
 
+  /**
+   * Screen reader label for split button dropdown toggle.
+   *
+   * @default 'Toggle Dropdown'
+   * @since 5.9.0
+   */
+  splitLabel?: string
+
   /**
    * Sets which event handlers you'd like provided to your toggle prop. You can
    * specify one trigger or an array of them.
@@ -50,6 +58,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   className,
   navLink = true,
   split,
+  splitLabel = 'Toggle Dropdown',
   trigger = 'click',
   ...rest
 }) => {
@@ -117,7 +126,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   return (
     <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
       {children}
-      {split && <span className="visually-hidden">Toggle Dropdown</span>}
+      {split && <span className="visually-hidden">{splitLabel}</span>}
     </CButton>
   )
 }
@@ -128,6 +137,7 @@ CDropdownToggle.propTypes = {
   className: PropTypes.string,
   custom: PropTypes.bool,
   split: PropTypes.bool,
+  splitLabel: PropTypes.string,
   trigger: triggerPropType,
 }
 

packages/docs/content/api/CDropdownToggle.api.mdx

@@ -145,6 +145,16 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
           <p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</p>
         </td>
       </tr>
+      <tr id="cdropdowntoggle-split-label">
+        <td className="text-primary fw-semibold">splitLabel<a href="#cdropdowntoggle-split-label" aria-label="CDropdownToggle splitLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">5.9.0+</span></td>
+        <td><code>{`Toggle Dropdown`}</code></td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">
+          <p>Screen reader label for split button dropdown toggle.</p>
+        </td>
+      </tr>
       <tr id="cdropdowntoggle-trigger">
         <td className="text-primary fw-semibold">trigger<a href="#cdropdowntoggle-trigger" aria-label="CDropdownToggle trigger permalink" className="anchor-link after">#</a></td>
         <td><code>{`click`}</code></td>

packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx

@@ -24,7 +24,7 @@ export const DropdownDropendExample = () => {
 
       <CDropdown variant="btn-group" direction="dropend">
         <CButton color="secondary">Small split button</CButton>
-        <CDropdownToggle color="secondary" split />
+        <CDropdownToggle color="secondary" split splitLabel="Toggle Dropend" />
         <CDropdownMenu>
           <CDropdownItem href="#">Action</CDropdownItem>
           <CDropdownItem href="#">Another action</CDropdownItem>

packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx

@@ -25,7 +25,7 @@ export const DropdownDropstartExample = () => {
 
       <CButtonGroup>
         <CDropdown variant="btn-group" direction="dropstart">
-          <CDropdownToggle color="secondary" split />
+          <CDropdownToggle color="secondary" split splitLabel="Toggle Dropstart" />
           <CDropdownMenu>
             <CDropdownItem href="#">Action</CDropdownItem>
             <CDropdownItem href="#">Another action</CDropdownItem>