From 80f181d4846507ee6bd4150bb568fca9b6660428 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 21 Jun 2021 13:12:02 -0400 Subject: [PATCH] fix(searchbar): showClearButton now defaults to 'always' for improved usability with screen readers (#23475) BREAKING CHANGE: The `showClearButton` property on `ion-searchbar` now defaults to `'always'`. --- BREAKING.md | 13 ++++++++++--- core/api.txt | 2 +- core/src/components/searchbar/readme.md | 2 +- core/src/components/searchbar/searchbar.tsx | 2 +- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index df8678cc7e..187e15f13c 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -17,6 +17,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver * [Header](#header) * [Modal](#modal) * [Popover](#popover) + * [Searchbar](#searchbar) * [Tab Bar](#tab-bar) * [Toast](#toast) * [Toolbar](#toolbar) @@ -84,17 +85,23 @@ ion-header.header-collapse-condense ion-toolbar:last-of-type { } ``` +#### Modal + +Converted `ion-modal` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). + +If you were targeting the internals of `ion-modal` in your CSS, you will need to target the `backdrop` or `content` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables. + #### Popover Converted `ion-popover` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). If you were targeting the internals of `ion-popover` in your CSS, you will need to target the `backdrop`, `arrow`, or `content` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables. -#### Modal +#### Searchbar -Converted `ion-modal` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). +The `showClearButton` property now defaults to `'always'` for improved usability with screen readers. -If you were targeting the internals of `ion-modal` in your CSS, you will need to target the `backdrop` or `content` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables. +To get the old behavior, set `showClearButton` to `'focus'`. #### Tab Bar diff --git a/core/api.txt b/core/api.txt index dbccf1ee06..48416dd175 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1062,7 +1062,7 @@ ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false -ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'focus',false,false +ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false ion-searchbar,prop,spellcheck,boolean,false,false,false ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false ion-searchbar,prop,value,null | string | undefined,'',false,false diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 8b1bbfcb2b..b47bc35161 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -328,7 +328,7 @@ export default defineComponent({ | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode. | `string \| undefined` | `undefined` | | `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` | -| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'focus'` | +| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'always'` | | `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | | `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 6b27ba28be..8e1b131a73 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -129,7 +129,7 @@ export class Searchbar implements ComponentInterface { * Setting to `"always"` shows the clear button regardless * of focus state, but only if the input is not empty. */ - @Prop() showClearButton: 'never' | 'focus' | 'always' = 'focus'; + @Prop() showClearButton: 'never' | 'focus' | 'always' = 'always'; /** * If `true`, enable spellcheck on the input.