diff --git a/elements/rh-accordion/docs/20-guidelines.md b/elements/rh-accordion/docs/20-guidelines.md index 0d72e8496d..4d9634a89e 100644 --- a/elements/rh-accordion/docs/20-guidelines.md +++ b/elements/rh-accordion/docs/20-guidelines.md @@ -166,35 +166,76 @@ smaller. ## Best practices -### One panel -Do not display one panel only, use an expandable section instead. +### One panel - - Accordion having only one panel is incorrect usage - +
+ + + Two accordion panels + +

Use accordion in groups of two or more.

+ + + + + One accordion panel + +

Do not display one panel only.

+ +
### Text readability -Text within panels should not exceed `750px` to maintain optimal readability. + + + Text in an expanded accordion has a limited width and does not fill wide accordion + - - Accordion with body text exceeding 750px wide which is incorrect usage - +

The text in a panel should be limited to a maximum width of 750px, which maintains optimal readability.

+ + + + + Text in an expanded accordion fills wide accordion + + +

Do not allow text within panels to fill the entire width of a panel, if the text would exceed a width of 750px.

+ ### Mixing themes -Do not use a dark theme accordion in a light theme environment and vice versa. +
+ + + Dark theme accordion against a dark background + +

An accordion group should match the theme of the container it’s in. This ensures that all of the text is visible and has adequate color contrast.

+ + + + + Light theme accordion against a light background + +

Do not use a light theme accordion in a dark theme environment and vice versa because it may cause accessibility and usability issues.

+ +
- - Do not use a dark theme accordion in a light theme environment and vice versa - diff --git a/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg new file mode 100644 index 0000000000..c80ec218db --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg new file mode 100644 index 0000000000..3548cbee33 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg b/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg new file mode 100644 index 0000000000..1665df4241 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg new file mode 100644 index 0000000000..1b8dc825e7 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg b/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg new file mode 100644 index 0000000000..4d7d57d6ff --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg new file mode 100644 index 0000000000..fa895e5f35 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +