@W-18274063 feat/256 CX docs update (#5513)

Dottenpixel · web-flow · commit a7e602a88f81 · 2025-05-14T12:51:56.000-07:00
* update release notes per CX

* update docs per cx

* add a11y sections to various docs

* fix release notes

* required label example as CodeView

* add RequiredLabelExample shared component

* add RequiredLabelExample to docs pages
diff --git a/RELEASENOTES.general.md b/RELEASENOTES.general.md
@@ -2,8 +2,8 @@
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
 
-## 2.27.0 - May 7, 2025
-\
+## 2.27.1 - May 7, 2025
+
 ## 2.27.0 - April 17, 2025
 
 - Update icons to `v10.12.2`
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -175,10 +175,18 @@
 ## Release 2.26.2 - February 6, 2025
 
 ## Component Blueprints
+### [Combobox](https://www.lightningdesignsystem.com/components/combobox)
+#### Removed
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
+
 ### [Form Element](https://www.lightningdesignsystem.com/components/form-element)
 #### Fixed
 - Move clear fix from 2.26.1 to target specific selectors, use clearfix mixin to avoid more edge cases (e.g. background colors)
 
+### [Menus](https://www.lightningdesignsystem.com/components/menus)
+#### Removed
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
+
 ## Release 2.26.1 - January 30, 2025
 
 - Update icons to `v10.11.2`
@@ -801,7 +809,7 @@
 - Fixed `NVDA` checkbox toggle is announced twice removed aria-live="assertive"
 
 ### [Combobox](https://www.lightningdesignsystem.com/components/combobox)
-#### Added 
+#### Added
 - Tooltip option provided for Date/DateTime pickers.
 - Updated from tabindex to tabIndex.
 
diff --git a/shared/components/RequiredLabelExample.jsx b/shared/components/RequiredLabelExample.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CodeView from './CodeView';
+
+const RequiredLabelExample = () => (
+  <CodeView exampleOnly demoStyles="2rem">
+    <label class="slds-form-element__label" for="">
+      <abbr class="slds-required" title="required" aria-hidden="true">* </abbr>denotes a required field
+    </label>
+  </CodeView>
+);
+
+RequiredLabelExample.propTypes = {
+  children: PropTypes.string,
+  title: PropTypes.string
+};
+
+export default RequiredLabelExample;
diff --git a/ui/components/checkbox/docs.mdx b/ui/components/checkbox/docs.mdx
@@ -2,6 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
 import CodeBlock from '../../../shared/components/CodeBlock';
 import Blockquote from '../../../shared/components/Blockquote';
 import StylingHooksTable from '../../../shared/components/StylingHooksTable';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import * as CheckboxExamples from './base/example';
 import * as CheckboxFormElementExamples from './form-element/example';
 import { getDisplayElementById } from '../../shared/helpers';
@@ -28,6 +29,9 @@ When a single checkbox is required, `<div class="slds-checkbox">` should get `<a
 
 When a checkbox group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="required" title="required" aria-hidden="true">*</abbr>` added to the DOM for visual indication that the checkbox group is required.
 
+Example:
+<RequiredLabelExample/>
+
 As SLDS checkboxes rely on the `:checked` pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.
 
 ### Mobile
diff --git a/ui/components/combobox/RELEASENOTES.md b/ui/components/combobox/RELEASENOTES.md
@@ -9,6 +9,12 @@
 
 - Fixed lookup variant focus style
 
+## 2.26.2
+
+### Removed
+
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
+
 ## 2.25.0
 
 ### Fixed
@@ -28,7 +34,7 @@
 - Updated Combobox disabled color
 
 ## 2.22.0
-### Added 
+### Added
 - Tooltip option provided for Date/DateTime pickers.
 - Updated from tabindex to tabIndex.
 ## 2.21.0
diff --git a/ui/components/datepickers/docs.mdx b/ui/components/datepickers/docs.mdx
@@ -2,6 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
 import DisplayColumn from '../../../shared/components/DisplayColumn';
 import DisplayGrid from '../../../shared/components/DisplayGrid';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
 import * as Base from './base/example';
 import * as Range from './range/example';
@@ -45,11 +46,16 @@ The datepicker has the following markup requirements:
 
 ### Accessibility
 
+To display the datepicker text input field and calendar date picker with maximum accessibility, datepicker should be empty to start. When a user begins typing, text input is activated, and the full date format for the user’s locale, such as text DD MM YYYY in the en_US_locale.
+
 #### Markup
 
 **Dialog:**
 
   - Should act as a focus trap so the user only cycles through the datepicker `dialog` when the datepicker is open
+  - A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text.
+  - All datepicker fields marked as required with an * must have an accompanying legend. Example:
+    <RequiredLabelExample/>
 
 **Grid:**
 
diff --git a/ui/components/datetime-picker/docs.mdx b/ui/components/datetime-picker/docs.mdx
@@ -1,5 +1,6 @@
 import CodeView from '../../../shared/components/CodeView';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import * as DateTimeExamples from './base/example';
 import { getDisplayElementById } from '../../shared/helpers';
 
@@ -43,6 +44,18 @@ The datetime picker has the following markup requirements:
   - On the element with the class `slds-combobox`, please remove `role="combobox"`, `aria-expanded`, and `aria-haspopup`.
   - On the `input` that we just added `type="datetime-local"` to, please remove `aria-controls`, `aria-autocomplete`, and `role="textbox"`.
 
+### Accessibility
+
+To display the datetime picker with maximum accessibility, the datetime field should be empty to start. When a user clicks, text input is activated, and the full date or time selector displays.
+
+#### Markup
+
+**Dialog:**
+
+  - A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text.
+  - All datepicker fields marked as required with an * must have an accompanying legend. Example:
+    <RequiredLabelExample/>
+
 ## Base
 
 <CodeView demoStyles="height: 28rem;">
diff --git a/ui/components/form-element/docs.mdx b/ui/components/form-element/docs.mdx
@@ -1,6 +1,7 @@
 import CodeView from '../../../shared/components/CodeView';
 import CodeBlock from '../../../shared/components/CodeBlock';
 import Example from '../../../shared/components/Example';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import Blockquote from '../../../shared/components/Blockquote';
 import ButtonIcon from '../button-icons/';
 import { FormElement, FormElementStatic, Fieldset } from './';
@@ -66,6 +67,11 @@ There are many types of input elements that can be used in the Form Element, inc
 
 ### Accessibility
 
+All form elements marked as required with an * must have an accompanying legend.
+
+Example:
+<RequiredLabelExample/>
+
 Labels must have the `for` attribute applied, and its value must match the ID of the associated form element, like `<input id="unique-id-of-input" />`. This association ensures that assistive technology informs users about what information to enter where.
 
 ### Mobile
diff --git a/ui/components/input/docs.mdx b/ui/components/input/docs.mdx
@@ -1,6 +1,7 @@
 import CodeView from '../../../shared/components/CodeView';
 import CodeBlock from '../../../shared/components/CodeBlock';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import * as InputExamples from './base/example';
 import { getDisplayElementById } from '../../shared/helpers';
 import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
@@ -28,6 +29,11 @@ You can see examples of the correct markup in the [Left Icon & Clear Button exam
 
 ### Accessibility
 
+All input fields marked as required with an * must have an accompanying legend.
+
+Example:
+<RequiredLabelExample/>
+
 Inputs with errors should have `aria-describedby` to insure that the associated field level error message is read by assistive technology.
 
 If the error message has an `id="my-error-message"`, then the input should have `aria-describedby="my-error-message"` and `aria-invalid="true"`.
diff --git a/ui/components/menus/RELEASENOTES.md b/ui/components/menus/RELEASENOTES.md
@@ -3,6 +3,11 @@
 # Menus Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.26.2
+
+### Removed
+
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
 
 ## 2.27.0
 
diff --git a/ui/components/radio-button-group/docs.mdx b/ui/components/radio-button-group/docs.mdx
@@ -1,6 +1,7 @@
 import CodeView from '../../../shared/components/CodeView';
 import CodeBlock from '../../../shared/components/CodeBlock';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import { getDisplayElementById } from '../../shared/helpers';
 import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
 import * as RadioButtonGroupExamples from './base/example';
@@ -15,6 +16,13 @@ import * as RadioButtonGroupExamples from './base/example';
 
 <CodeView>{getDisplayElementById(RadioButtonGroupExamples.default)}</CodeView>
 
+### Accessibility
+
+All form elements marked as required with an * must have an accompanying legend.
+
+Example:
+<RequiredLabelExample/>
+
 ### Mobile
 
 <MobileBlurb patternSpecificText="radio button groups will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, and also become stacked" />
diff --git a/ui/components/radio-group/docs.mdx b/ui/components/radio-group/docs.mdx
@@ -2,6 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
 import DisplayColumn from '../../../shared/components/DisplayColumn';
 import DisplayGrid from '../../../shared/components/DisplayGrid';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
 import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
 import * as Base from './base/example';
@@ -27,6 +28,9 @@ Custom radio buttons are created by applying the `.slds-radio` class to a `<labe
 
 When a radio group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="required" title="required" aria-hidden="true">*</abbr>` added to the DOM for visual indication that the radio group is required.
 
+Example:
+<RequiredLabelExample/>
+
 When disabling a radio button, either the entire group must be disabled or if only some radio buttons are disabled, then the checked radio button cannot be disabled.
 
 ### Mobile
diff --git a/ui/components/select/docs.mdx b/ui/components/select/docs.mdx
@@ -1,4 +1,5 @@
 import CodeView from '../../../shared/components/CodeView';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import StylingHooksTable from '../../../shared/components/StylingHooksTable';
 import { getDisplayElementById } from '../../shared/helpers';
 import * as Base from './base/example';
@@ -16,6 +17,13 @@ The HTML `<select>` element presents a menu of options. The options within the m
 
 For selecting multiple options, we have created a custom component called the [Dueling Picklist](/components/dueling-picklist) to ensure Accessibility and ease-of-use. Please refer to that documentation for the interaction model, markup, and Accessibility requirements.
 
+### Accessibility
+
+All form elements marked as required with an * must have an accompanying legend.
+
+Example:
+<RequiredLabelExample/>
+
 ## Base
 
 <CodeView>
diff --git a/ui/components/textarea/docs.mdx b/ui/components/textarea/docs.mdx
@@ -1,4 +1,5 @@
 import CodeView from '../../../shared/components/CodeView';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import StylingHooksTable from '../../../shared/components/StylingHooksTable';
 import { getDisplayElementById } from '../../shared/helpers';
 import Blockquote from '../../../shared/components/Blockquote';
@@ -16,6 +17,13 @@ import * as Textareas from './base/example';
 
 You can style the HTML `<textarea>` element to align with the Salesforce brand by using the class `.slds-textarea` on the `<textarea>` element.
 
+### Accessibility
+
+All form elements marked as required with an * must have an accompanying legend.
+
+Example:
+<RequiredLabelExample/>
+
 ## Base
 
 <CodeView>
diff --git a/ui/components/toast/docs.mdx b/ui/components/toast/docs.mdx
@@ -15,6 +15,10 @@ import { getDisplayElementById } from '../../shared/helpers';
 
 ## About Toast
 
+<Blockquote type="note" header="SLDS 2">
+  To be compatible with the SLDS 2 default theme, Salesforce Cosmos, the toast <code>X</code> close button is set with <code>slds-button__icon_xx-small</code>.
+</Blockquote>
+
 ### Accessibility
 
 Toast should contain `role="alert"` on the container to signal to assistive technology that they require the user’s attention.
