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

Improvements to grid accessibility #6804

Merged
merged 11 commits into from
Jan 16, 2020
Merged

Improvements to grid accessibility #6804

merged 11 commits into from
Jan 16, 2020

Conversation

MMasey
Copy link
Contributor

@MMasey MMasey commented Oct 21, 2019 •
edited
Loading

Description

This PR fixes the following accessibility issues

  • 32 & 60 - "+" icon is identified as "link" - screen readers
  • 46 & 54 - Once new row has been added to page grid, unable to navigate to using keyboard

It also fixed an issue with the ItemPickerOverlay where tab-order was being added to the list items because the items we using anchor tags rather than button element.

Steps to test

  1. Using the starter them navigate to a doctype making use of the grid property editor e.g. the Home page
  2. Tab through the grid options until to reach the Add new row button (+)
  3. You should be able to tab to it
  4. You should be able to use the keyboard to tab through and select a row type.
  5. When you hit enter, it should automatically focus on the newly created row.

Bonus

  1. When using the keyboard to navigating through the ItemPicker, it should only take on hit of the tab key to go through each of the options.

Demo gif

grid-accessibility-improvements

@MMasey MMasey mentioned this pull request Oct 21, 2019
Closed
@poornimanayar
Copy link
Contributor

Hi @MMasey ,

Thank you for this. I spotted this the other day while I was tweaking around. Well done for getting this fixed 👍

Regards,
Poornima

@nul800sebastiaan
Merge branch 'v8/dev' into pr/6804
c4adde9 
# Conflicts:
#	src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@nul800sebastiaan
Merge branch 'v8/dev' into pr/6804
75550f0 
# Conflicts:
#	src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@poornimanayar
Copy link
Contributor

Works as advertised! Happy to approve @MMasey 👍

@emmaburstow
Merge branch 'v8/contrib' into pr/6084
bb29bd4 
# Conflicts:
#	src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
#	src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editors.html
@emmaburstow emmaburstow changed the base branch from v8/dev to v8/contrib January 16, 2020 09:32
@emmaburstow
Merge branch 'v8/feature/a11y-issue-60' of https://github.com/MMasey/…
e5fbd9f 
…Umbraco-CMS into pr/6084

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
#	src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
#	src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@emmaburstow emmaburstow added release/no-notes This is too small to add to the release notes or fixed after a beta/RC release/8.0.2 type/feature release/8.6.0 and removed release/8.0.2 labels Jan 16, 2020
@emmaburstow emmaburstow merged commit 1b3f809 into umbraco:v8/contrib Jan 16, 2020
@nul800sebastiaan nul800sebastiaan removed the release/no-notes This is too small to add to the release notes or fixed after a beta/RC label Mar 2, 2020
@kjac kjac mentioned this pull request Jul 28, 2020
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@poornimanayar poornimanayar poornimanayar approved these changes

Assignees
No one assigned
Labels
category/accessibility community/pr release/8.6.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@MMasey @poornimanayar @nul800sebastiaan @emmaburstow @kjac