Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(card): provide more meaningful screen reader label for selectable cards (deprecates deselect message override) #6657

Merged
merged 4 commits into from
Mar 24, 2023
Merged

fix(card): provide more meaningful screen reader label for selectable cards (deprecates deselect message override) #6657

merged 4 commits into from
Mar 24, 2023

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Mar 24, 2023 •
edited
Loading

Related Issue: #5585

Summary

Changes the text used for the card's checkbox to provide correct state information. Before, screen readers would read "Select, unchecked, checkbox"/ "Deselect, checked, checkbox". This text should now be more meaningful: "Selectable card, checked, checkbox"/ "Selectable card, unchecked, checkbox".

Notes

  • The suggested fix from the audit included an identifier for the card and using the card's title/subtitle was considered, but not used as we can't reliably use it since neither are technically required.
  • This reuses the select message and deprecates deselect. This is not considered a breaking change as any existing text overrides from select will still be used and provide applicable context and any provided deselect will end up being ignored.

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Mar 24, 2023
@jcfranco jcfranco marked this pull request as ready for review March 24, 2023 19:34
@jcfranco jcfranco requested a review from a team as a code owner March 24, 2023 19:34
@jcfranco jcfranco requested a review from anveshmekala March 24, 2023 19:34
@jcfranco
Copy link
Member Author

@geospatialem Any ideas for automated testing here? Not sure if asserting on the rendered string is of value or not as this change is more about the interpretation of the text. LMK what you think.

driskull
driskull approved these changes Mar 24, 2023
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Looks good.

We might want to check other places we use aria-checked and make sure they represent the item description and not the action.

@geospatialem
Copy link
Member

@geospatialem Any ideas for automated testing here? Not sure if asserting on the rendered string is of value or not as this change is more about the interpretation of the text. LMK what you think.

@jcfranco I don't think we could run automated testing in this case since it would have technically passed prior to this fix through automation.

@jcfranco
Copy link
Member Author

We might want to check other places we use aria-checked and make sure they represent the item description and not the action.

@geospatialem Do you think our a11y audit caught all of these?

@geospatialem
Copy link
Member

@geospatialem Do you think our a11y audit caught all of these?

It looks like there was only one other instance across components, which was in stepper/stepper-item with #5602.

@jcfranco We have it slotted for the July release, but perhaps we could add it in the current one if its fix is similar?

@jcfranco
Copy link
Member Author

perhaps we could add it in the current one if its fix is similar?

Let's keep it where it is and we can move it to an earlier milestone if our backlog allows.

@jcfranco jcfranco changed the title fix(card): provide more meaningful screen reader label for selectable cards fix(card): provide more meaningful screen reader label for selectable cards (deprecates deselect message override) Mar 24, 2023
@jcfranco jcfranco merged commit 8ee37d2 into master Mar 24, 2023
@jcfranco jcfranco deleted the jcfranco/5585-add-selectable-state-info-to-card branch March 24, 2023 23:13
@jcfranco jcfranco mentioned this pull request Mar 24, 2023
Closed
benelan added a commit that referenced this pull request Mar 27, 2023
@benelan
Merge remote-tracking branch 'origin/master' into benelan/revert-setf…
403b62d 
…ocus-revert

