Skip to content

feat(modal): a11y support, tabbing in modal, close icon focus/keypress#2036

Merged
lubber-de merged 7 commits intofomantic:developfrom
lubber-de:modal/a11y
Aug 9, 2021
Merged

feat(modal): a11y support, tabbing in modal, close icon focus/keypress#2036
lubber-de merged 7 commits intofomantic:developfrom
lubber-de:modal/a11y

Conversation

@lubber-de
Copy link
Copy Markdown
Member

@lubber-de lubber-de commented Aug 6, 2021 •
edited
Loading

Description

This PR adds accessibility (a11y) support to the modal module

  • add proper aria attributes
  • make sure tabbing only takes place inside the modal and does not tab to fields hidden by the dimmer
  • make a close button a button and tabbable as well

I also separated the closeIcon from the previous close selector which was supposed to be able to also close the modal on each action button when the selector is enhanced.
Reason for separation of closeIcon is the new ability to trigger the closeicon by space or enter which is needed as accessibility requirement and was not possible before.

Attention

The aria attributes are only applied when modal is called dynamically via JS attributes (means without an already prepared modal DOM structure). When using existing Modal DOM nodes, adding proper aria attributes/labels is still the job of the developer as Modal is not adjusting existing DOM node attributes (for example an id has to be created for aria-labelledby).

However, the tabbing feature works independently of existing aria labels and was a general bug anyway.

Testcase

  • Try to tab through the modals fields / buttons
  • Try to focus the close icon and press space or enter
  • Use a screen reader or check developers tools tab "accessibility" on the generated modal dom node to look for aria labels

Before

  • Tabbing after last action button leads into tabbing something else of your browser or even OS
  • Tabbing before the first action button will focus the button behind the dimmer and after that your browser address bar and OS elements
  • The close icon cannot be focussed, thus trying to press space or enter is useless and has no effect
  • No aria attributes / labels, modal is not recognized in a screen reader properly
  • Icon only Button is not recognized by screen reader

https://jsfiddle.net/lubber/7tqo3xkm/15/

After

  • Tabbing only works inside the modal
  • Close icon can be focussed
  • Pressing space or enter when close icon is focussed will close the modal
  • A screen reader will recognize the icon only button as "mail" buttons
  • A screen reader (or developer tools, tab "accessibility" will recognize the modal with proper aria attributes/labels

https://jsfiddle.net/lubber/7tqo3xkm/14/

Screenshot

Before

aria_modal_wrong

After

aria_modal_right

Closes

Semantic-Org/Semantic-UI#5773
Semantic-Org/Semantic-UI#733
Semantic-Org/Semantic-UI#3668

Related

Semantic-Org/Semantic-UI#348
go-gitea/gitea#7057

@lubber-de lubber-de added type/feat Any feature requests or improvements lang/css Anything involving CSS lang/javascript Anything involving JavaScript state/awaiting-reviews Pull requests which are waiting for reviews tag/sui-issue Taken from an existing Issue/PR of SUI labels Aug 6, 2021
@lubber-de lubber-de added this to the 2.9.0 milestone Aug 6, 2021
This was referenced Aug 6, 2021
Open
Open
This was referenced Aug 7, 2021
Open
Closed
prudho
prudho approved these changes Aug 9, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@prudho prudho left a comment

Choose a reason for hiding this comment

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

Woah @lubber-de this is a great addition ! I'm not an expert in accessibility/aria support but from my perspective all looks good to me. Great job 👍

@lubber-de lubber-de changed the title [Modal] Accessibility / a11y / aria support, keep tabbing inside modal, support close icon focus/keypress feat(modal): a11y support, tabbing in modal, close icon focus/keypress Aug 9, 2021
@lubber-de lubber-de merged commit 2ecf719 into fomantic:develop Aug 9, 2021
@lubber-de lubber-de deleted the modal/a11y branch August 9, 2021 15:07
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Aug 9, 2021
@lubber-de lubber-de mentioned this pull request Oct 1, 2021
Merged
lubber-de added a commit that referenced this pull request Oct 3, 2021
@lubber-de
feat(toast): image variant, a11y support, title html, click support
3426127 
This PR

- adds accessibility support using aria labels to toasts just like we did for modals in #2036
- adds a ui image toast variant to show images without any padding
- fixes missing html support in titles
- fixes wrong placement of vertical actions when the message was too short
- supports the onClick handler in any case now even if closeOnClick is set to false
  - onClick can now also return false to prevent closing the toast
  - the close icon gets a dedicated event now independent of the onClick event
@lubber-de lubber-de mentioned this pull request Oct 2, 2022
Merged
@mvorisek mvorisek mentioned this pull request Oct 2, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@prudho prudho prudho approved these changes

@exoego exoego Awaiting requested review from exoego

@ko2in ko2in Awaiting requested review from ko2in

@ColinFrick ColinFrick Awaiting requested review from ColinFrick

@y0hami y0hami Awaiting requested review from y0hami

Assignees

No one assigned

Labels

lang/css Anything involving CSS lang/javascript Anything involving JavaScript tag/sui-issue Taken from an existing Issue/PR of SUI type/feat Any feature requests or improvements

Projects

None yet

Milestone

2.9.0

Development

Successfully merging this pull request may close these issues.

2 participants

@lubber-de @prudho