feat: AccessibleLabel & AllowFocus attributes

fix: show warning icon correctly
scottdurow · Jan 20, 2023 · e9209e9 · e9209e9
1 parent 42e6430
commit e9209e9
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 8 deletions.
diff --git a/code-component/PowerDragDrop/ControlManifest.Input.xml b/code-component/PowerDragDrop/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
-  <control namespace="CustomControl" constructor="PowerDragDrop" version="1.0.23" display-name-key="PowerDragDrop" description-key="PowerDragDrop_Desc" control-type="standard">
+  <control namespace="CustomControl" constructor="PowerDragDrop" version="1.0.27" display-name-key="PowerDragDrop" description-key="PowerDragDrop_Desc" control-type="standard">
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.-->
     <external-service-usage enabled="false"></external-service-usage>
     <property name="DropZoneID" description-key="DropZoneID_Desc" display-name-key="DropZoneID" required="true" usage="input" of-type="SingleLine.Text"/>
@@ -44,6 +44,8 @@
     </property>
     <property name="Wrap" description-key="Wrap_Desc" display-name-key="Wrap" required="false" usage="bound" of-type="TwoOptions" default-value="false"/>
     <property name="Scroll" description-key="Scroll_Desc" display-name-key="Scroll" required="true" usage="bound" of-type="TwoOptions" default-value="true"/>
+    <property name="AccessibleLabel" description-key="AccessibleLabel_Desc" display-name-key="AccessibleLabel" usage="bound" of-type="SingleLine.Text" />
+    <property name="AllowFocus" description-key="AllowFocus_Desc" display-name-key="AllowFocus" usage="bound" of-type="TwoOptions" />
     <property name="DelaySelect" description-key="DelaySelect_Desc" display-name-key="DelaySelect" of-type="Enum" usage="bound" required="false" default-value="0">
       <value name="No" display-name-key="No">0</value>
       <value name="Yes" display-name-key="Yes">1</value>

diff --git a/code-component/PowerDragDrop/ItemRenderer.ts b/code-component/PowerDragDrop/ItemRenderer.ts
@@ -174,6 +174,7 @@ export class ItemRenderer {
         return context.parameters.items.columns.filter((c) => c.order !== -1);
     }
 
+    // eslint-disable-next-line sonarjs/cognitive-complexity
     private updateContainerStyles(parameters: IInputs) {
         const mainContainer = this.mainContainer;
         const listContainer = this.listContainer;
@@ -203,7 +204,21 @@ export class ItemRenderer {
             mainContainer.style.borderRadius = parameters.BorderRadius.raw + 'px';
         }
         if (parameters.Scroll?.raw !== null) {
-            listContainer.style.overflow = parameters.Scroll?.raw ? 'auto' : 'hidden';
+            const direction = parameters.Direction?.raw;
+            const scroll = parameters.Scroll.raw === true;
+            const wrap = parameters.Wrap?.raw === true;
+            listContainer.style.overflowX =
+                scroll && (direction !== DirectionEnum.Vertical || wrap) ? 'auto' : 'hidden';
+            listContainer.style.overflowY =
+                scroll && (direction !== DirectionEnum.Horizontal || wrap) ? 'auto' : 'hidden';
+        }
+
+        if (parameters.AccessibleLabel?.raw !== null) {
+            listContainer.ariaLabel = parameters.AccessibleLabel.raw;
+        }
+
+        if (parameters.AllowFocus?.raw !== null) {
+            listContainer.tabIndex = parameters.AllowFocus.raw ? 0 : -1;
         }
     }
 
@@ -297,8 +312,11 @@ export class ItemRenderer {
 
     private createMessageElement(messageHtml: string): HTMLElement {
         const element = document.createElement('div');
-        element.className = CSS_STYLE_CLASSES.Warning;
-        element.innerHTML = `<span class="${CSS_STYLE_CLASSES}"></span><span>${messageHtml}</span>`;
+        element.className = CSS_STYLE_CLASSES.WarningContainer;
+        element.innerHTML = `
+            <div class=${CSS_STYLE_CLASSES.Warning}>
+                <span class="${CSS_STYLE_CLASSES.WarningIcon}"></span><span>${messageHtml}</span>
+            </div>`;
         return element;
     }
 }
