fix(block, block-section): improve a11y #7557

jcfranco · 2023-08-22T00:06:22Z

Related Issue: #5565

Summary

Updated HTML to improve a11y.

Note: this removes references to outdated TEXT constants, which were used before translations were built-in.

driskull

Nice improvements! 🦾

geospatialem

Know this isn't part of the PR, but the messages are repeating the collapse/expand twice. Would it be possible to remove the toggleLabel? The aria-expanded should provide context, but it looks like context is provided in the title, which might be the duplication presented in AT. 😢

jcfranco · 2023-08-25T18:19:43Z

@geospatialem I made the following changes according to https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/:

removed aria-label since we have the same content as visible text
removed aria-expanded on the content area since it's only needed in the toggle button (changed container back to section)
ensured toggle button has button role and aria-expanded
associated the content with the toggle button w/ aria-labelledby
added aria-hidden to the switch since it is used as presentation (toggle button has all the relevant state)

Could you test again? 🙇‍♂️

geospatialem

A few small tweaks for a11y, and this should be good to go!

geospatialem · 2023-08-25T20:11:41Z

packages/calcite-components/src/components/block-section/block-section.tsx

-          hidden={!open}
-          id={regionId}
-        >
+        <section aria-labelledby={buttonId} class={CSS.content} hidden={!open} id={regionId}>


Not to the full context of the PR, but adding the following to the section provide additional context with JAWS when the section's content contains text and is expanded:

aria-live="polite" role="region"

Per our Teams convo, and Franco's sleuthing, section inherits a region role, so the role is not needed in addition to aria-live.

geospatialem · 2023-08-25T20:16:53Z

packages/calcite-components/src/components/block/block.tsx

          <button
            aria-controls={regionId}
            aria-expanded={collapsible ? toAriaBoolean(open) : null}
-            aria-label={toggleLabel}
            class={CSS.toggle}
            id={buttonId}
            onClick={this.onHeaderClick}


It seems the title attribute is conflicting with AT, but if we add an aria-describedby and an unique id using guid to the header, similar to the buttonId and regionId, we could provide both contexts.

Something like:

const headerId = `${guid}-header`; ... <header class={CSS.header} id={headerId}> ... <button ... aria-describedby={headerId} ... >

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-09-01) ### Features * **action-bar, action-pad, action-group:** Add label properties for group context ([#7415](#7415)) ([b34f36d](b34f36d)) * **combobox:** Add single-persist selection mode ([#7583](#7583)) ([dab06a3](dab06a3)) * **flow:** Add support for custom flow-item elements ([#7608](#7608)) ([197adfe](197adfe)) * **input-date-picker:** Normalize year to current century for user typed values only ([#7638](#7638)) ([a1db718](a1db718)) * **input-number:** Add integer property ([#7646](#7646)) ([cd66a6d](cd66a6d)) * **input-time-picker:** Support fractional seconds ([#7532](#7532)) ([c2bf34b](c2bf34b)) * **meter:** Add Meter component ([#7401](#7401)) ([47163ed](47163ed)) * **sheet:** Add Sheet component ([#7561](#7561)) ([f12a393](f12a393)) * **sheet:** Update default widths ([#7617](#7617)) ([47d2c0b](47d2c0b)) * **shell:** Add "Sheets" Slot ([#7579](#7579)) ([e798765](e798765)) * **table:** Add Table and related components ([#7607](#7607)) ([b067e72](b067e72)) ### Bug Fixes * **accordion, accordion-item:** Improve a11y ([#7560](#7560)) ([b5170b6](b5170b6)) * Add drag styles for improved UX ([#7644](#7644)) ([afbb764](afbb764)) * **block, block-section:** Improve a11y ([#7557](#7557)) ([1f44f6b](1f44f6b)) * **chip-group:** Add existence checks ([#7586](#7586)) ([5ca64f1](5ca64f1)) * **color-picker:** Update value when alphaChannel is toggled ([#7563](#7563)) ([1f753dd](1f753dd)) * **combobox:** Prevent deselecting items via keyboard in single-persist mode ([#7634](#7634)) ([4f5f8b0](4f5f8b0)) * **combobox:** Update combobox height to follow design spec ([#7558](#7558)) ([ec08845](ec08845)) * **date-picker:** Set start of week to monday in zh-CN ([#7578](#7578)) ([7e385cb](7e385cb)) * **dropdown:** Prevents navigating dropdown items with Tab key ([#7527](#7527)) ([3ea658d](3ea658d)) * Ensure label only focuses the first labelable child ([#7553](#7553)) ([426159c](426159c)) * **flow:** Catch error when beforeBack promise is rejected ([#7601](#7601)) ([cb70671](cb70671)) * **input-date-picker, input-time-picker:** Do not show dropdown affordance when read-only ([#7559](#7559)) ([5a3f19c](5a3f19c)) * **input, input-number:** Correctly sanitize numbers when pasting string with 'e' ([#7648](#7648)) ([b8bc11c](b8bc11c)) * **list, sortable-list, value-list:** Emit calciteListOrderChange when dragging between lists ([#7614](#7614)) ([4653581](4653581)) * **list:** Fixes dragging nested list items ([#7555](#7555)) ([c25f7b3](c25f7b3)) * **list:** Stop emitting calciteListChange when a list-item is disabled or closed. ([#7624](#7624)) ([7008463](7008463)) * **loader:** Tweak loading animations to work in Safari ([#7564](#7564)) ([2103654](2103654)) * **modal:** Catch error when beforeClose promise is rejected ([#7600](#7600)) ([70405d0](70405d0)) * **modal:** Handle removal of open attribute and prevent multiple beforeClose calls ([#7470](#7470)) ([f31588f](f31588f)) * **rating:** Adds focus outline on click ([#7341](#7341)) ([af30073](af30073)) * **segmented-control:** Refresh items when added dynamically ([#7567](#7567)) ([2e36eb3](2e36eb3)) * **split-button:** Update divider and borders to follow design spec ([#7568](#7568)) ([8df59ab](8df59ab)) * **tree-item:** Move focus outline to item label area ([#7581](#7581)) ([1327cef](1327cef)) * **tree-item:** Updates state when selection changes programmatically for `selection-mode='ancestors'` ([#7572](#7572)) ([40758c5](40758c5)) * **tree:** Improve keyboard navigation ([#7618](#7618)) ([826a5cb](826a5cb)) </details> <details><summary>@esri/calcite-components-react: 1.7.0</summary> ## [1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-09-01) ### Bug Fixes * Make sure components are defined in environments like in codesandbox ([#7632](#7632)) ([7005cce](7005cce)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.7.0-next.22 to ^1.7.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>

