Add `locationAriaLabel` to allow customizing location aria-label

[ronicayu]

This is related to accessibility.

Screen readers read the aria-labels, thus now they read 'location.name' only - other than the information we want to convey at each location

Tried to use 'aria-describedby' attribute to point to a tooltip to solve this issue, but it doesn't work on some of the browsers (e.g. Safari on IOS 12).

Supporting custom location aria-labels is a better solution.

[VictorCazanave]

Thanks a lot for your contribution @ronicayu ! 😃

Actually you can already customize the aria-label modifying the name of each location after importing the map, like in this example. Does it solve your issue?

I plan to rewrite these components to fix some conception mistakes and I'm thinking to let the user define/override all the attributes in this custom map object:

this.customMap= {
      ...Map,
      ariaLabel: '...', // string
      role: '...', // string
      anyValidAttribute: '...', // string
      locations: Map.locations.map(location => {
        ariaLabel: '...', // function or string
        role: '...', // function or string
        anyValidAttribute: '...', // function or string
      })
    };

Since you use this component, I'd like to know your opinion. Would you prefer this new (more flexible) way or keep using props to customize some attributes?

[ronicayu]

Hi Victor, Thank you for reviewing it!

In my use case I still need the location.name field for other purposes (e.g. the state names are used in my tooltip header)

Technically I can hack it by creating another map with location id and name, and then to change location.name to another value. but I think it would be nice to be able to customise aria-label field

[ronicayu]

I think the concept in your rewrite plan is nice :)

[VictorCazanave]

Okay, let's add this feature then 👍

Thanks again for your contribution and your feedback!