diff --git a/code-component/PowerDragDrop/ManifestConstants.ts b/code-component/PowerDragDrop/ManifestConstants.ts
@@ -33,6 +33,8 @@ export enum ManifestConstants {
     ItemGap = 'ItemGap',
     Direction = 'Direction',
     Wrap = 'Wrap',
+    AccessibleLabel = 'AccessibleLabel',
+    AllowFocus = 'AllowFocus',
 }
 
 export enum InputEvents {
@@ -64,12 +66,16 @@ export const RENDER_TRIGGER_PROPERTIES: string[] = [
     ManifestConstants.Scroll,
     ManifestConstants.Direction,
     ManifestConstants.Wrap,
+    ManifestConstants.AccessibleLabel,
+    ManifestConstants.AllowFocus,
+    ManifestConstants.DelaySelect,
 ];
 
 export const ZONE_REGISTRATION_PROPERTIES: string[] = [
     ManifestConstants.IsMasterZone,
     ManifestConstants.DropZoneID,
     ManifestConstants.OtherDropZoneIDs,
+    ManifestConstants.DelaySelect,
 ];
 
 export const ZONE_OPTIONS_PROPERTIES: string[] = [

diff --git a/code-component/PowerDragDrop/Styles.ts b/code-component/PowerDragDrop/Styles.ts
@@ -21,6 +21,7 @@ export enum CSS_STYLE_CLASSES {
     ItemValue = 'powerdnd-item-value',
     ActionClassPrefix = 'action-',
     Chosen = 'powerdnd-chosen',
+    WarningContainer = 'powerdnd-warning-container',
     Warning = 'powerdnd-warning',
     WarningIcon = 'powerdnd-warning-icon',
 }
diff --git a/code-component/PowerDragDrop/__mocks__/mock-parameters.ts b/code-component/PowerDragDrop/__mocks__/mock-parameters.ts
@@ -62,5 +62,7 @@ export function getMockParameters(): IInputs {
         Trace: new MockTwoOptionsProperty(false),
         ItemSchema: new MockStringProperty(''),
         items: items,
+        AccessibleLabel: new MockStringProperty(''),
+        AllowFocus: new MockTwoOptionsProperty(false),
     };
 }
diff --git a/code-component/PowerDragDrop/__tests__/ItemRenderer.test.tsx b/code-component/PowerDragDrop/__tests__/ItemRenderer.test.tsx
@@ -21,7 +21,8 @@ describe('ItemRenderer', () => {
               <ul
                 class="powerdnd-list"
                 data-render-version="1"
-                style="overflow: hidden;"
+                style="overflow-x: hidden; overflow-y: hidden;"
+                tabindex="-1"
               />
             </div>
         `);
@@ -44,7 +45,8 @@ describe('ItemRenderer', () => {
               <ul
                 class="powerdnd-list"
                 data-render-version="1"
-                style="overflow: hidden; flex-direction: row; flex-wrap: nowrap; display: flex;"
+                style="overflow-x: hidden; overflow-y: hidden; flex-direction: row; flex-wrap: nowrap; display: flex;"
+                tabindex="-1"
               />
             </div>
         `);
@@ -62,7 +64,8 @@ describe('ItemRenderer', () => {
               <ul
                 class="powerdnd-list"
                 data-render-version="1"
-                style="overflow: hidden; flex-direction: row; flex-wrap: wrap; display: flex;"
+                style="overflow-x: hidden; overflow-y: hidden; flex-direction: row; flex-wrap: wrap; display: flex;"
+                tabindex="-1"
               />
             </div>
         `);
@@ -82,7 +85,8 @@ describe('ItemRenderer', () => {
               <ul
                 class="powerdnd-list"
                 data-render-version="1"
-                style="overflow: hidden; flex-direction: row; flex-wrap: wrap; display: flex;"
+                style="overflow-x: hidden; overflow-y: hidden; flex-direction: row; flex-wrap: wrap; display: flex;"
+                tabindex="-1"
               />
             </div>
         `);

diff --git a/code-component/PowerDragDrop/css/PowerDragDrop.css b/code-component/PowerDragDrop/css/PowerDragDrop.css
@@ -1,5 +1,6 @@
 .powerdnd-main-container {
   border-style: solid;
+  border-color: transparent;
   box-sizing: border-box;
 }
 
@@ -57,6 +58,13 @@ li.powerdnd-item {
   transform: rotate(-15deg);
 }
 
+.powerdnd-warning-container {
+  border-color: rgb(0,0,0,0.8);
+  border-width: 2px;
+  border-style: solid;
+  height: 100%;
+}
+
 .powerdnd-warning {
   display: flex;
   column-gap: 16px;

diff --git a/code-component/PowerDragDrop/strings/PowerDragDrop.1033.resx b/code-component/PowerDragDrop/strings/PowerDragDrop.1033.resx
@@ -303,4 +303,16 @@
   <data name="Wrap_Desc" xml:space="preserve">
     <value>Control wrapping of the items in the list</value>
   </data>
+  <data name="AccessibleLabel" xml:space="preserve">
+    <value>Accessible Label</value>
+  </data>
+  <data name="AccessibleLabel_Desc" xml:space="preserve">
+    <value>Screen reader aria label</value>
+  </data>
+  <data name="AllowFocus" xml:space="preserve">
+    <value>Allow Focus</value>
+  </data>
+  <data name="AllowFocus_Desc" xml:space="preserve">
+    <value>Can the drag drop area accept focus using tab. Screen readers will announce the name of the area and the number of items.</value>
+  </data>
 </root>