Merge branch 'support-slds-2' into support-slds-2-notification

Author: msmx-mnakagawa

src/scripts/DropdownButton.tsx

@@ -199,18 +199,25 @@ export const DropdownButton = (props: DropdownButtonProps) => {
         iconMore,
       }}
       {...rprops}
-      aria-haspopup
+      aria-haspopup={true}
+      aria-expanded={opened}
       buttonRef={buttonRef}
       onClick={onTriggerClick}
       onKeyDown={onKeyDown}
       onBlur={onBlur}
     />
   );
 
-  const dropdownClassNames = classnames(className, 'slds-dropdown-trigger', {
-    'slds-button-space-left': !grouped,
-    'react-slds-dropdown-opened': opened,
-  });
+  const dropdownClassNames = classnames(
+    className,
+    'slds-dropdown-trigger',
+    'slds-dropdown-trigger_click',
+    {
+      'slds-m-left_xx-small': !grouped,
+      'slds-is-open': opened,
+      'react-slds-dropdown-opened': opened,
+    }
+  );
   const noneStyle = { display: 'none' };
 
   return (

src/scripts/DropdownMenu.tsx

@@ -44,13 +44,14 @@ export const DropdownMenuHeader: FC<DropdownMenuHeaderProps> = ({
 }) => {
   const menuHeaderClass = classnames(
     'slds-dropdown__header',
+    'slds-truncate',
     divider ? `slds-has-divider_${divider}-space` : undefined,
     className
   );
   return (
-    <div className={menuHeaderClass}>
-      <span className='slds-text-heading_label'>{children}</span>
-    </div>
+    <li className={menuHeaderClass} role='presentation'>
+      <span>{children}</span>
+    </li>
   );
 };
 
@@ -221,35 +222,45 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
   const menuItemClass = classnames(
     'slds-dropdown__item',
     { 'slds-is-selected': selected },
-    divider ? `slds-has-divider_${divider}-space` : undefined,
     submenu ? 'slds-has-submenu' : undefined,
     className
   );
   return (
-    <li className={menuItemClass}>
-      <a
-        role='menuitem'
-        {...rprops}
-        className='slds-truncate react-slds-menuitem'
-        aria-disabled={disabled}
-        aria-haspopup={submenu != null}
-        aria-expanded={submenuExpanded}
-        tabIndex={disabled ? undefined : tabIndex}
-        onClick={disabled ? undefined : onMenuItemClick}
-        onBlur={disabled ? undefined : onMenuItemBlur}
-        onFocus={disabled ? undefined : onMenuItemFocus}
-        onKeyDown={disabled ? undefined : onKeyDown}
-      >
-        <p className='slds-truncate'>
-          {icon ? <Icon icon={icon} size='x-small' align='left' /> : null}
-          {label || children}
-        </p>
-        {iconRight || submenu ? (
-          <Icon icon={iconRight ?? 'right'} size='x-small' align='right' />
-        ) : null}
-      </a>
-      {submenu && submenuExpanded ? submenu : undefined}
-    </li>
+    <>
+      {divider === 'top' ? (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      ) : null}
+      <li className={menuItemClass} role='presentation'>
+        <a
+          role='menuitem'
+          {...rprops}
+          className='react-slds-menuitem'
+          aria-disabled={disabled}
+          aria-haspopup={submenu != null}
+          aria-expanded={submenuExpanded}
+          tabIndex={disabled ? undefined : tabIndex}
+          onClick={disabled ? undefined : onMenuItemClick}
+          onBlur={disabled ? undefined : onMenuItemBlur}
+          onFocus={disabled ? undefined : onMenuItemFocus}
+          onKeyDown={disabled ? undefined : onKeyDown}
+        >
+          <span
+            className='slds-truncate'
+            title={typeof label === 'string' ? label : undefined}
+          >
+            {icon ? <Icon icon={icon} size='x-small' align='left' /> : null}
+            {label || children}
+          </span>
+          {iconRight || submenu ? (
+            <Icon icon={iconRight ?? 'right'} size='x-small' align='right' />
+          ) : null}
+        </a>
+        {submenu && submenuExpanded ? submenu : undefined}
+      </li>
+      {divider === 'bottom' ? (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      ) : null}
+    </>
   );
 };
 
