docs: correct grammar and wording (#340)

documents/src/pages/elements/accordion.md

@@ -185,7 +185,7 @@ ef-collapse > ef-checkbox {
 
 `ef-accordion` is an element to manage expanding and collapsing state of `ef-collapse`. The element itself doesn't require specific aria attributes but it should be able to manage keyboard navigation to navigate between collapse items and also expand / collapse action.
 
-`ef-accordion` has provided necessary keyboard navigation. However, you need to set an appropriate `aria-level` attribute to the `ef-collapse` elements, depends on your page structure. Typically, on the page, it should reserve `aria-level="1"` for main page's heading (h1) so you may want to set `aria-level` from `aria-level="2"` onward.
+`ef-accordion` has provided necessary keyboard navigation. However, you need to set an appropriate `aria-level` attribute to the `ef-collapse` elements, depending on your page structure. Typically, on the page, it should reserve `aria-level="1"` for main page's heading (h1) so you may want to set `aria-level` from `aria-level="2"` onwards.
 
 ```html
 <ef-accordion spacing>

documents/src/pages/elements/appstate-bar.md

@@ -116,6 +116,6 @@ The App State Bar provides a slot to display content at the right of bar. The sl
 ## Accessibility
 ::a11y-intro::
 
-`ef-appstate-bar` doesn't have any assigned role. It shouldn't be focusable as itself isn't a control element. Accessibility users can use arrow key to walk through content on Appstate Bar if needed.
+`ef-appstate-bar` doesn't have any assigned role. It shouldn't be focusable as it is not a control element. Accessibility users can use arrow keys to walk through content on Appstate Bar if needed.
 
 ::a11y-end::

documents/src/pages/elements/button-bar.md

@@ -226,11 +226,11 @@ buttonBar.addEventListener('tap', (e) => {
 ## Accessibility
 ::a11y-intro::
 
-`ef-button-bar` serves as a container for Button components. The button bar itself is assigned with `toolbar` role whilst its buttons have `button` role. Always try to include a text label, or `aria-label` for a button bar and buttons.
+`ef-button-bar` serves as a container for Button components. The button bar itself is assigned with `toolbar` role whilst its buttons have `button` role. Always try to include a text label or `aria-label` for a button bar and buttons.
 
-Note that a Button Bar should not be used in place of a Tab Bar, which is for selecting and displaying panels – maintaining this distinction will help accessible users understand the purpose of the component.
+Note that a Button Bar should not be used in place of a Tab Bar, which is for selecting and displaying panels. Maintaining this distinction will help accessible users understand the purpose of the component.
 
-`ef-button-bar` provides `toolbar` role by default and manages keyboard navigation as per accessibility guideline. However, if you use Button Bar with `managed` mode, you need to override its role to `radiogroup` and all buttons to be assigned with `radio` role.
+`ef-button-bar` provides `toolbar` role by default and manages keyboard navigation as per accessibility guidelines. However, if you use Button Bar with `managed` mode, you need to override its role to `radiogroup` and all buttons need to be assigned with `radio` role.
 
 ```html
 <ef-button-bar aria-label="text alignment toolbar" managed role="radiogroup">

documents/src/pages/elements/button.md

@@ -189,7 +189,7 @@ btn.addEventListener('tap', () => {
 ## Accessibility
 ::a11y-intro::
 
-`ef-button` has been assigned the role of `button` and can have a `pressed` state. Always try to include a text label for a button - avoid relying solely upon an image or icon to convey the button’s purpose to users. Assistive technology users ascertain the purpose of a button via its accessible name, which gets computed from either its visual label, alternative text, or aria-label attribute – so be sure to fill them in accurately. Whenever the button’s visual state changes, the button state programmatically updates to inform assistive technology users of the element’s changed state. 
+`ef-button` has been assigned the role of `button` and can have a `pressed` state. Always try to include a text label for a button. Avoid relying solely upon an image or icon to convey the button’s purpose to users. Assistive technology users ascertain the purpose of a button via its accessible name which gets computed from either its visual label, alternative text, or aria-label attribute – so be sure to fill them in accurately. Whenever the button’s visual state changes, the button state programmatically updates to inform assistive technology users of the element’s changed state. 
 
 `ef-button` handles role and aria value but when using button without any text label, assign `aria-label` as the accessible name.
 

documents/src/pages/elements/calendar.md

@@ -234,7 +234,7 @@ div {
 ## Accessibility
 ::a11y-intro::
 
-`ef-calendar` is assigned parameters in line with table or grid semantics. The date selection is assigned `role="button"` and can include an `aria-label` to describe the context of each date. For example, an unselected date may be announced by screen readers as “12th November 2021” and a selected date may be announced as “Start date, Today, 12th November 2021.”. The selected date and today’s date have visual cues, such as bold or underlined text (in addition to colour changes), which allow visually impaired users to more readily identify them. 
+`ef-calendar` is assigned parameters in line with table or grid semantics. The date selection is assigned `role="button"` and can include an `aria-label` to describe the context of each date. For example, an unselected date may be announced by screen readers as “12th November 2021” and a selected date may be announced as “Start date, Today, 12th November 2021”. The selected date and today’s date have visual cues, such as bold or underlined text (in addition to colour changes), which allow visually impaired users to more readily identify them. 
 
 `ef-calendar` has already managed aria attributes and keyboard navigation.
 

documents/src/pages/elements/checkbox.md

@@ -99,7 +99,7 @@ checkbox.addEventListener('checked-changed', (e) => {
 
 The `role="group"` should be used to associate the grouping with the element’s group label. 
 
-`ef-checkbox` handles role and aria value but for checkbox group, you need to assign `role="group"` by yourself.
+`ef-checkbox` handles role and aria value but for checkbox group, you need to assign `role="group"` yourself.
 
 ```html
 <div role="group" aria-labelledby="header">

documents/src/pages/elements/clock.md

@@ -240,7 +240,7 @@ ef-clock {
 
 `ef-clock` is a set of number segments that contain hours, minutes, seconds, and time convention periods. Typically, it does not assign any roles as it's not an actionable component.
 
-However, in the interactive mode, clock will be assigned `role="spinbutton"`. Users can use arrow keys to navigate between each segment or update value in the segment. Current value of the clock will be updated to `aria-valuetext`. You can assign `aria-label` to `ef-clock` to give the component an assistive name for screen reader.
+In the interactive mode, clock will be assigned `role="spinbutton"`. Users can use arrow keys to navigate to each segment and can update value in the segment. Current value that displays on clock will be updated to `aria-valuetext` and announced by screen reader. Optionally, you can assign `aria-label` to `ef-clock` to give the component an assistive name for the screen reader.
 
 If you need non-interactive clock to be focusable, you can set `tabindex="0"` and assigning `role="group"` with `aria-label` value.
 

documents/src/pages/elements/collapse.md

@@ -164,11 +164,11 @@ ef-collapse > ef-checkbox {
 ## Accessibility
 ::a11y-intro::
 
-`ef-collapse` is assigned the `role="button"` and can include the property `aria-expanded`. It aims to toggling between expanding and collapse its content. `aria-level` attribute should be used to define the hierarchical level elements within their hierarchical structures. Levels increase with depth. The value for aria-level is an integer greater than or equal to 1.
+`ef-collapse` is assigned the `role="button"` and can include the property `aria-expanded`. It toggles between expanding and collapsing its content. `aria-level` attribute should be used to define the hierarchical level elements within their hierarchical structures. Levels increase with depth. The value for aria-level is an integer greater than or equal to 1.
 
 The slots feature uses a combination of the Button and Checkbox components.  
 
-`ef-collapse` has provided role and keyboard navigation. However, you need to set an appropriate `aria-level` attribute to the element, depends on your page structure. Typically, on the page, it should reserve `aria-level="1"` for main page's heading (h1) so you may want to set `aria-level` from `aria-level="2"` onward.
+`ef-collapse` has provided role and keyboard navigation. However, you need to set an appropriate `aria-level` attribute to the element, depending on your page structure. Typically, on the page, it should reserve `aria-level="1"` for main page's heading (h1) so you may want to set `aria-level` from `aria-level="2"` onwards.
 
 ```html
 <ef-collapse header="SpaceX Dragon" aria=level="2">

documents/src/pages/elements/counter.md

@@ -149,6 +149,6 @@ Compact notation also work with the `max` attribute.
 ## Accessibility
 ::a11y-intro::
 
-`ef-counter` can be read by screen reader in a similar way as a generic text HTML element. It doesn't meant to be an actionable element so, generally, it shouldn't be focusable and not necessary to be assigned with any roles.
+`ef-counter` can be read by screen readers in a similar way to a generic text HTML element. It isn't meant to be an actionable element so, generally, it shouldn't be focusable and it's not necessary for it to be assigned any roles.
 
 ::a11y-end::

documents/src/pages/elements/datetime-picker.md

@@ -346,9 +346,9 @@ section {
 ## Accessibility
 ::a11y-intro::
 
-`ef-datetime-picker` provides input field for users to entering date string value or date with time value. Users can open popup with calendar element and use keyboard navigation to select the date from UI.
+`ef-datetime-picker` provides input fields for users to enter date string values or date with time values. Users can open the popup with calendar element and use keyboard navigation to select the date from the UI.
 
-`ef-datetime-picker` is implemented keyboard navigation for users to navigate on UI. You must ensure that the element has associated label by using `aria-label` or `aria-labelledby`.
+`ef-datetime-picker` has implemented keyboard navigation for users to navigate on the UI. You must ensure that the element has associated label by using `aria-label` or `aria-labelledby`.
 
 ```html
 <ef-datetime-picker

documents/src/pages/elements/dialog.md

@@ -196,6 +196,6 @@ To prevent the dialog from closing on ESC key press, add the `no-cancel-on-esc-k
 
 `ef-dialog` is assigned `role="dialog"`. Focus is automatically directed to the dialog when it appears. When the dialog is active, focus is restricted to the dialog and returned to the triggering button when dismissed. 
 
-`ef-dialog` has provided the role and implemented keyboard navigation. You should apply accessibility on the dialog content following standard guidelines e.g. providing `aria-label` for form controls, setting correct `tabindex`.
+`ef-dialog` has provided the role and implemented keyboard navigation. You should apply accessibility on the dialog content following standard guidelines e.g. provide `aria-label` for form controls, set correct `tabindex` etc.
 
 ::a11y-end::

documents/src/pages/elements/header.md

@@ -120,11 +120,11 @@ Organizing web pages by headings helps users get a sense of the page’s organiz
 
 As a best practice to accommodate accessible users, apply a logical nesting of Header levels.
 
-*	The main heading of page should use h1 or `ef-header` with `aria-level="1"`.
+*	The main heading of your page should use h1 or `ef-header` with `aria-level="1"`.
 *	Ideally, there should only be one main heading on each page
 *	Header level 2 to 6 can be used to structure the remaining content on the page
 
-As `ef-header` can be used for multiple proposed, developers can decide to set attribute `role` and assign suitable `aria-level` at an application level. 
+As `ef-header` can be used for multiple purposes, developers can decide to set attribute `role` and assign suitable `aria-level` at an application level. 
 
 ```html
 <h1>Understanding The Different Types of Cryptocurrency</h1>

documents/src/pages/elements/item.md

@@ -398,7 +398,7 @@ menu.addEventListener('tap', (event) => {
 ## Accessibility
 ::a11y-intro::
 
-`ef-item` is low-level element that typically, it is used to compose for creating other element such as `ef-list`, `ef-tree`. Hence, `ef-item` will not be assigned with any roles by default but only provide `aria-selected` and `aria-checked` attributes which will reflect current selected state of itself.
+`ef-item` is a low-level element that's typically used to create other elements such as `ef-list`and `ef-tree`. Hence, `ef-item` will not be assigned any roles by default but only provide `aria-selected` and `aria-checked` attributes which will reflect its current selected state.
 
 For example, if you don't want to use `ef-list` and want to create a list element, you can assign your parent element with `role="listbox"` and each `ef-item` with `role="option"`.
 

documents/src/pages/elements/notification.md

@@ -112,12 +112,12 @@ During development, when the application is running on localhost or 127.0.0.1, a
 ## Accessibility
 ::a11y-intro::
 
-`ef-notification` has a live region and is assigned `role="alert"` and use `aria-live` to announce notification message.
+`ef-notification` has a live region and is assigned `role="alert"` and uses `aria-live` to announce notification messages.
 
-Screen reader technology will only read notification message only after page is loaded. If you need the notification to be announced when application starts, you have to set text content to the notification element after page is loaded or use notification tray to popup the notification after the page is loaded.
+Screen reader technology will read notification messages only after the page is loaded. If you need the notification to be announced when your application starts, you have to set text content to the notification element after the page is loaded or use notification tray to popup the notification after the page is loaded.
 
-Notification should not disappear too quickly. The duration of the notification should be appropriate for the length of the message.
+Notifications should not disappear too quickly. The duration of the notification should be appropriate for the length of the message.
 
-For any error or critical notifications, it shouldn't disappear automatically. The notification should stay on the page until users dismiss it by themselves.
+For any error or critical notifications, it shouldn't disappear automatically. The notification should stay on the page until the user dismisses it themselves.
 
 ::a11y-end::

documents/src/pages/elements/overlay-menu.md

@@ -651,9 +651,9 @@ The Overlay Menu’s trigger element is assigned `role="button"` and has propert
 
 `ef-overlay-menu` has assigned with role and implemented keyboard navigation. However, you will need to assign some attributes following [ARIA menu button practices](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html#rps_label).
 
-* Button that trigger overlay menu should be assigned `aria-haspopup="true"`
-* Button that trigger overlay menu should be assigned `aria-controls` with id of `ef-overlay-menu`
-* Button that trigger overlay menu should be assigned `aria-expanded="true"` when `ef-overlay-menu` is opened and `aria-expanded="false"` when it's closed
+* Button that triggers overlay menu should be assigned `aria-haspopup="true"`
+* Button that triggers overlay menu should be assigned `aria-controls` with id of `ef-overlay-menu`
+* Button that triggers overlay menu should be assigned `aria-expanded="true"` when `ef-overlay-menu` is opened and `aria-expanded="false"` when it's closed
 * You can use `aria-labelledby` or `aria-label` to set accessible name for `ef-overlay-menu`
 
 ```html
@@ -669,7 +669,7 @@ The Overlay Menu’s trigger element is assigned `role="button"` and has propert
 </ef-overlay-menu>
 ```
 
-If you create `ef-overlay-menu` by using `data`, the menu and its items will be assigned with aria attributes correctly following ARIA guideline. However, if you create `ef-overlay-menu` declaratively using light DOM, you will need to follow additional guidelines below.
+If you create `ef-overlay-menu` by using `data`, the menu and its items will be assigned with aria attributes correctly following ARIA guidelines. However, if you create `ef-overlay-menu` declaratively using light DOM, you will need to follow additional guidelines below.
 
 ```html
 <ef-button

documents/src/pages/elements/pagination.md

@@ -87,7 +87,7 @@ pagination.addEventListener('value-changed', (e) => console.log(e.detail.value))
 
 Pagination is comprised of a set of interrelated elements, including input field for page number and buttons. It is built in such a way that screen readers will announce the current page whenever an update is made.
 
-`ef-pagination` doesn't have any assigned role. However, it's focusable by default and the focus will be delegated to the middle input. Users can use arrow up and down key to change value. Once users committed the new value by pressing enter key or tabbing to new control, the screen reader should announce a full sentence e.g. `Page 3 of 4'.
+`ef-pagination` doesn't have any assigned role. However, it's focusable by default and the focus will be delegated to the middle input. Users can use arrow up and down key to change value. Once users commit the new value by pressing the enter key or tabbing to new control, the screen reader should announce a full sentence e.g. `Page 3 of 4'.
 
 You should assign `aria-label` or `aria-labelledby` attribute to `ef-pagination` with accessible name.
 

documents/src/pages/elements/pill.md

@@ -71,7 +71,7 @@ A pill can display a clear button, or a small cross icon, when the `clears` attr
 
 In some scenarios, pills are used for presenting a short text without any users interaction. For that, pill can be assigned `role="none"` or `role="presentation"`.
 
-* `ef-pill` is assigned with `role="button"` by default, it's automatically managing attribute `aria-pressed` when use `toggles` mode
+* `ef-pill` is assigned with `role="button"` by default, it's automatically managing attribute `aria-pressed` when using `toggles` mode
 * You can assign `role="none"` or `role="presentation"` to `ef-pill` if your pills do not have a button behavior i.e. not an actionable pill
 * You can set `tabindex="-1"` to `ef-pill` if you do not want pill to be focusable at all
 
@@ -83,7 +83,7 @@ In some scenarios, pills are used for presenting a short text without any users
 <ef-pill role="none" aria-label="Ninja Tag">Ninja</ef-pill>
 ```
 
-* When pill is a removable pill, with `clears` attribute, users can trigger clears button by pressing a **Delete** key. You can use `aria-label` to provide users for more detail.
+* When pill is a removable pill, with `clears` attribute, users can trigger clears button by pressing a **Delete** key. You can use `aria-label` to provide users with more detail.
 
 ```html
 <h3 tabindex="0" aria-label="List of tags. You can press delete key to delete each tag">List of tags</h3>