Skip to content

Commit

Permalink
fix(searchbar): showClearButton now defaults to 'always' for improved…
Browse files Browse the repository at this point in the history 
… usability with screen readers (#23475)

BREAKING CHANGE: The `showClearButton` property on `ion-searchbar` now defaults to `'always'`.
  • Loading branch information
@liamdebeasi
liamdebeasi authored Jun 21, 2021
1 parent ee3a00f commit 80f181d
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 6 deletions.
13 changes: 10 additions & 3 deletions BREAKING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion core/api.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/searchbar/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | `''` |
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/searchbar/searchbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 80f181d

Please sign in to comment.