javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(searchbar): showClearButton now defaults to 'always' for improved usability with screen readers (#23475)

Browse Source 
BREAKING CHANGE: The `showClearButton` property on `ion-searchbar` now defaults to `'always'`.
This commit is contained in:
Liam DeBeasi
2021-06-21 13:12:02 -04:00
committed by GitHub
parent ee3a00fde6
commit 80f181d484
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
BREAKING.md
View File

@@ -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

2
core/api.txt
View File

@@ -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

2
core/src/components/searchbar/readme.md
View File

@@ -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 `<Ionic>` would become `&lt;Ionic&gt;` 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` | `''` |

2
core/src/components/searchbar/searchbar.tsx
View File

@@ -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.