[SSE] Added alternative text for charts and shapes.

apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template

@@ -421,4 +421,27 @@
             </tr>
         </table>
     </div>
+</div>
+<div id="id-chart-settings-dlg-alttext" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1" width="100%">
+            <tr>
+                <td class="padding-large">
+                    <label class="header"><%= scope.textAltTitle %></label>
+                    <div id="chart-advanced-alt-title"></div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="header"><%= scope.textAltDescription %></label>
+                    <textarea id="chart-advanced-alt-description" class="form-control" style="width: 100%; height: 120px;"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label><%= scope.textAltTip %></label>
+                </td>
+            </tr>
+        </table>
+    </div>
 </div>

apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template

@@ -93,4 +93,27 @@
             </tr>
         </table>
     </div>
+</div>
+<div id="id-adv-shape-alttext" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1" width="100%">
+            <tr>
+                <td class="padding-large">
+                    <label class="header"><%= scope.textAltTitle %></label>
+                    <div id="shape-advanced-alt-title"></div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="header"><%= scope.textAltDescription %></label>
+                    <textarea id="shape-advanced-alt-description" class="form-control" style="width: 100%; height: 70px;"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label><%= scope.textAltTip %></label>
+                </td>
+            </tr>
+        </table>
+    </div>
 </div>

apps/spreadsheeteditor/main/app/view/ChartSettings.js

@@ -924,14 +924,17 @@ define([
                     (new SSE.Views.ChartSettingsDlg(
                         {
                             chartSettings: props,
+                            imageSettings: (me.isChart) ? me._originalProps : null,
                             isChart: me.isChart,
                             api: me.api,
                             handler: function(result, value) {
                                 if (result == 'ok') {
                                     if (me.api) {
-                                        if (me.isChart)
+                                        if (me.isChart) {
                                             me.api.asc_editChartDrawingObject(value.chartSettings);
-                                        else
+                                            if (value.imageSettings)
+                                                me.api.asc_setGraphicObjectProps(value.imageSettings);
+                                        } else
                                             me.api.asc_setSparklineGroup(me._state.SparkId, value.chartSettings);
                                     }
                                 }

apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js

@@ -63,7 +63,8 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                     {panelId: 'id-chart-settings-dlg-vert',         panelCaption: this.textVertAxis},
                     {panelId: 'id-chart-settings-dlg-hor',          panelCaption: this.textHorAxis},
                     {panelId: 'id-spark-settings-dlg-style',        panelCaption: this.textTypeData},
-                    {panelId: 'id-spark-settings-dlg-axis',         panelCaption: this.textAxisOptions}
+                    {panelId: 'id-spark-settings-dlg-axis',         panelCaption: this.textAxisOptions},
+                    {panelId: 'id-chart-settings-dlg-alttext',      panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
                     scope: this
@@ -89,6 +90,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
 
             this.api = this.options.api;
             this.chartSettings = this.options.chartSettings;
+            this.imageSettings = this.options.imageSettings;
             this.isChart       = this.options.isChart;
             this.vertAxisProps = null;
             this.horAxisProps = null;
@@ -986,6 +988,25 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 }
             }, this));
 
+            // Alt Text
+
+            this.inputAltTitle = new Common.UI.InputField({
+                el          : $('#chart-advanced-alt-title'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            }).on('changed:after', function() {
+                me.isAltTitleChanged = true;
+            });
+
+            this.textareaAltDescription = this.$window.find('textarea');
+            this.textareaAltDescription.keydown(function (event) {
+                if (event.keyCode == Common.UI.Keys.RETURN) {
+                    event.stopPropagation();
+                }
+                me.isAltDescChanged = true;
+            });
+
             this.afterRender();
         },
 
@@ -1002,6 +1023,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 this.btnsCategory[1].setVisible(false);
                 this.btnsCategory[2].setVisible(false);
                 this.btnsCategory[3].setVisible(false);
+                this.btnsCategory[6].setVisible(false);
             }
 
             if (this.storageName) {
@@ -1345,6 +1367,14 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
 
                     this.updateAxisProps(this._state.ChartType);
                     this.currentChartType = this._state.ChartType;
+
+                    if (this.imageSettings) {
+                        value = this.imageSettings.asc_getTitle();
+                        this.inputAltTitle.setValue(value ? value : '');
+
+                        value = this.imageSettings.asc_getDescription();
+                        this.textareaAltDescription.val(value ? value : '');
+                    }
                 } else { // sparkline
                     this._state.SparkType = props.asc_getType();
                     var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType});
@@ -1446,7 +1476,14 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 this.chartSettings.putVertAxisProps(this.vertAxisProps);
                 this.chartSettings.putHorAxisProps(this.horAxisProps);
 
-                return { chartSettings: this.chartSettings };
+                var imagesettings = (this.isAltTitleChanged || this.isAltDescChanged) ? new Asc.asc_CImgProperty() : null;
+                if (this.isAltTitleChanged)
+                    imagesettings.asc_putTitle(this.inputAltTitle.getValue());
+
+                if (this.isAltDescChanged)
+                    imagesettings.asc_putDescription(this.textareaAltDescription.val());
+
+                return { chartSettings: this.chartSettings, imageSettings: imagesettings};
             } else {
                 return { chartSettings: this._changedProps };
             }
