Merge pull request #102831 from farah-alyasari/report11

Report11

Author: rmca14

articles/azure-maps/map-accessibility.md

@@ -12,7 +12,7 @@ manager: cpendleton
 
 # Building an accessible application
 
-Upwards of 20% of internet users have a need for accessible web applications. As such, it is important to make sure your application is designed such that any user can easily use it. Rather than thinking of accessibility as a set of tasks to complete, think of it as part of your overall user experience. The more accessible your application, the more people who can use it. 
+Upwards of 20% of internet users have a need for accessible web applications. As such, it's important to make sure your application is designed such that any user can easily use it. Rather than thinking of accessibility as a set of tasks to complete, think of it as part of your overall user experience. The more accessible your application, the more people who can use it. 
 
 When it comes to rich interactive content like a map, some common accessibility considerations are:
 - Support the screen reader for users who have difficulty seeing the web application.
@@ -80,7 +80,7 @@ The map has a number of keyboard shortcuts built in that make it easier to use t
 | Minus sign, Hyphen (`-`), or <sup>*</sup>Underscore (`_`) | Zoom out | 
 | `Shift` + mouse drag on map to draw area | Zoom into area |
 
-<sup>*</sup> These key shortcuts usually share the same key on a keyboard. These were added to improve the user experience, such that it doesn’t matter if the user uses the shift key or not for these shortcuts.
+<sup>*</sup> These key shortcuts usually share the same key on a keyboard. These shortcuts were added to improve the user experience. It also doesn’t matter if the user uses the shift key or not for these shortcuts.
 
 ## Screen Reader support
 
@@ -90,9 +90,9 @@ Any additional information that is placed on the base map should have correspond
 
 ## Make popups keyboard accessible
 
-A marker or symbol is often used to represent a location on the map. Additional information about the location is typically displayed in a popup when the user interacts with the marker. In most applications popups are displayed when a user clicks or taps a marker, however this requires the user to use a mouse or a touch screen. A good practice is to make popups accessible when using a keyboard. This can be achieved by creating a popup for each data point and adding it to the map. 
+A marker or symbol is often used to represent a location on the map. Additional information about the location is typically displayed in a popup when the user interacts with the marker. In most applications popups appear when a user clicks or taps a marker, however this event requires the user to use a mouse or a touch screen. A good practice is to make popups accessible when using a keyboard. This functionality can be achieved by creating a popup for each data point and adding it to the map. 
 
-The following example loads points of interests on the map using a symbol layer and adds a popup to the map for each point of interest. A reference to each popup is stored in the properties of each data point so that it can also be retrieved for a marker, such as when a marker is clicked. When focused on the map, pressing the tab key will allow the user to step through each popup on the map.
+The following example loads points of interests on the map using a symbol layer and adds a popup to the map for each point of interest. A reference to each popup is stored in the properties of each data point. It can also be retrieved for a marker, such as when a marker is clicked. When focused on the map, pressing the tab key will allow the user to step through each popup on the map.
 
 <br/>
 
@@ -102,12 +102,12 @@ The following example loads points of interests on the map using a symbol layer
 
 ## Additional accessibility tips
 
-Here are some additional tips to make your web mapping application more accessible.
+Here are some additional tips to make your web-mapping application more accessible.
 
-- If displaying a lot of interactive point data on the map, consider reducing the clutter and use clustering. 
+- If displaying many interactive point data on the map, consider reducing the clutter and use clustering. 
 - Ensure color contrast ratio between text/symbols and background colors is 4.5:1 or more.
 - Keep your screen reader (ARIA, alt, and title attributes) messages short, descriptive, and meaningful. Avoid unnecessary jargon and acronyms.
-- Try to optimize messages sent to the screen reader to provide short meaningful information that is easy for the user to digest. For example, if you want to update the screen reader at a high frequency, such as when the map is moving, consider doing the following:
+- Try to optimize messages sent to the screen reader to provide short meaningful information that is easy for the user to digest. For example, if you want to update the screen reader at a high frequency, such as when the map is moving, consider doing the following points:
     - Wait until the map has finished moving to update the screen reader.
     - Throttle the updates to once every few seconds. 
     - Combine messages together in a logical way. 
