Merge branch 'benelan/add-editorconfig' into benelan/run-prettier

* benelan/add-editorconfig: chore: configure prettier to add trailing commas chore: release next fix(input-date-picker): provides placeholder text context for AT users (#7320) chore: release next fix(dropdown-item): provides accessible label when href is not parsed (#7316) chore: add editorconfig
Esri · Jul 14, 2023 · 8cdb655 · 8cdb655
2 parents 2130c71 + b3c518e
commit 8cdb655
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 44 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,19 @@
+root = true
+
+[*]
+    charset = utf-8
+    insert_final_newline = true
+    end_of_line = lf
+    quote_type = double
+    indent_style = space
+    indent_size = 2
+    max_line_length = 120
+    curly_bracket_next_line = false
+    spaces_around_brackets = true
+    spaces_around_operators = true
+    indent_brace_style = K&R
+
+[*.tsx]
+    max_line_length = 100
+
+
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.21...@esri/calcite-components-react@1.5.0-next.22) (2023-07-14)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.5.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.20...@esri/calcite-components-react@1.5.0-next.21) (2023-07-14)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.5.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.5.0-next.19...@esri/calcite-components-react@1.5.0-next.20) (2023-07-12)
 
 **Note:** Version bump only for package @esri/calcite-components-react

diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.5.0-next.20",
+  "version": "1.5.0-next.22",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -18,7 +18,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.5.0-next.20"
+    "@esri/calcite-components": "^1.5.0-next.22"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.21...@esri/calcite-components@1.5.0-next.22) (2023-07-14)
+
+### Bug Fixes
+
+- **input-date-picker:** provides placeholder text context for AT users ([#7320](https://github.com/Esri/calcite-design-system/issues/7320)) ([31e0ba2](https://github.com/Esri/calcite-design-system/commit/31e0ba2c0e612e64130532203c5d73a7a0e37dc3)), closes [#5581](https://github.com/Esri/calcite-design-system/issues/5581)
+
+## [1.5.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.20...@esri/calcite-components@1.5.0-next.21) (2023-07-14)
+
+### Bug Fixes
+
+- **dropdown-item:** provides accessible label when href is not parsed ([#7316](https://github.com/Esri/calcite-design-system/issues/7316)) ([966b83d](https://github.com/Esri/calcite-design-system/commit/966b83d9514cdc284516909983b2c6ddf4e30286)), closes [#6921](https://github.com/Esri/calcite-design-system/issues/6921)
+
 ## [1.5.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.5.0-next.19...@esri/calcite-components@1.5.0-next.20) (2023-07-12)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.5.0-next.20",
+  "version": "1.5.0-next.22",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -128,10 +128,11 @@ export class DropdownItem implements LoadableComponent {
 
   render(): VNode {
     const scale = getElementProp(this.el, "scale", this.scale);
+    const { href, selectionMode, label, iconFlipRtl } = this;
     const iconStartEl = (
       <calcite-icon
         class={CSS.iconStart}
-        flipRtl={this.iconFlipRtl === "start" || this.iconFlipRtl === "both"}
+        flipRtl={iconFlipRtl === "start" || iconFlipRtl === "both"}
         icon={this.iconStart}
         scale={scale === "l" ? "m" : "s"}
       />
@@ -144,7 +145,7 @@ export class DropdownItem implements LoadableComponent {
     const iconEndEl = (
       <calcite-icon
         class={CSS.iconEnd}
-        flipRtl={this.iconFlipRtl === "end" || this.iconFlipRtl === "both"}
+        flipRtl={iconFlipRtl === "end" || iconFlipRtl === "both"}
         icon={this.iconEnd}
         scale={scale === "l" ? "m" : "s"}
       />
@@ -159,13 +160,13 @@ export class DropdownItem implements LoadableComponent {
         ? [contentNode, iconEndEl]
         : contentNode;
 
-    const contentEl = !this.href ? (
+    const contentEl = !href ? (
       slottedContent
     ) : (
       <a
-        aria-label={this.label}
+        aria-label={label}
         class={CSS.link}
-        href={this.href}
+        href={href}
         rel={this.rel}
         tabIndex={-1}
         target={this.target}
@@ -176,34 +177,34 @@ export class DropdownItem implements LoadableComponent {
       </a>
     );
 
-    const itemRole = this.href
+    const itemRole = href
       ? null
-      : this.selectionMode === "single"
+      : selectionMode === "single"
       ? "menuitemradio"
-      : this.selectionMode === "multiple"
+      : selectionMode === "multiple"
       ? "menuitemcheckbox"
       : "menuitem";
 
-    const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
+    const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
 
     return (
-      <Host aria-checked={itemAria} role={itemRole} tabindex="0">
+      <Host aria-checked={itemAria} aria-label={!href ? label : ""} role={itemRole} tabindex="0">
         <div
           class={{
             container: true,
-            [CSS.containerLink]: !!this.href,
+            [CSS.containerLink]: !!href,
             [CSS.containerSmall]: scale === "s",
             [CSS.containerMedium]: scale === "m",
             [CSS.containerLarge]: scale === "l",
-            [CSS.containerMulti]: this.selectionMode === "multiple",
-            [CSS.containerSingle]: this.selectionMode === "single",
-            [CSS.containerNone]: this.selectionMode === "none"
+            [CSS.containerMulti]: selectionMode === "multiple",
+            [CSS.containerSingle]: selectionMode === "single",
+            [CSS.containerNone]: selectionMode === "none"
           }}
         >
-          {this.selectionMode !== "none" ? (
+          {selectionMode !== "none" ? (
             <calcite-icon
               class={CSS.icon}
-              icon={this.selectionMode === "multiple" ? "check" : "bullet-point"}
+              icon={selectionMode === "multiple" ? "check" : "bullet-point"}
               scale={scale === "l" ? "m" : "s"}
             />
           ) : null}

diff --git a/...te-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages.json b/...te-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages.json
@@ -1,3 +1,4 @@
 {
-  "chooseDate": "Choose date"
+  "chooseDate": "Choose date",
+  "dateFormat": "Date Format:"
 }
diff --git a/...components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json b/...components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json
@@ -1,3 +1,4 @@
 {
-  "chooseDate": "Choose date"
+  "chooseDate": "Choose date",
+  "dateFormat": "Date Format:"
 }
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -153,3 +153,7 @@
 }
 
 @include hidden-form-input();
+
+.assistive-text {
+  @apply sr-only;
+}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -528,6 +528,7 @@ export class InputDatePicker
               <calcite-input
                 aria-autocomplete="none"
                 aria-controls={this.dialogId}
+                aria-describedby={this.placeholderTextId}
                 aria-expanded={toAriaBoolean(this.open)}
                 aria-haspopup="dialog"
                 class={`input ${
@@ -550,6 +551,9 @@ export class InputDatePicker
                 ref={this.setStartInput}
               />
               {this.renderToggleIcon(this.open && this.focusedInput === "start")}
+              <span aria-hidden="true" class={CSS.assistiveText} id={this.placeholderTextId}>
+                Date Format: {this.localeData?.placeholder}
+              </span>
             </div>
             <div
               aria-hidden={toAriaBoolean(!this.open)}
@@ -729,6 +733,8 @@ export class InputDatePicker
 
   private valueAsDateChangedExternally = false;
 
+  private placeholderTextId = `calcite-input-date-picker-placeholder-${guid()}`;
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods

diff --git a/packages/calcite-components/src/components/input-date-picker/resources.ts b/packages/calcite-components/src/components/input-date-picker/resources.ts
@@ -1,4 +1,5 @@
 export const CSS = {
+  assistiveText: "assistive-text",
   menu: "menu-container",
   menuActive: "menu-container--active",
   toggleIcon: "toggle-icon"