diff --git a/src/il-statistic/README.md b/src/il-statistic/README.md index 591557ce..0ae8440f 100644 --- a/src/il-statistic/README.md +++ b/src/il-statistic/README.md @@ -5,6 +5,8 @@ footer text (after the main text), and/or an attribution, but the number or word The statistic should read as a complete sentence (minus the attribution). +No header information should be displayed in the statistic. + ## Basic use Example of full statistic with citation. @@ -30,45 +32,111 @@ Example of statistic with only footer text. ### Changing the background color and size -This component will respect theme colors and em sizes. You can increase and decrease the size of these items -independently by using CSS. +This component may vary by color and size. This component uses the following attributes: + +* _color_: white, blue, orange, blue-gradient. Note that "orange" will produce a white background with an orange emphasis. Default is white. +* _size_: small, medium, large, x-large -You can use CSS to change the color of the emphasized number or text. +The heading color, heading size, and body size will be controlled via CSS attributes, so they can be modified independently. If you do modify the heading color, ensure that the new color has at least 3:1 color contrast. ### Columns You can use the `` and `` to create columns and backgrounds to show multiple statistics. +If multiple statistics are in a column, the main statistic (including header, main stat, and footer) will be lined up at the middle of the component, and the attribution (if any) will be lined up at the bottom of the component. + ```html - + - + Xxxxxxx XX% xx xxx xxxxxx xxxxxxxxxxxxxxx. XX% xx xxx xxxxxx xxxxxxxxxxxxxxx. xxxxxxxx - - XX% xx xxx xxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx. + + XX% xx xxx xxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx. xxxxxxxx ``` -If multiple statistics are in a column, the main statistic (including header, main stat, and footer) will be lined up at the middle of the component, and the -attribution (if any) will be lined up at the bottom of the component. +``` +|------------------------------------------------------------------------------------------------------------| +| : (blue) : (white) : (blue) : | +| : Xxxxxxx : XX% : XX% : | +| : : : : | +| : XX% : xx xxx xxxxxx : xx xxx xxxxxx : | +| : : xxxxxxxxxxxxxxx. : xxxxxxxxxxxxxxx : | +| : xx xxx xxxxxx : : xxxxxxxxxxxxxxxx. : | +| : xxxxxxxxxxxxxxx. : : : | +| : : xxxxxxxxxxx : xxxxxxxxx : | +| : : : : | +|------------------------------------------------------------------------------------------------------------| +| : : | +| : left content boundary right content boundary : | +``` + +The statistic component will honor the background grid attribute of the section, and you can use the il-background class to make the statistic flush with the border. + +```html + + + + + Xxxxxxx XX% xx xxx xxxxxx xxxxxxxxxxxxxxx. + + + XX% xx xxx xxxxxx xxxxxxxxxxxxxxx. + xxxxxxxx + + + XX% xx xxx xxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx. + xxxxxxxx + + + +``` ``` -| | | | -| Xxxxxxx | XX% | XX% | -| | | | -| XX% | xx xxx xxxxxx | xx xxx xxxxxx | -| | xxxxxxxxxxxxxxx. | xxxxxxxxxxxxxxx | -| xx xxx xxxxxx | | xxxxxxxxxxxxxxx. | -| xxxxxxxxxxxxxxx. | | | -| | xxxxxxxxxxx | xxxxxxxxx | -| | | | +|------------------------------------------------------------------------------------------------------------| +| (blue) : (white) : (blue) | +| Xxxxxxx : XX% : XX% | +| : : | +| XX% : xx xxx xxxxxx : xx xxx xxxxxx | +| : xxxxxxxxxxxxxxx. : xxxxxxxxxxxxxxx | +| xx xxx xxxxxx : : xxxxxxxxxxxxxxxx. | +| xxxxxxxxxxxxxxx. : : | +| : xxxxxxxxxxx : xxxxxxxxx | +| : : | +|------------------------------------------------------------------------------------------------------------| +| : : | +| : left content boundary right content boundary : | ``` +## Accessibility +In compliance with WCAG 2.2 Level AA this component implements the following accessibility features: + +Success Criterion 1.3.1 Info and Relationships +Emphasized information in the statistic module is defined through the emphasis tag. + +SC 1.3.2 Meaningful Sequence +Content displayed in the markup matches the sequence generated by the web control. + +SC 1.4.1 Use of Color +Color is not used to define pertinent information + +SC 1.4.3: Contrast (Minimum) +There is a minimum contrast ratio of 4.5:1 between the text and the background, following color themes. This may be altered using CSS variables, but guidance is provided to keep proper contrast + +SC 1.4.10: Reflow +The statistic changes size to ensure the information retains proper flow. + +SC 2.4.6 Headings and Labels +Guidance is given to ensure headings are not used in the statistic component. + +SC 2.4.7: Focus Visible +Focus with the component is clearly indicated using the basic themes. +