…-log-grouping * origin/main: chore: release main (#7571) chore: release next fix(block, block-section): improve a11y (#7557)

jcfranco · 2023-09-01T17:08:46Z

@geospatialem Belated update, I rolled back a few changes to where the AT interpretation was better and also restructured the block-section internals to avoid nested interactive elements.

I think you beat me to the 💥🥊 with #7652, but we can make further adjustments if needed.

* origin/main: (35 commits) ci: make sure to exit on maitenance milestone failure (#7656) chore: release next fix(block): provide textual name on collapse and expansion to AT (#7652) chore: release main (#7571) chore: release next fix(block, block-section): improve a11y (#7557) chore: release next fix: add drag styles for improved UX (#7644) fix(input, input-number): correctly sanitize numbers when pasting string with 'e' (#7648) chore: release next feat(flow): add support for custom flow-item elements (#7608) chore: release next fix(list, sortable-list, value-list): Emit calciteListOrderChange when dragging between lists (#7614) feat(input-number): add integer property (#7646) chore: release next fix(accordion, accordion-item): improve a11y (#7560) refactor(stepper, stepper-item): `getElementProp` is refactored out in favor of inheritable props set directly on parent (#7593) docs(contributing): update the commit message format example URL (#7641) chore: release next feat(input-date-picker): normalize year to current century for user typed values only (#7638) ...

fix(block, block-section): improve a11y

4743b7b

github-actions bot assigned jcfranco Aug 22, 2023

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Aug 22, 2023

fix tests

0b3fa53

jcfranco marked this pull request as ready for review August 23, 2023 00:21

jcfranco requested a review from a team as a code owner August 23, 2023 00:21

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 23, 2023

driskull approved these changes Aug 23, 2023

View reviewed changes

geospatialem reviewed Aug 23, 2023

View reviewed changes

jcfranco added 2 commits August 24, 2023 12:44

tweak based on accordion pattern

a2a460c

update tests

0257f52

geospatialem reviewed Aug 25, 2023

View reviewed changes

jcfranco added 2 commits August 25, 2023 15:22

tweak ARIA attributes

f9d524b

use guid for IDs to play nice with AT

e83d056

jcfranco mentioned this pull request Aug 29, 2023

Setting tabindex="-1" on calcite-button does not work #4970

Closed

revert guid usage and fix axe issues

394196c

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 1, 2023

jcfranco merged commit 1f44f6b into main Sep 1, 2023

jcfranco deleted the jcfranco/5565-improve-block-and-block-section-a11y branch September 1, 2023 04:25

github-actions bot added this to the 2023 September Priorities - Main release milestone Sep 1, 2023

calcite-admin mentioned this pull request Sep 1, 2023

chore: release main #7571

Merged

benelan added a commit that referenced this pull request Sep 1, 2023

Merge remote-tracking branch 'origin/main' into benelan/turbo-disable…

b4467da

…-log-grouping * origin/main: chore: release main (#7571) chore: release next fix(block, block-section): improve a11y (#7557)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(block, block-section): improve a11y #7557

fix(block, block-section): improve a11y #7557

jcfranco commented Aug 22, 2023 •

edited

Loading

driskull left a comment

geospatialem left a comment

jcfranco commented Aug 25, 2023

geospatialem left a comment

geospatialem Aug 25, 2023

geospatialem Aug 25, 2023

geospatialem Aug 25, 2023

jcfranco commented Sep 1, 2023

fix(block, block-section): improve a11y #7557

fix(block, block-section): improve a11y #7557

Conversation

jcfranco commented Aug 22, 2023 • edited Loading

Summary

driskull left a comment

Choose a reason for hiding this comment

geospatialem left a comment

Choose a reason for hiding this comment

jcfranco commented Aug 25, 2023

geospatialem left a comment

Choose a reason for hiding this comment

geospatialem Aug 25, 2023

Choose a reason for hiding this comment

geospatialem Aug 25, 2023

Choose a reason for hiding this comment

geospatialem Aug 25, 2023

Choose a reason for hiding this comment

jcfranco commented Sep 1, 2023

jcfranco commented Aug 22, 2023 •

edited

Loading