@@ -389,8 +400,8 @@ const DropdownMenuInner: FC<DropdownMenuProps & AutoAlignInjectedProps> = (
       onBlur={onBlur}
       {...rprops}
     >
-      {header ? <MenuHeader>{header}</MenuHeader> : null}
-      <ul className='slds-dropdown__list' role='menu'>
+      <ul className='slds-dropdown__list' role='menu' aria-label={header}>
+        {header ? <MenuHeader>{header}</MenuHeader> : null}
         <DropdownMenuHandlerContext.Provider value={handlers}>
           <OpenSubmenuContext.Provider
             value={{ openSubmenuKeys, handleSubmenuOpen }}

src/scripts/FieldSet.tsx

@@ -75,13 +75,19 @@ export const FieldSet = createFC<
   { isFormElement: boolean; Row: typeof FieldSetRow }
 >(
   ({ className, label, children, ...props }) => {
-    const fsClassNames = classnames(className, 'slds-form_compound');
+    const fsClassNames = classnames(
+      className,
+      'slds-form-element',
+      'slds-form-element_compound'
+    );
+    const legendClassNames = classnames(
+      'slds-form-element__legend',
+      'slds-form-element__label'
+    );
     return (
       <fieldset className={fsClassNames} {...props}>
-        {label ? (
-          <legend className='slds-form-element__label'>{label}</legend>
-        ) : null}
-        <div className='form-element__group'>{children}</div>
+        {label ? <legend className={legendClassNames}>{label}</legend> : null}
+        <div className='slds-form-element__control'>{children}</div>
       </fieldset>
     );
   },

src/scripts/FormElement.tsx

@@ -18,9 +18,11 @@ import { TooltipContent } from './TooltipContent';
 export type FormElementProps = {
   id?: string;
   className?: string;
+  controlId?: string;
   label?: string;
   required?: boolean;
   error?: boolean | string | { message: string };
+  errorId?: string;
   readOnly?: boolean;
   cols?: number;
   dropdown?: JSX.Element;
@@ -42,11 +44,13 @@ export const FormElement = createFC<
     const {
       id,
       className,
+      controlId,
       cols = 1,
       elementRef,
       label,
       required,
       error,
+      errorId,
       dropdown,
       children,
       readOnly,
@@ -66,13 +70,9 @@ export const FormElement = createFC<
         : undefined
       : undefined;
 
-    const formElementControlClassNames = classnames(
-      'slds-form-element__control',
-      { 'slds-has-divider_bottom': readOnly }
-    );
-
     const formElementClassNames = classnames(
       'slds-form-element',
+      readOnly ? 'slds-form-element_readonly' : null,
       error ? 'slds-has-error' : null,
       typeof totalCols === 'number'
         ? `slds-size_${cols}-of-${totalCols}`
@@ -91,31 +91,47 @@ export const FormElement = createFC<
 
     const emptyCtx = useMemo(() => ({}), []);
 
+    const LabelTag = readOnly ? 'span' : 'label';
+
     return (
       <FieldSetColumnContext.Provider value={emptyCtx}>
         <div ref={elementRef} className={formElementClassNames}>
           {label ? (
-            <label
+            <LabelTag
+              id={id}
               className='slds-form-element__label'
-              htmlFor={id}
+              {...(LabelTag === 'label' ? { htmlFor: controlId } : {})}
               onClick={id ? undefined : onClickLabel}
             >
               {required ? (
-                <abbr className='slds-required' title='required'>
+                <abbr
+                  className='slds-required'
+                  title='required'
+                  aria-hidden='true'
+                >
                   *
                 </abbr>
               ) : undefined}
               {label}
-            </label>
+            </LabelTag>
           ) : null}
           {tooltip ? (
             <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
           ) : null}
-          <div ref={controlElRef} className={formElementControlClassNames}>
-            {children}
+          <div ref={controlElRef} className='slds-form-element__control'>
+            {readOnly ? (
+              <div className='slds-form-element__static'>{children}</div>
+            ) : (
+              children
+            )}
             {dropdown}
             {errorMessage ? (
-              <span className='slds-form-element__help'>{errorMessage}</span>
+              <span
+                className='slds-form-element__help'
+                id={error ? errorId : undefined}
+              >
+                {errorMessage}
+              </span>
             ) : undefined}
           </div>
         </div>