* origin/master: (30 commits)
  fix(modal): prevent error when calling setFocus on a recently rendered and opened modal (`dist-custom-elements`) (#6666)
  fix(tile-select): fix click not firing in custom-elements build (#6665)
  fix(card): provide more meaningful screen reader label for selectable cards (deprecates `deselect` message override) (#6657)
  fix(pagination): add current page information for screen readers (#6637)
  chore: update jsbin sample to CC 1.0 breaking changes and latest jsapi version (#6651)
  feat(text-area): add calcite-text-area component (#5644)
  chore(release): 1.1.1-next.2
  fix(tile): adds styling to `tile` where `link` is present for additional distinction (#6628)
  docs(input, input-number, input-text): api consistency across components (#6634)
  docs(accordion-item): add actions-start and actions-end slots (#6631)
  docs(modal): kebab-case slot names and sticky context (#6625)
  chore(release): 1.1.1-next.1
  fix: restore form control validation in Safari (#6623)
  chore(linting): fix linting errors (#6613)
  build(deps): Bump eslint-plugin-react from 7.31.11 to 7.32.2 (#6619)
  build(deps): Bump eslint from 8.35.0 to 8.36.0 (#6620)
  build(deps): Bump @types/lodash-es from 4.17.6 to 4.17.7 (#6621)
  build: fix peer dependency resolution error (#6611)
  ci: update user-defined priority (#6609)
  build: update browserslist db (#6527)
  ...
jcfranco added a commit that referenced this pull request Oct 31, 2023
@jcfranco
refactor(card)!: remove deprecated deselected message
45118ad 
BREAKING CHANGE: #6657 deprecated the deselect message property and is not being rendered.
@jcfranco jcfranco mentioned this pull request Oct 31, 2023
Merged
jcfranco added a commit that referenced this pull request Nov 6, 2023
@jcfranco
refactor(card)!: remove deprecated deselected message (#8099)
25734c6 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Nov 14, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
e6e80d2 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Nov 16, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
b77e7ca 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
@calcite-admin calcite-admin mentioned this pull request Nov 16, 2023
Merged
DitwanP pushed a commit that referenced this pull request Nov 16, 2023
@jcfranco @DitwanP
refactor(card)!: remove deprecated deselected message (#8099)
8614434 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Nov 16, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
a9a1291 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Nov 23, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
80846d8 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Nov 29, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
fd59e57 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Dec 1, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
a232717 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Dec 1, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
80a0c7b 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
benelan pushed a commit that referenced this pull request Dec 2, 2023
@jcfranco @benelan
refactor(card)!: remove deprecated deselected message (#8099)
1bab172 
**Related Issue:** #6660

## Summary

BREAKING CHANGE: Removed the `deselect` message property – this property
was deprecated in #6657 as it is no longer being rendered.
@calcite-admin calcite-admin mentioned this pull request Dec 2, 2023
Merged
benelan added a commit that referenced this pull request Dec 2, 2023
@calcite-admin @github-actions
@benelan @alisonailea @jcfranco
chore: release main (#8246)
d6adf55 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.1.0...@esri/calcite-design-tokens@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- Change the default export to a tree-shakable list of design tokens in
camelCase format rather than a JSON object (`import * as tokens from
"@esri/calcite-design-tokens";`)
- Use font name in core font family tokens
- Remove unnecessary core tokens line-height, font-size, letter-spacing,
paragraph-spacing as these can be exclusive to semantic and reference
core size tokens
- Core size tokens now use their pixel size in their name
- Change `border-radius` to `corner-radius`
- Remove unnecessary `border-width` tokens `none`, `sm`, `md`, `lg`
- Platform output
  - Remove component tokens from global output
  - Add new platform output
    - css
      - index
      - global
      - light
      - dark
      - core
      - breakpoint
      - typography classes
    - scss
      - index
      - global
      - light
      - dark
      - core
      - breakpoints
      - typography mixins
  - Replace "headless" with "global"
  - Remove "calcite" from filenames
- Package.json exports

- `@esri/calcite-design-tokens/css/headless` is now
`@esri/calcite-design-tokens/css/global`
- `@esri/calcite-design-tokens/scss/headless` is now
`@esri/calcite-design-tokens/scss/global`
- `@esri/calcite-design-tokens/js/headless` is now
`@esri/calcite-design-tokens/js/global`
- `@esri/calcite-design-tokens/es6/headless` is now
`@esri/calcite-design-tokens/es6/global`

- Token paths and values
  - Border
    - Use t-shirt sizing for border width tokens
- `Border.border-width.0` is now `border.width.none`
(--calcite-border-width-none)
- `border.border-width.1` is now `border.width.sm`
(--calcite-border-width-sm)
- `border.border-width.2` is now `border.width.md`
(--calcite-border-width-md)
- `border.border-width.3` is now `border.width.lg`
(--calcite-border-width-lg)
      - `border.border-width.4` is removed
    - Remove unused border radius tokens
      - `Core.border.border-radius.0`
      - `Core.border.border-radius.2`
      - `Core.border.border-radius.3`
- Use t-shirt sizing for border radius (now called corner radius) tokens
- `semantic.ui.border.border-radius` is `semantic.corner.radius.default`
- `Core.border.border-radius.1` is now `semantic.corner.radius.sharp`
- `Core.border.border-radius.4` is now `semantic.corner.radius.round`
- `Core.border.border-radius.5` is now `semantic.corner.radius.pill`
  - Sizing
    - `core.sizing.` tokens are now `core.size.default`
  - Breakpoints
- Move breakpoint tokens to their own separate output file for most
platform outputs (except JS)
- Update breakpoint token path from `.breakpoint.` to `.container-size.`
    - Delete unused `breakpoint.cols` tokens
  - Box Shadow
    - Use t-shirt sizing for global box shadow tokens
      - `box-shadow.0` is now `shadow.none`
      - `box-shadow.1` is now `shadow.sm`
      - `box-shadow.2` is now `shadow.md`
  - Colors
    - Remove "palette" from core color paths
- `core.color.palette.high-saturation` is now
`core.color.high-saturation`
  - Light Mode and Dark Mode
- Semantic color tokens now use the composite color scheme token type to
reference "light" and "dark" mode instead of having separate light and
dark tokens.
- `.calcite-mode-light` and `.calcite-mode-dark` classes as well as the
color scheme media queries are now provided via
`calcite-design-tokens/css/index.css`
- Provide light and dark mode mixins via
`calcite-design-tokens/css/index.scss`
    - Remove "ui" from output platform names in favor of "color"
    - `--calcite-ui-background` is now `--calcite-color-background`
    - `--calcite-ui-brand` is now `--calcite-color-brand`
    - `--calcite-ui-success` is now `--calcite-color-status-success`
    - `--calcite-ui-danger` is now `--calcite-color-status-danger`
    - `--calcite-ui-warning` is now `--calcite-color-status-warning`
    - `--calcite-ui-hint` is now `--calcite-color-status-hint`
- `--calcite-button-transparent-hover` is now
`--calcite-color-transparent-press`

### Features

- Add json to design token output
([#8290](#8290))
([753061f](753061f))
- Reduce global design tokens in calcite.css
([#8215](#8215))
([335d010](335d010))
- Update default main file output for design tokens
([#8299](#8299))
([4050a91](4050a91))
- Update json shape for docs
([#8308](#8308))
([6fac3e9](6fac3e9))

### Bug Fixes

- Align tokens with figma variables
([#8311](#8311))
([8d7cf3f](8d7cf3f))

</details>

<details><summary>@esri/eslint-plugin-calcite-components:
1.0.0</summary>

##
[1.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.3...@esri/eslint-plugin-calcite-components@1.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

</details>

<details><summary>@esri/calcite-components: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.11.0...@esri/calcite-components@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __tokens:__ Changes to `@esri/calcite-design-tokens`, including the
names of CSS variables used to customize component styling. See the
[breaking changes
section](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-design-tokens/CHANGELOG.md#200-2023-12-02)
of the `@esri/calcite-design-tokens` changelog.
([#8311](#8311))
([8d7cf3f](8d7cf3f)),
([#8299](#8299))
([4050a91](4050a91)),
([#8215](#8215))
([335d010](335d010))
- __button, list, pick-list, value-list:__ Setting `loading` prop to
true no longer prevents interaction nor applies disabled styles. If
you'd like to block interaction when loading, please set `disabled`
along with `loading`.
([#8292](#8292))
([db3c5c7](db3c5c7))
- __dropdown:__ Dropdown's default `display` was changed from
`inline-flex` to `inline-block` to make it easier to prompt truncation
in trigger button text with minimal impact to layout (by setting an
explicit width __or__ setting `width: 100%` or `display: block` on the
dropdown of a width-constrained parent).
([#8253](#8253))
([7c96e9f](7c96e9f))
- __dropdown, modal:__ For consistency, renames the `width` property to
`widthScale`.
([#8251](#8251))
([ab12968](ab12968)),
([#8252](#8252))
([6b09245](6b09245))
- __react:__ Disabled `includeImportCustomElements`. Make sure to import
components from `@esri/calcite-components` in addition to the React
wrappers. For example, the first code snippet in
[#7185](#7185) is
now required, or else the custom elements will not be defined in the
browser.
([#8248](#8248))
([0948c1a](0948c1a))
- __i18n:__ Reduced numbering system support to `latn`, `arab` and
`arabext`. The following numbering systems were removed: `bali`, `beng`,
`deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`, `knda`, `laoo`,
`limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`, `telu`, `thai`,
`tibt`.
([#8217](#8217))
([9946ac1](9946ac1))
- __stepper-item:__ Removed both `previousStep` and `nextStep` message
properties. These are no longer overrideable via `messageOverrides`.
([#8234](#8234))
([331aafb](331aafb))
- __card:__ Removed the `deselect` message property – this property was
deprecated in
[#6657](#6657) as it
is no longer being rendered. This is no longer overrideable via
`messageOverrides`.
([#8099](#8099))
([1bab172](1bab172))
- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.
([#8108](#8108))
([bcbb79f](bcbb79f))

### Features

- __action-menu:__ Set max height of the action menu
([#8275](#8275))
([ca1be28](ca1be28))
- __action-menu:__ Support action-groups
([#8273](#8273))
([c07144f](c07144f))
- __combobox, checkbox, input-time-zone, select, text-area:__ Add
`status` property
([#8304](#8304))
([a44e9fe](a44e9fe))
- __handle:__ Add disabled property
([#8283](#8283))
([7aeecd5](7aeecd5))
- __list-item:__ Add dragDisabled property
([#8285](#8285))
([f091f26](f091f26))
- __list:__ Support multiple selection using the shift key
([#8301](#8301))
([79538be](79538be))
- Reduce global design tokens in calcite.css
([#8215](#8215))
([335d010](335d010))
- __stepper:__ Enable responsive layout
([#7744](#7744))
([556b8bc](556b8bc))

### Bug Fixes

- Align tokens with figma variables
([#8311](#8311))
([8d7cf3f](8d7cf3f))
- __button, list, pick-list, value-list:__ Prevent loading prop from
affecting interactivity
([#8292](#8292))
([db3c5c7](db3c5c7))
- __button:__ Sets aria-disabled instead of disabled on internal anchor
element
([#8270](#8270))
([0926eb6](0926eb6))
- __color-picker, popover, shell-panel, slider, tooltip:__ Register
events on the window instead of the document
([#8247](#8247))
([2aaf592](2aaf592))
- __combobox, dropdown, input-date-picker, popover, tooltip:__ Fix
positioning of component when component is moved
([#8296](#8296))
([2b2506d](2b2506d))
- Dragging floating ui components
([#8230](#8230))
([5a81f6c](5a81f6c))
- __dropdown:__ Change display to inline-block to ease truncation setup
([#8253](#8253))
([7c96e9f](7c96e9f))
- __dropdown:__ Restore trigger container height
([51d1ea8](51d1ea8))
- __input-time-zone:__ Update time zone items when item-dependent props
change
([#8271](#8271))
([f77532e](f77532e))
- __input:__ Prevents mutating value on `blur` when `type="number"`
([#8245](#8245))
([58ededd](58ededd))
- __label:__ Associate label to component when `for` prop is set after
initialization
([#8309](#8309))
([e81b650](e81b650))
- __list-item:__ Adds border between grouped and ungrouped list-items
([#8134](#8134))
([ae9b083](ae9b083))
- __list-item:__ Adds border between last item in a group and slotted
item
([#8262](#8262))
([9b5cf76](9b5cf76))
- __list-item:__ An item with an empty slotted list should be openable.
([#8240](#8240))
([d615b39](d615b39))
- __list-item:__ Focus on the first focusable element within the
component when using arrow keys
([#8291](#8291))
([b902365](b902365))
- __list-item:__ Reserve space for empty open lists.
([#8239](#8239))
([484a5aa](484a5aa))
- __list:__ Add live region for dynamically changing list items
([#8148](#8148))
([e3c0c06](e3c0c06))
- __react:__ Disable includeImportCustomElements to resolve initial
render issues
([#8248](#8248))
([0948c1a](0948c1a))
- __stepper:__ Typo in CSS variable for step bar's fill
([#8255](#8255))
([2e643aa](2e643aa))

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

### Code Refactoring

- __card:__ Remove deprecated `deselected` message
([#8099](#8099))
([1bab172](1bab172))
- __dropdown:__ Rename `width` property to `widthScale`
([#8251](#8251))
([ab12968](ab12968))
- __i18n:__ Reduce list of supported numbering systems to `latn`,
`arab`, and `arabext`
([#8217](#8217))
([9946ac1](9946ac1))
- __modal:__ Rename `width` property to `widthScale`
([#8252](#8252))
([6b09245](6b09245))
- __stepper-item:__ No longer supports previousStep and nextStep
messages
([#8234](#8234))
([331aafb](331aafb))

### Dependencies

- The following workspace dependencies were updated
  - devDependencies
    - @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0
- @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to
1.0.0

</details>

<details><summary>@esri/calcite-components-angular: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.11.0...@esri/calcite-components-angular@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

### Dependencies

- The following workspace dependencies were updated
  - dependencies
    - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0

</details>

<details><summary>@esri/calcite-components-react: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.11.0...@esri/calcite-components-react@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __react:__ Disabled `includeImportCustomElements`. Make sure to import
components from `@esri/calcite-components` in addition to the React
wrappers. For example, the first code snippet in
[#7185](#7185) is
now required, or else the custom elements will not be defined in the
browser.
- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

### Bug Fixes

- __react:__ Disable includeImportCustomElements to resolve initial
render issues
([#8248](#8248))
([0948c1a](0948c1a))

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

### Dependencies

- The following workspace dependencies were updated
  - dependencies
    - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0

</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
Co-authored-by: Ali Stump <astump@esri.com>
Co-authored-by: JC Franco <jfranco@esri.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull approved these changes

@anveshmekala anveshmekala Awaiting requested review from anveshmekala

Assignees

@jcfranco jcfranco

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug.
Projects
None yet
Milestone
2023 March Priorities - No breaking c...
Development

Successfully merging this pull request may close these issues.
3 participants
@jcfranco @geospatialem @driskull