35
Views
2
Comments
Solved
[OutSystems Charts] [OutSystems Charts] Charts Version 3.4 Accessibility Functions for Legend not working
outsystems-charts
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.54.61 (Build 63317)

I've added this JavaScript code on the DonutChartInitialized

const chartPlotOptions = {

    'accessibility': {

        'description': 'Case Status Chart',

        'enabled': 'true',

        'keyboardNavigation': {

            'enabled': 'true',

            'seriesNavigation': {

                'mode': 'normal',

                'rememberPointFocus': 'true'

            },

            'wrapAround': 'true'

        }

    },

    'plotOptions': {

        'pie': {

            'size': '90%',

            'innerSize': '80%',

            'borderWidth': 3

        },

        'legend': {

            'enabled': 'true'

        },

    },

    'legend': {

        'accessibility': {

            'enabled': 'true',

            'keyboardNavigation': {

                'enabled': 'true'

            }

        }

    }

};

OutSystems.ChartAPI.Chart.SetProviderConfigs($parameters.ChartWidgetId, JSON.stringify(chartPlotOptions));


but when I tried using the screen reader, It did not read the Legends even though there's aria-label on each legend.
I would also like to use Tab button instead of arrow keys to navigate from one legend to another, the same with the series.

Attached is the OML 

Charts_Examples > Screen1

OutSystemsChartsSample_1_3_4.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Willts 

Looking into your code you have added the wrong data type for some of the attributes you used.
Mainly all the booleans you're passing as string so it was not working - example here.
Replace your code with the following and it should work fine according to my tests:

const chartPlotOptions = {  
    'accessibility':{
        'description': 'Case Status Chart',
        'enabled': true,
        'keyboardNavigation': {
            'enabled': true,
            'seriesNavigation':{
                'mode': 'normal',
                'rememberPointFocus': true
            },
            'wrapAround': true
        }
    },
    'plotOptions': {
      'pie':{
            'size': '90%',
            'innerSize': '80%',
            'borderWidth': 3
        },
        'legend': {
        'enabled': true
    },
  },
    'legend': {
        'accessibility': {
            'enabled': true,
            'keyboardNavigation':{
                'enabled': true
            }
        }
    }
};

OutSystems.ChartAPI.Chart.SetProviderConfigs($parameters.ChartWidgetId, JSON.stringify(chartPlotOptions));


Hope it helps!

Cheers,
GM

2024-05-14 06-49-08
Karnika-EONE

Hi Willts

We have DonutChart_V1(You need to take dependency from outsystem charts),In that Chart we have option like advancedFormat,At that section You able to add your customize js.

I have attached the OML.Please Check.

OutSystemsChartsSample_1_3_4.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Willts 

Looking into your code you have added the wrong data type for some of the attributes you used.
Mainly all the booleans you're passing as string so it was not working - example here.
Replace your code with the following and it should work fine according to my tests:

const chartPlotOptions = {  
    'accessibility':{
        'description': 'Case Status Chart',
        'enabled': true,
        'keyboardNavigation': {
            'enabled': true,
            'seriesNavigation':{
                'mode': 'normal',
                'rememberPointFocus': true
            },
            'wrapAround': true
        }
    },
    'plotOptions': {
      'pie':{
            'size': '90%',
            'innerSize': '80%',
            'borderWidth': 3
        },
        'legend': {
        'enabled': true
    },
  },
    'legend': {
        'accessibility': {
            'enabled': true,
            'keyboardNavigation':{
                'enabled': true
            }
        }
    }
};

OutSystems.ChartAPI.Chart.SetProviderConfigs($parameters.ChartWidgetId, JSON.stringify(chartPlotOptions));


Hope it helps!

Cheers,
GM

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.