fix: convert markdown dos and don's into ul with aria-label#243
Open
nuke-ellington wants to merge 6 commits into
Open
fix: convert markdown dos and don's into ul with aria-label#243nuke-ellington wants to merge 6 commits into
nuke-ellington wants to merge 6 commits into
Conversation
✅ Deploy Preview for industrial-experience ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request updates several documentation files (.mdx) by converting markdown lists inside "dos-and-donts" container divs into semantic HTML unordered lists with appropriate "aria-label" attributes, and removing the "markdown" attributes from the container divs. The review feedback is highly accurate, pointing out multiple violations of the repository style guide where straight apostrophes (') were used instead of the required right single quotation mark (’).
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR standardizes many documentation "Dos and Don'ts" sections into structured HTML or JSX containers with separate recommended and avoid lists, adds ChangesDocumentation dos-and-don'ts standardization
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.md (1)
134-137:⚠️ Potential issue | 🟠 Major | ⚡ Quick winComplete the standardization by converting remaining final "Dos and Don'ts" sections to structured HTML.
Two files have final "Dos and Don'ts" sections that were not converted to the new HTML structure with
aria-labelattributes, inconsistent with the stated PR objective and the pattern established in other files in this cohort.Affected locations:
docs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.md#L134-L137: Convert markdown bullets to structured dos-and-donts HTMLdocs/guidelines/language/messaging/error-pages.md#L88-L93: Convert markdown bullets to structured dos-and-donts HTMLBoth sections should follow the same pattern as the final "Dos and Don'ts" sections in
empty-state-messages.mdx,error-messages.mdx, and other completed files, with separatedosanddontsdivs, labeledulelements, andaria-labelattributes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.md` around lines 134 - 137, Convert the markdown bullet-point "Dos and Don'ts" sections to structured HTML format across two files. In `docs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.md` at lines 134-137, replace the markdown bullet list with separate `dos` and `donts` divs, each containing a labeled `ul` element with `aria-label` attributes for accessibility. Apply the same conversion pattern to `docs/guidelines/language/messaging/error-pages.md` at lines 88-93. Follow the established HTML structure used in other completed files like `empty-state-messages.mdx` and `error-messages.mdx`, ensuring each section has proper semantic HTML with aria-labels to match the stated PR objective of standardizing these sections across the documentation.
🧹 Nitpick comments (3)
docs/components/date-time-picker/guide.mdx (1)
44-61: ⚡ Quick winUse
classNameinstead ofclassin MDX files for JSX consistency.The
.mdxfiles in this cohort use HTML-styleclassattributes instead of JSX-styleclassName. Since MDX files support and should use JSX, both files should align with the JSX syntax pattern established in the guidelines reference contract.
docs/components/date-time-picker/guide.mdx#L44-L61: Replaceclass=withclassName=ondos-and-donts,dos, anddontsdivs, and theulelements if they useclass.docs/components/gauge-chart/overview.mdx#L34-L49: Replaceclass=withclassName=ondos-and-donts,dos, anddontsdivs, and theulelements if they useclass.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/components/date-time-picker/guide.mdx` around lines 44 - 61, Replace all HTML-style `class` attributes with JSX-style `className` attributes for consistency with MDX/JSX syntax standards. In `docs/components/date-time-picker/guide.mdx` (lines 44-61), change `class=` to `className=` on the divs with identifiers `dos-and-donts`, `dos`, and `donts`, as well as on the `ul` elements. Similarly, in `docs/components/gauge-chart/overview.mdx` (lines 34-49), apply the same transformation by replacing all instances of `class=` with `className=` on the same structural elements (`dos-and-donts`, `dos`, `donts` divs and their child `ul` elements).Source: Coding guidelines
docs/guidelines/language/messaging/time-related-messages.mdx (1)
201-213: ⚡ Quick winUse one MDX attribute style for CSS classes.
This block uses
class=...while earlier changed blocks useclassName=...; normalize for consistency and safer MDX/React compatibility.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/guidelines/language/messaging/time-related-messages.mdx` around lines 201 - 213, The dos-and-donts section uses the HTML attribute style `class=` for the div elements with classes "dos-and-donts", "dos", and "donts", but the rest of the changed blocks in this file use the React/MDX standard `className=` attribute. Replace all instances of `class=` with `className=` in the three div elements (the parent dos-and-donts container and its two children dos and donts divs) to maintain consistency throughout the file.docs/guidelines/language/messaging/progress-updates.mdx (1)
195-208: NormalizeclassNameattribute across messaging MDX files.Lines 195-208 use
class="..."while the rest of this file usesclassName="...". MDX/React requiresclassNamefor dynamic styling. This inconsistency appears throughout the messaging directory and should be standardized.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/guidelines/language/messaging/progress-updates.mdx` around lines 195 - 208, The dos-and-donts section uses the HTML `class` attribute instead of the React/MDX standard `className` attribute. Replace all instances of `class="..."` with `className="..."` in the div elements (dos-and-donts, dos, and donts) to maintain consistency with the rest of the file and ensure proper dynamic styling support in MDX/React.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/components/loading-modal/guide.md`:
- Around line 33-46: The guide.md file is plain Markdown, not MDX, so JSX syntax
like className will not be processed. Replace the three instances of className=
with class= on lines 33, 34, and 40 in the divs with classes dos-and-donts, dos,
and donts respectively. This ensures the HTML class attribute is properly
recognized and the styling will apply correctly, consistent with other component
guides in the documentation.
In `@docs/components/modal/guide.md`:
- Line 9: The word "models" on line 9 of the guide.md file should be changed to
"modals" to match the terminology used elsewhere in the document (specifically
line 7 which correctly uses "Custom modals"). Update the sentence to read "Use
custom modals when a task requires immediate attention and the user returns to
the same place after closing the modal" for consistency throughout the
documentation.
In `@docs/components/select/guide.md`:
- Line 73: The link in the dos-and-donts guidance at line 73 of the select guide
is pointing to the wrong component. The text correctly recommends radio buttons
as the alternative to selects for binary choices, but the link targets the
toggle component instead. Update the link target in the line containing "Don't
use selects for binary choices, like yes and no, use [radio buttons](../toggle)
instead" to point to the radio component by changing the link from ../toggle to
../radio to ensure the guidance and link are consistent.
In `@docs/guidelines/language/formatting/numbers.mdx`:
- Around line 118-124: The example in the "dos" section shows `-12` using an
ASCII hyphen-minus character, but the rule explicitly states to use the Unicode
minus character (U+2212) for negative numbers. Replace the `-12` example with
the correct Unicode minus character `−12` to align the example with the stated
formatting rule.
In `@docs/guidelines/language/menu-functions-and-ui-labels/search-and-filter.md`:
- Around line 17-30: In the markdown file, replace all occurrences of the JSX
attribute `className="dos-and-donts"` with the standard HTML attribute
`class="dos-and-donts"` throughout all the dos-and-donts example blocks. Since
this is a `.md` file (not `.mdx`), it should use HTML attributes rather than JSX
syntax. Update the `<div className="dos-and-donts">` opening tags and any nested
elements that use `className` attributes to use standard HTML `class` attributes
instead, ensuring consistency with the final dos-and-donts section which already
correctly uses `class`.
- Around line 17-411: Fix the HTML attribute inconsistency in markdown files by
changing all JSX-style `className` attributes to HTML-style `class` attributes.
For each of the following `.md` files, replace every occurrence of `className=`
with `class=` within the specified line ranges:
docs/guidelines/language/menu-functions-and-ui-labels/search-and-filter.md
(lines 17-411),
docs/guidelines/language/menu-functions-and-ui-labels/ui-terminology.md (lines
17-202),
docs/guidelines/language/menu-functions-and-ui-labels/user-management.md (lines
31-363), and docs/guidelines/language/messaging/error-pages.md (lines 30-86).
These files use standard markdown with inline HTML examples and should
consistently use the HTML `class` attribute throughout, not the JSX `className`
attribute.
In `@docs/guidelines/language/menu-functions-and-ui-labels/ui-terminology.md`:
- Around line 17-25: In the file
docs/guidelines/language/menu-functions-and-ui-labels/ui-terminology.md, replace
all occurrences of the JSX attribute className with the HTML attribute class.
This should be done in all the dos-and-donts sections: the initial div at lines
17-25 and its siblings at lines 29-36, 40-47, 61-72, 81-92, 128-142, 146-153,
157-163, 169-183, and 187-202. Since this is a markdown file (not a JSX
component), it should use standard HTML class attributes instead of JSX
className attributes, consistent with the correct usage already present at lines
247-260.
In `@docs/guidelines/language/menu-functions-and-ui-labels/user-management.md`:
- Around line 31-42: Replace all JSX `className` attributes with HTML `class`
attributes throughout the user-management.md file. In the markdown file, change
every occurrence of `className="dos-and-donts"` to `class="dos-and-donts"` and
update any other `className` attributes to `class` to maintain consistency with
standard HTML syntax in markdown files. This includes the sections at lines
31-42, 46-57, 61-76, 80-93, 97-111, 115-126, 130-147, 151-162, 166-177, 181-193,
197-208, 246-258, 262-275, 279-291, 295-308, 312-326, 330-346, and 350-363,
which all contain the same className attribute that needs to be converted to
class.
In `@docs/guidelines/language/messaging/empty-state-messages.mdx`:
- Around line 87-100: The final Dos and Don'ts section in the
empty-state-messages.mdx file uses the HTML `class` attribute on the div
elements (dos-and-donts, dos, and donts) instead of the JSX `className`
attribute that is used consistently in earlier examples throughout the file.
Replace all occurrences of `class=` with `className=` in this section's div
elements to maintain consistency with JSX conventions in .mdx files.
In `@docs/guidelines/language/messaging/error-messages.mdx`:
- Around line 236-250: The JSX attributes in the "Dos and Don'ts" section are
using the HTML `class` attribute instead of the JSX `className` convention. In
MDX files that support JSX, replace all instances of `class=` with `className=`
in the div elements (specifically the outer div with "dos-and-donts" and the
nested div with "dos") to maintain consistency with the earlier examples in the
file and follow proper JSX syntax conventions.
In `@docs/guidelines/language/messaging/error-pages.md`:
- Around line 30-41: Replace all instances of the JSX attribute `className=`
with the HTML attribute `class=` in this markdown file. This applies to all the
`className` attributes in the example code blocks throughout the file (in the
`div` elements with `dos-and-donts`, `dos`, and `donts` classes) since `.md`
files should use standard HTML attributes rather than JSX syntax.
In `@docs/guidelines/language/messaging/infotips.mdx`:
- Around line 116-128: In the "Dos and Don'ts" section shown at lines 116–128,
replace all instances of the HTML `class` attribute with JSX `className`
attribute. Specifically, change `class="dos-and-donts"` to
`className="dos-and-donts"`, `class="dos"` to `className="dos"`, and
`class="donts"` to `className="donts"`. This aligns with the JSX syntax used
elsewhere in the file and ensures consistency for `.mdx` files that support JSX.
In `@docs/guidelines/language/messaging/time-related-messages.mdx`:
- Line 20: Review all time-related message examples in this messaging guideline
document and correct any weekday labels that do not match their corresponding
dates. Verify each date and weekday combination is accurate (for example,
confirm that August 22, 2025 falls on the stated weekday, and that October 1,
2026 is correctly labeled). Update any mismatched weekday labels throughout the
document to ensure the examples provide accurate formatting guidance to users.
---
Outside diff comments:
In
`@docs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.md`:
- Around line 134-137: Convert the markdown bullet-point "Dos and Don'ts"
sections to structured HTML format across two files. In
`docs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.md`
at lines 134-137, replace the markdown bullet list with separate `dos` and
`donts` divs, each containing a labeled `ul` element with `aria-label`
attributes for accessibility. Apply the same conversion pattern to
`docs/guidelines/language/messaging/error-pages.md` at lines 88-93. Follow the
established HTML structure used in other completed files like
`empty-state-messages.mdx` and `error-messages.mdx`, ensuring each section has
proper semantic HTML with aria-labels to match the stated PR objective of
standardizing these sections across the documentation.
---
Nitpick comments:
In `@docs/components/date-time-picker/guide.mdx`:
- Around line 44-61: Replace all HTML-style `class` attributes with JSX-style
`className` attributes for consistency with MDX/JSX syntax standards. In
`docs/components/date-time-picker/guide.mdx` (lines 44-61), change `class=` to
`className=` on the divs with identifiers `dos-and-donts`, `dos`, and `donts`,
as well as on the `ul` elements. Similarly, in
`docs/components/gauge-chart/overview.mdx` (lines 34-49), apply the same
transformation by replacing all instances of `class=` with `className=` on the
same structural elements (`dos-and-donts`, `dos`, `donts` divs and their child
`ul` elements).
In `@docs/guidelines/language/messaging/progress-updates.mdx`:
- Around line 195-208: The dos-and-donts section uses the HTML `class` attribute
instead of the React/MDX standard `className` attribute. Replace all instances
of `class="..."` with `className="..."` in the div elements (dos-and-donts, dos,
and donts) to maintain consistency with the rest of the file and ensure proper
dynamic styling support in MDX/React.
In `@docs/guidelines/language/messaging/time-related-messages.mdx`:
- Around line 201-213: The dos-and-donts section uses the HTML attribute style
`class=` for the div elements with classes "dos-and-donts", "dos", and "donts",
but the rest of the changed blocks in this file use the React/MDX standard
`className=` attribute. Replace all instances of `class=` with `className=` in
the three div elements (the parent dos-and-donts container and its two children
dos and donts divs) to maintain consistency throughout the file.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5bd16f4a-78ef-458c-9ca0-f70c820fa0f9
📒 Files selected for processing (95)
docs/components/3d/overview.mdxdocs/components/application-header/guide.mddocs/components/application-menu/guide.mddocs/components/avatar/guide.mddocs/components/bar-chart/overview.mdxdocs/components/blind/guide.mddocs/components/breadcrumb/guide.mddocs/components/button/guide.mddocs/components/card-list/guide.mddocs/components/card/guide.mddocs/components/category-filter/guide.mddocs/components/checkbox/guide.mddocs/components/chip/guide.mddocs/components/content-header/guide.mddocs/components/custom-field/guide.mddocs/components/date-picker/guide.mdxdocs/components/date-time-picker/guide.mdxdocs/components/dropdown-button/guide.mddocs/components/dropdown/guide.mddocs/components/forms-field/guide.mddocs/components/forms-validation/guide.mddocs/components/gauge-chart/overview.mdxdocs/components/grid/guide.mddocs/components/html-grid/guide.mddocs/components/icon-button/guide.mddocs/components/input-date-time/guide.mdxdocs/components/input-date/guide.mddocs/components/input-number/guide.mddocs/components/input-time/guide.mdxdocs/components/input/guide.mddocs/components/line-chart/overview.mdxdocs/components/link-button/guide.mddocs/components/loading-modal/guide.mddocs/components/message-modal/guide.mddocs/components/modal/guide.mddocs/components/panes/guide.mddocs/components/pill/guide.mddocs/components/popover-news/guide.mddocs/components/progress-indicator/guide.mddocs/components/radio/guide.mddocs/components/range-field/guide.mddocs/components/select/guide.mddocs/components/split-button/guide.mddocs/components/textarea/guide.mddocs/components/time-picker/guide.mdxdocs/components/toast/guide.mddocs/components/toggle-button/guide.mddocs/components/toggle/guide.mddocs/guidelines/conversational-design/designing-conversations/acknowledging-users.mddocs/guidelines/conversational-design/designing-conversations/ad-hoc-conversations.mddocs/guidelines/conversational-design/designing-conversations/confirming-request.mddocs/guidelines/conversational-design/designing-conversations/ending-conversations.mddocs/guidelines/conversational-design/designing-conversations/funneling-input.mddocs/guidelines/conversational-design/designing-conversations/greeting-users.mddocs/guidelines/conversational-design/designing-conversations/handing-off-users.mddocs/guidelines/conversational-design/designing-conversations/handling-errors.mddocs/guidelines/conversational-design/designing-conversations/overview.mddocs/guidelines/conversational-design/designing-conversations/troubleshooting.mddocs/guidelines/conversational-design/essentials/system-presonas.mddocs/guidelines/conversational-design/essentials/user-intent.mddocs/guidelines/conversational-design/essentials/wording-terms.mdxdocs/guidelines/conversational-design/language.mddocs/guidelines/conversational-design/resources/chatbot-checklist.mddocs/guidelines/language/basics.mddocs/guidelines/language/dialogs-and-buttons.mddocs/guidelines/language/formatting/addresses.mdxdocs/guidelines/language/formatting/date.mdxdocs/guidelines/language/formatting/measurements.mdxdocs/guidelines/language/formatting/money.mdxdocs/guidelines/language/formatting/names-titles.mdxdocs/guidelines/language/formatting/numbers.mdxdocs/guidelines/language/formatting/software-versions.mdxdocs/guidelines/language/formatting/timezones.mdxdocs/guidelines/language/frequent-app-functions.mddocs/guidelines/language/grammar-and-vocabulary.mddocs/guidelines/language/menu-functions-and-ui-labels/external-links-and-resources.mddocs/guidelines/language/menu-functions-and-ui-labels/license-management.mddocs/guidelines/language/menu-functions-and-ui-labels/logging-in-and-out.mddocs/guidelines/language/menu-functions-and-ui-labels/onboarding.mddocs/guidelines/language/menu-functions-and-ui-labels/search-and-filter.mddocs/guidelines/language/menu-functions-and-ui-labels/ui-terminology.mddocs/guidelines/language/menu-functions-and-ui-labels/user-management.mddocs/guidelines/language/menu-functions-and-ui-labels/whats-new-announcements.mddocs/guidelines/language/messaging/empty-state-messages.mdxdocs/guidelines/language/messaging/error-messages.mdxdocs/guidelines/language/messaging/error-pages.mddocs/guidelines/language/messaging/infotips.mdxdocs/guidelines/language/messaging/messages-overview.mddocs/guidelines/language/messaging/non-critical-information-messages.mdxdocs/guidelines/language/messaging/progress-updates.mdxdocs/guidelines/language/messaging/time-related-messages.mdxdocs/guidelines/language/messaging/toast-messages.mdxdocs/guidelines/language/messaging/tooltips.mdxdocs/guidelines/language/messaging/warning-messages.mdxdocs/guidelines/language/punctuation.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💡 What is the current behavior?
Dos and don'ts sections will not be distinguishable for screen readers
GitHub Issue Number: IX-4113
🆕 What is the new behavior?
👨💻 Help & support
Summary by CodeRabbit