@@ -116,9 +116,9 @@ Here are some additional tips to make your web mapping application more accessib
     - Consider using a symbol layer with different icons for different metric categories, such as triangles, stars, and squares. The symbol layer also supports scaling the size of the icon. A text label can also be displayed.
     - If displaying line data, the width can be used to represent weight or size. A dash-array pattern can be used to represent different categories of lines. A symbol layer can be used in combination with a line to overlay icons along the line. Using an arrow icon is useful for showing the flow or direction of the line.
     - If displaying polygon data, a pattern, such as stripes, can be used as an alternative to color. 
-- Some visualizations such as heatmaps, tile layers, and image layers are not accessible for users with vision impairments. Some considerations:
+- Some visualizations such as heatmaps, tile layers, and image layers aren't accessible for users with vision impairments. Some considerations:
     - Have the screen reader describe what the layer is displaying when added to the map. For example, if a weather radar tile layer is displayed, have the screen reader say something like "Weather radar data overlaid on map."
-- Limit the amount of functionality that requires a mouse hover. These will be inaccessible to users who are using a keyboard or touch device to interact with your application. Note, it is still a good practice to have a hover style for interactive content such as clickable icons, links, and buttons.
+- Limit the amount of functionality that requires a mouse hover. These functionalities will be inaccessible to users who are using a keyboard or touch device to interact with your application. Note, it's still a good practice to have a hover style for interactive content such as clickable icons, links, and buttons.
 - Try navigating your application using the keyboard. Make sure tab ordering is logical.
 - If creating keyboard shortcuts, try to limit it to two keys or less. 
 

articles/azure-maps/map-add-bubble-layer.md

@@ -13,14 +13,14 @@ ms.custom: codepen
 
 # Add a bubble layer to a map
 
-This article shows you how you can render point data from a data source as a bubble layer on a map. Bubble layers render points as circles on the map with fixed pixel radius. 
+This article shows you how to render point data from a data source as a bubble layer on a map. Bubble layers render points as circles on the map with fixed pixel radius. 
 
 > [!TIP]
 > Bubble layers by default will render the coordinates of all geometries in a data source. To limit the layer such that it only renders point geometry features set the `filter` property of the layer to `['==', ['geometry-type'], 'Point']` or `['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]` if you want to include MultiPoint features as well.
 
 ## Add a bubble layer
 
-The following code loads an array of points into a data source and connects it to a [bubble layer](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.layer.bubblelayer?view=azure-iot-typescript-latest). The bubble layer is given options to render the radius of each bubble at five pixels, a fill color of white, a stroke color of blue, and stroke width of six pixels. 
+The following code loads an array of points into a data source. Then, the data points are connected to a [bubble layer](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.layer.bubblelayer?view=azure-iot-typescript-latest). The bubble layer renders the radius of each bubble with five pixels, a fill color of white, a stroke color of blue, and a stroke width of six pixels. 
 
 ```javascript
 //Add point locations.
@@ -95,4 +95,4 @@ See the following articles for more code samples to add to your maps:
 > [Use data-driven style expressions](data-driven-style-expressions-web-sdk.md)
 
 > [!div class="nextstepaction"]
-> [Code samples](https://docs.microsoft.com/samples/browse/?products=azure-maps)
+> [Code samples](https://docs.microsoft.com/samples/browse/?products=azure-maps)

articles/azure-maps/map-add-controls.md

@@ -12,11 +12,11 @@ manager: timlt
 
 # Add controls to a map
 
-This article shows you how to add controls to a map. You will also learn how to create a map with all controls and a [style picker](https://docs.microsoft.com/azure/azure-maps/choose-map-style).
+This article shows you how to add controls to a map. You'll also learn how to create a map with all controls and a [style picker](https://docs.microsoft.com/azure/azure-maps/choose-map-style).
 
 ## Add zoom control
 
-A zoom control adds buttons for zooming the map in and out. The following code sample creates an instance of the [ZoomControl](/javascript/api/azure-maps-control/atlas.control.zoomcontrol) class and adds it the bottom-right corner of the map.
+A zoom control adds buttons for zooming the map in and out. The following code sample creates an instance of the [ZoomControl](/javascript/api/azure-maps-control/atlas.control.zoomcontrol) class, and adds it the bottom-right corner of the map.
 
 ```javascript
 //Construct a zoom control and add it to the map.
@@ -34,7 +34,7 @@ Below is the complete running code sample of the above functionality.
 
 ## Add pitch control
 
