diff --git a/site/docs/components/avatar/accessibility.mdx b/site/docs/components/avatar/accessibility.mdx index 727068d9599..293adcad919 100644 --- a/site/docs/components/avatar/accessibility.mdx +++ b/site/docs/components/avatar/accessibility.mdx @@ -9,6 +9,6 @@ data: ### Best practices -Decorative Avatars (Avatars that repeat the information already expressed by the accompanied text) should be hidden from the screen reader to avoid repetition. If you are adding an Avatar for decorative purposes, pass `aria-hidden=”true”` to hide its label from the screen reader. +Decorative Avatars (Avatars that repeat the information already expressed by the accompanying text) should be hidden from the screen reader to avoid repetition. If you are adding an Avatar for decorative purposes, use `aria-hidden` to hide its label from the screen reader. If an alternative icon is used inside an Avatar, the icon's `aria-label` should be descriptive in relation to the Avatar context, not the icon context. For example, when using `` to represent a company `aria-label` should read "Company profile" rather than the Icon's default label "building solid". diff --git a/site/docs/components/button/accessibility.mdx b/site/docs/components/button/accessibility.mdx index d61bfd8c8ae..f865dc01f55 100644 --- a/site/docs/components/button/accessibility.mdx +++ b/site/docs/components/button/accessibility.mdx @@ -11,7 +11,7 @@ data: ### Best practices -- When a Button has both an icon and text, pass `aria-hidden=”true”` to the icon so that its text is not announced by screen readers. +- When a Button has both an icon and text, use`aria-hidden` on the icon so that screen readers do not announce its text. - When a Button has an icon only and no text, pass an `aria-label` to Button that describes its purpose. #### Focusable disabled button diff --git a/site/docs/components/checkbox/examples.mdx b/site/docs/components/checkbox/examples.mdx index 02ca3c09035..f58bd8faddb 100644 --- a/site/docs/components/checkbox/examples.mdx +++ b/site/docs/components/checkbox/examples.mdx @@ -65,7 +65,7 @@ To configure checkbox groups to maintain a horizontal alignment but allow text w When a checkbox option is neither selected nor deselected, it is indeterminate. This is a third, separate state. -A checkbox with the prop `indeterminate="true"` will display an indeterminate icon. The most common use is a nested checkbox group with a hierarchy of selections. When the group contains a mix of selected and unselected children, the parent will show an indeterminate state. +A checkbox with the prop `indeterminate={true}` will display an indeterminate icon. The most common use is a nested checkbox group with a hierarchy of selections. When the group contains a mix of selected and unselected children, the parent will show an indeterminate state. @@ -75,7 +75,7 @@ A checkbox with the prop `indeterminate="true"` will display an indeterminate ic A disabled checkbox is not interactive or focusable. -A checkbox can be disabled by setting `disabled=”true”`. +A checkbox can be disabled by setting `disabled={true}`. Guidance: @@ -91,7 +91,7 @@ If a disabled checkbox's text description contains information that is valuable A read-only checkbox permits the user to only read or copy the text description, but not edit the text or change the state of the checkbox. -A checkbox with the prop `readOnly="true"` will suppress all functionality along with displaying read-only styling. +A checkbox with the prop `readOnly={true}` will suppress all functionality along with displaying read-only styling. Guidance: diff --git a/site/docs/components/flex-layout/examples.mdx b/site/docs/components/flex-layout/examples.mdx index 02e8a24aed6..d9f25739789 100644 --- a/site/docs/components/flex-layout/examples.mdx +++ b/site/docs/components/flex-layout/examples.mdx @@ -19,7 +19,7 @@ By default, Flex Layout displays items along the horizontal axis in a row, align #### Guidance -Set the `wrap` prop to `true` to overflow items onto subsequent rows when they no longer fit in the container. +Set `wrap={true}` to overflow items onto subsequent rows when they no longer fit in the container. diff --git a/site/docs/components/multiline-input/examples.mdx b/site/docs/components/multiline-input/examples.mdx index f9d85fdc488..2d7f69e9fce 100644 --- a/site/docs/components/multiline-input/examples.mdx +++ b/site/docs/components/multiline-input/examples.mdx @@ -54,7 +54,7 @@ When setting Multiline Input to a read-only state, ensure to also disable any ne ### Bordered -To style Multiline Input with a full border set the `bordered` prop to `true`. +To style Multiline Input with a full border set `bordered={true}`. - We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background). diff --git a/site/docs/components/radio-button/examples.mdx b/site/docs/components/radio-button/examples.mdx index dd586c3a2cc..9fffa029a92 100644 --- a/site/docs/components/radio-button/examples.mdx +++ b/site/docs/components/radio-button/examples.mdx @@ -57,7 +57,7 @@ You can configure radio button groups to maintain a horizontal alignment but all A disabled radio button is not interactive or focusable. -A radio button can be disabled by setting `disabled=”true”`. +A radio button can be disabled by setting `disabled={true}`. Guidance: @@ -73,7 +73,7 @@ If a disabled radio button's text description contains information that is valua A read-only radio button permits the user to only read or copy the value, but not edit the value or change the state of the radio. -A radio button with the prop `readOnly="true"` will suppress all functionality along with displaying read-only styling. +A radio button with the prop `readOnly={true}` will suppress all functionality along with displaying read-only styling. Guidance: diff --git a/site/docs/components/toggle-button/examples.mdx b/site/docs/components/toggle-button/examples.mdx index e67dfd33ed5..862044626a9 100644 --- a/site/docs/components/toggle-button/examples.mdx +++ b/site/docs/components/toggle-button/examples.mdx @@ -18,7 +18,7 @@ The basic toggle button component allows users to switch between two states. Use icons and text in toggle buttons if it's important to visually reinforce the theme of the options. Or if providing additional context may help decision-making (for example, selecting a document type or a text style). -Pass `aria-hidden=”true”` to the icon so its text description is not announced by the screen reader. +Pass `aria-hidden={true}` to the icon so its text description is not announced by the screen reader. Guidance: