docs(a11y): add references to reduced motion for certain component animations (#4896)

tmorehouse · jacobmllr95 · web-flow · commit 7714ec470594 · 2020-03-06T10:53:40.000+01:00
* docs(a11y): add references to reduced motion for certain component animations

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update package.json

* Update README.md

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/carousel/README.md b/src/components/carousel/README.md
@@ -312,4 +312,9 @@ features. It is highly recommended to always add an ID to all components.
 All carousel controls and indicators have aria labels. These can be customized by setting the
 various `label-*` props.
 
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/collapse/README.md b/src/components/collapse/README.md
@@ -295,4 +295,9 @@ inside an element with `role="tablist"` and set `role="tab"` on each trigger ele
 order to help screen reader users navigate the accordion group. Unfortunately, BootstrapVue cannot
 apply those roles for you automatically, as it depends on your final document markup.
 
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/form-timepicker/package.json b/src/components/form-timepicker/package.json
@@ -209,7 +209,6 @@
         "slots": [
           {
             "name": "button-content",
-            "version": "2.6.0",
             "description": "Content to place in the timepicker's icon button",
             "scope": [
               {
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
@@ -40,7 +40,7 @@ present, nor can you use the `modal-title` slot.
 Modals will not render their content in the document until they are shown (lazily rendered). Modals,
 when visible, are rendered **appended to the `<body>` element**. The placement of the `<b-modal>`
 component will not affect layout, as it always renders as a placeholder comment node (`<!---->`).
-You can revert to the behaviour of previous BootstrapVue versions via the use of the
+You can revert to the behaviour of older BootstrapVue versions via the use of the
 [`static` prop](#lazy-loading-and-static-modals).
 
 ## Toggle modal visibility
@@ -1021,6 +1021,11 @@ emitted.
 `<b-modal>` provides several accessibility features, including auto focus, return focus, keyboard
 (tab) _focus containment_, and automated `aria-*` attributes.
 
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
 ### Modal ARIA attributes
 
 The `aria-labelledby` and `aria-describedby` attributes will appear on the modal automatically in
@@ -1035,11 +1040,11 @@ most cases.
 - If the `aria-label` prop is specified with a string value, the `aria-labelledby` attribute will
   not be rendered, even if you have a title/header for your modal.
 
-The `aria-label` and `title-sr-only` props were added in version 2.0.0-rc.27.
+The `aria-label` and `title-sr-only` props were added in version `v2.0.0-rc.27`.
 
 ### Auto focus on open
 
-`<b-modal>` will autofocus the modal container when opened.
+`<b-modal>` will autofocus the modal _container_ when opened.
 
 You can pre-focus an element within the `<b-modal>` by listening to the `<b-modal>` `shown` event,
 and call the element's `focus()` method. `<b-modal>` will not attempt to autofocus if an element
diff --git a/src/components/popover/README.md b/src/components/popover/README.md
@@ -910,6 +910,11 @@ possible. When the popover is closed, you should return focus back to your trigg
 You may also want to implement focus containment in the popover content while the user is
 interacting with it (keeping focus inside the popover until it is closed by the user).
 
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
 ### Making popovers work for keyboard and assistive technology users
 
 To allow keyboard users to activate your popovers, you should only add them to HTML elements that
diff --git a/src/components/progress/README.md b/src/components/progress/README.md
@@ -313,6 +313,9 @@ Notes:
 
 - if `animated` is true, `striped` will automatically be enabled.
 - Animated progress bars don't work in Opera 12 — as they don't support CSS3 animations.
+- The animation effect of this component is dependent on the `prefers-reduced-motion` media query.
+  See the [reduced motion section of our accessibility documentation](/docs/reference/accessibility)
+  for additional details.
 
 ## Multiple bars
 
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -527,4 +527,14 @@ export default {
 Refer to the [Events](/docs/components/tooltip#component-reference) section of documentation for the
 full list of events.
 
+## Accessibility
+
+The trigger element, when the tooltip is showing, will have the attribute `aria-describedby` set
+with the auto generated ID of the tooltip.
+
+**Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media
+query. See the
+[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
+additional details.
+
 <!-- Component reference added automatically from component package.json -->

Original file line number	Diff line number	Diff line change
`@@ -209,7 +209,6 @@`
`209`	`209`	`"slots": [`
`210`	`210`	`{`
`211`	`211`	`"name": "button-content",`
`212`		`- "version": "2.6.0",`
`213`	`212`	`"description": "Content to place in the timepicker's icon button",`
`214`	`213`	`"scope": [`
`215`	`214`	`{`