-A pitch control adds buttons for tilting the pitch to map relative to the horizon. The following code sample creates an instance of the [PitchControl](/javascript/api/azure-maps-control/atlas.control.pitchcontrol) class and adds it the top-right corner of the map.
+A pitch control adds buttons for tilting the pitch to map relative to the horizon. The following code sample creates an instance of the [PitchControl](/javascript/api/azure-maps-control/atlas.control.pitchcontrol) class. It adds the PitchControl to top-right corner of the map.
 
 ```javascript
 //Construct a pitch control and add it to the map.
@@ -90,7 +90,7 @@ Here is a tool to test out the various options for customizing the controls.
   (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
-If you want to create customized navigation controls, create a class that extends from the `atlas.Control` class or create an HTML element and position it above the map div. HAve this UI control call the maps `setCamera` function to move the map. 
+If you want to create customized navigation controls, create a class that extends from the `atlas.Control` class or create an HTML element and position it above the map div. Have this UI control call the maps `setCamera` function to move the map. 
 
 ## Next steps
 

articles/azure-maps/map-add-custom-html.md

@@ -19,7 +19,7 @@ This article shows you how to add a custom HTML such as an image file to the map
 > HTML Markers do not connect to data sources. Instead position information is added directly to the marker and the marker is added to the maps `markers` property which is a [HtmlMarkerManager](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.htmlmarkermanager?view=azure-iot-typescript-latest).
 
 > [!IMPORTANT]
-> Unlike most layers in the Azure Maps Web control which use WebGL for rendering, HTML Markers use traditional DOM elements for rendering. As such, the more HTML markers added a page, the more DOM elements there are. Performance can degrade after adding a few hundred HTML markers. For larger data sets consider either clustering your data or using a Symbol or Bubble layer.
+> Unlike most layers in the Azure Maps Web control which use WebGL for rendering, HTML Markers use traditional DOM elements for rendering. As such, the more HTML markers added to a page, the more DOM elements there are. Performance can degrade after adding a few hundred HTML markers. For larger data sets consider either clustering your data or using a Symbol or Bubble layer.
 
 ## Add an HTML marker
 
@@ -28,7 +28,7 @@ The [HtmlMarker](https://docs.microsoft.com/javascript/api/azure-maps-control/at
 The following code creates an HTML marker, and sets the color property to "DodgerBlue" and the text property to "10". A popup is attached to the marker and `click` event is used to toggle the visibility of the popup.
 
 ```javascript
-//Create a HTML marker and add it to the map.
+//Create an HTML marker and add it to the map.
 var marker = new atlas.HtmlMarker({
     color: 'DodgerBlue',
     text: '10',
@@ -115,4 +115,4 @@ For more code examples to add to your maps, see the following articles:
 > [Add a symbol layer](./map-add-pin.md)
 
 > [!div class="nextstepaction"]
-> [Add a bubble layer](./map-add-bubble-layer.md)
+> [Add a bubble layer](./map-add-bubble-layer.md)

articles/azure-maps/map-add-drawing-toolbar.md

@@ -65,7 +65,7 @@ Below is the complete running code sample of the functionality above:
 
 ## Change drawing rendering style
 
-The following code gets the rendering layers from the drawing manager and modifies their options to change rendering style for drawing. In this case, points will be rendered with a blue marker icon, lines will be red and four pixels wide, polygons will have a green fill color and an orange outline.
+The following code gets the rendering layers from the drawing manager and modifies their options to change rendering style for drawing. In this case, points will be rendered with a blue marker icon. Lines will be red and four pixels wide. Polygons will have a green fill color and an orange outline.
 
 ```Javascript
 var layers = drawingManager.getLayers();
@@ -118,4 +118,4 @@ Learn more about the classes and methods used in this article:
 > [Drawing toolbar](https://docs.microsoft.com/javascript/api/azure-maps-drawing-tools/atlas.control.drawingtoolbar?view=azure-node-latest)
 
 > [!div class="nextstepaction"]
-> [Drawing manager](https://docs.microsoft.com/javascript/api/azure-maps-drawing-tools/atlas.drawing.drawingmanager?view=azure-node-latest)
+> [Drawing manager](https://docs.microsoft.com/javascript/api/azure-maps-drawing-tools/atlas.drawing.drawingmanager?view=azure-node-latest)