@@ -1714,6 +1751,11 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
         textReverseOrder: 'Reverse order',
         textAutoEach: 'Auto for Each',
         textSameAll: 'Same for All',
-        textTitleSparkline: 'Sparkline - Advanced Settings'
+        textTitleSparkline: 'Sparkline - Advanced Settings',
-}, SSE.Views.ChartSettingsDlg || {}));
+        textAlt: 'Alternative Text',
+        textAltTitle: 'Title',
+        textAltDescription: 'Description',
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
+
+    }, SSE.Views.ChartSettingsDlg || {}));
 });

apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js

@@ -48,7 +48,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
     SSE.Views.ShapeSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 300,
-            height: 332,
+            height: 342,
             toggleGroup: 'shape-adv-settings-group',
             sizeOriginal: {width: 0, height: 0},
             sizeMax: {width: 55.88, height: 55.88},
@@ -62,7 +62,8 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 items: [
                     {panelId: 'id-adv-shape-width',      panelCaption: this.textSize},
                     {panelId: 'id-adv-shape-shape',      panelCaption: this.textWeightArrows},
-                    {panelId: 'id-adv-shape-margins',    panelCaption: this.strMargins}
+                    {panelId: 'id-adv-shape-margins',    panelCaption: this.strMargins},
+                    {panelId: 'id-adv-shape-alttext',    panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
                     scope: this
@@ -434,6 +435,25 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 obj.getChild('.footer .primary').focus();
             });
 
+            // Alt Text
+
+            this.inputAltTitle = new Common.UI.InputField({
+                el          : $('#shape-advanced-alt-title'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            }).on('changed:after', function() {
+                me.isAltTitleChanged = true;
+            });
+
+            this.textareaAltDescription = this.$window.find('textarea');
+            this.textareaAltDescription.keydown(function (event) {
+                if (event.keyCode == Common.UI.Keys.RETURN) {
+                    event.stopPropagation();
+                }
+                me.isAltDescChanged = true;
+            });
+
             this.afterRender();
         },
 
@@ -474,11 +494,23 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 }
                 this.btnsCategory[2].setDisabled(null === margins);   // Margins
 
+                value = props.asc_getTitle();
+                this.inputAltTitle.setValue(value ? value : '');
+
+                value = props.asc_getDescription();
+                this.textareaAltDescription.val(value ? value : '');
+
                 this._changedProps = new Asc.asc_CImgProperty();
             }
         },
 
         getSettings: function() {
+            if (this.isAltTitleChanged)
+                this._changedProps.asc_putTitle(this.inputAltTitle.getValue());
+
+            if (this.isAltDescChanged)
+                this._changedProps.asc_putDescription(this.textareaAltDescription.val());
+
             return { shapeProps: this._changedProps} ;
         },
 
@@ -681,7 +713,12 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
         textBeginSize:  'Begin Size',
         textEndStyle:   'End Style',
         textEndSize:    'End Size',
-        textWeightArrows: 'Weights & Arrows'
+        textWeightArrows: 'Weights & Arrows',
+        textAlt: 'Alternative Text',
+        textAltTitle: 'Title',
+        textAltDescription: 'Description',
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
+
 
     }, SSE.Views.ShapeSettingsAdvanced || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -882,6 +882,10 @@
   "SSE.Views.ChartSettingsDlg.textAutoEach": "Auto for Each",
   "SSE.Views.ChartSettingsDlg.textSameAll": "Same for All",
   "SSE.Views.ChartSettingsDlg.textTitleSparkline": "Sparkline - Advanced Settings",
+  "SSE.Views.ChartSettingsDlg.textAlt": "Alternative Text",
+  "SSE.Views.ChartSettingsDlg.textAltTitle": "Title",
+  "SSE.Views.ChartSettingsDlg.textAltDescription": "Description",
+  "SSE.Views.ChartSettingsDlg.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
   "SSE.Views.DigitalFilterDialog.cancelButtonText": "Cancel",
   "SSE.Views.DigitalFilterDialog.capAnd": "And",
   "SSE.Views.DigitalFilterDialog.capCondition1": "equals",
@@ -1357,6 +1361,10 @@
   "SSE.Views.ShapeSettingsAdvanced.textTop": "Top",
   "SSE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "SSE.Views.ShapeSettingsAdvanced.textWidth": "Width",
+  "SSE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
+  "SSE.Views.ShapeSettingsAdvanced.textAltTitle": "Title",
+  "SSE.Views.ShapeSettingsAdvanced.textAltDescription": "Description",
+  "SSE.Views.ShapeSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
   "SSE.Views.Statusbar.CopyDialog.itemCopyToEnd": "(Copy to end)",
   "SSE.Views.Statusbar.CopyDialog.itemMoveToEnd": "(Move to end)",
   "SSE.Views.Statusbar.CopyDialog.textCopyBefore": "Copy before sheet",

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -80,6 +80,20 @@
     .settings-hidden {
         display: none;
     }
+
+    textarea {
+        .user-select(text);
+        width: 100%;
+        resize: none;
+        margin-bottom: 5px;
+        border: 1px solid @gray-dark;
+        height: 100%;
+
+        &.disabled {
+            opacity: 0.65;
+            cursor: default !important;
+        }
+    }
 }
 
 .btn-edit-table,