From a3f71704fe1bfa2129ccb324b8915f77d3fc2753 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 15 Mar 2022 16:38:10 -0500 Subject: [PATCH] chore(slider): format using prettier --- src/pages/components/slider/accessibility.mdx | 46 +++++++++++++------ 1 file changed, 33 insertions(+), 13 deletions(-) diff --git a/src/pages/components/slider/accessibility.mdx b/src/pages/components/slider/accessibility.mdx index 77edfb86a89..a619f030ddf 100644 --- a/src/pages/components/slider/accessibility.mdx +++ b/src/pages/components/slider/accessibility.mdx @@ -6,12 +6,14 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- - import localVideo from './videos/slider.mp4'; - import localPoster from './images/slider-accessibility-3.png'; +import localVideo from './videos/slider.mp4'; +import localPoster from './images/slider-accessibility-3.png'; -No accessibility annotations are needed for sliders, but keep these considerations in mind if you are modifying Carbon or creating a custom component. +No accessibility annotations are needed for sliders, but keep these +considerations in mind if you are modifying Carbon or creating a custom +component. @@ -22,18 +24,24 @@ No accessibility annotations are needed for sliders, but keep these consideratio ## What Carbon provides -Carbon bakes keyboard operation into its components, improving the experience of blind users and others who operate via the keyboard. Carbon incorporates many other accessibility considerations, some of which are described below. +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. ### Keyboard interactions -Tab order goes from slider to text input. Arrow keys are used to change the slider value. `Shift`+arrow changes the slider value by a larger increment (such as by 10 instead of 1). Users can also directly enter a value in the input. +Tab order goes from slider to text input. Arrow keys are used to change the +slider value. `Shift`+arrow changes the slider value by a larger increment (such +as by 10 instead of 1). Users can also directly enter a value in the input. ![example of slider keyboard interaction](images/slider-accessibility-1.png) -Both the slider and input are in the tab order and keyboard operable. + + Both the slider and input are in the tab order and keyboard operable. + @@ -45,7 +53,10 @@ Tab order goes from slider to text input. Arrow keys are used to change the slid ![slider label is connected to slider control and text input](images/slider-accessibility-2.png) -The slider label is programmatically associated with both the slider and input. + + The slider label is programmatically associated with both the slider and + input. + @@ -57,15 +68,24 @@ Tab order goes from slider to text input. Arrow keys are used to change the slid ![pointer clicks on slider range and input updates to 80. input value changes to 75 and slider repositions to match](images/slider-accessibility-3.png) -The input value and slider position are in sync. An update to either causes the other to update. + + The input value and slider position are in sync. An update to either causes + the other to update. + ## Development considerations -Keep these considerations in mind if you are modifying Carbon or creating a custom component: - -* The `step` value determines the change increment when moving the slider, either by pointer or keyboard. A value of `"1"` is recommended. -* The `stepMultiplier` determines the value change when the keyboard is used to alter the slider by pressing `Shift`+ Arrow key. A tenth of the total range is recommended as a value, such as `"10"` in a 0-100 slider. -* See the [ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#slider) for more considerations. \ No newline at end of file +Keep these considerations in mind if you are modifying Carbon or creating a +custom component: + +- The `step` value determines the change increment when moving the slider, + either by pointer or keyboard. A value of `"1"` is recommended. +- The `stepMultiplier` determines the value change when the keyboard is used to + alter the slider by pressing `Shift`+ Arrow key. A tenth of the total range is + recommended as a value, such as `"10"` in a 0-100 slider. +- See the + [ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#slider) + for more considerations.