Project

General

Profile

Actions

Bug #92664

open

Epic #89595: Improve accessibility of backend

Some input elements are cut off when resized and cause horizontal scrolling

Added by Jakob Widhalm over 3 years ago. Updated over 1 year ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2020-10-22
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
accessibility
Complexity:
medium
Is Regression:
Sprint Focus:

Description

A user should be able to resize a website up to 200% without text getting clipped or truncated. It mostly works when the user hides the .scaffold-content-navigation.

There are some input elements that are cut off:

  • In General: URL Segment
  • In Behaviour: Link Target
  • In Resources: Include static Page TSconfig (from extensions)
  • In Resources (Lightbox File selector): "Upload files", "Add new media asset" and "Create new folder"
  • In Access: Usergroup Access Rights
  • In Social Media: Type of card to show
  • The date picker

#tas2020


Files

csm_content-cut-off-2_5e386f8a8d.png (24.1 KB) csm_content-cut-off-2_5e386f8a8d.png Jakob Widhalm, 2020-10-22 10:40
csm_content-cut-off-3_ceab8ac7ce.png (17 KB) csm_content-cut-off-3_ceab8ac7ce.png Jakob Widhalm, 2020-10-22 10:40
csm_content-cut-off-4_e91e18e880.png (14.4 KB) csm_content-cut-off-4_e91e18e880.png Jakob Widhalm, 2020-10-22 10:40
csm_content-cut-off-8_a4dfbb61e4.png (25.8 KB) csm_content-cut-off-8_a4dfbb61e4.png Jakob Widhalm, 2020-10-22 10:40
csm_page-cut-off-1_9cd65a77ce.png (13.5 KB) csm_page-cut-off-1_9cd65a77ce.png Jakob Widhalm, 2020-10-22 10:40
csm_page-cut-off-2_2bce98998d.png (4.28 KB) csm_page-cut-off-2_2bce98998d.png Jakob Widhalm, 2020-10-22 10:40
csm_page-cut-off-3_a918efa7f2.png (17.9 KB) csm_page-cut-off-3_a918efa7f2.png Jakob Widhalm, 2020-10-22 10:40
csm_page-cut-off-4_3db5664855.png (10.4 KB) csm_page-cut-off-4_3db5664855.png Jakob Widhalm, 2020-10-22 10:40
csm_page-cut-off-5_4b46e83594.png (27.3 KB) csm_page-cut-off-5_4b46e83594.png Jakob Widhalm, 2020-10-22 10:40
content-calendar-200.png (77.1 KB) content-calendar-200.png Riccardo De Contardi, 2022-02-19 17:01
content-uploadfiles-200.png (92.4 KB) content-uploadfiles-200.png Riccardo De Contardi, 2022-02-19 17:01
page-addmedia-url-200.png (85.5 KB) page-addmedia-url-200.png Riccardo De Contardi, 2022-02-19 17:01
page-twittercard-200.png (91.8 KB) page-twittercard-200.png Riccardo De Contardi, 2022-02-19 17:01
page-usergroup-accessrights-200.png (84.6 KB) page-usergroup-accessrights-200.png Riccardo De Contardi, 2022-02-19 17:01
page-tsconfig-200.png (79.1 KB) page-tsconfig-200.png Riccardo De Contardi, 2022-02-19 17:01
page-linktarget-200.png (195 KB) page-linktarget-200.png Riccardo De Contardi, 2022-02-19 17:01
page-urlfield-200.png (216 KB) page-urlfield-200.png Riccardo De Contardi, 2022-02-19 17:01

Related issues 1 (0 open1 closed)

Related to TYPO3 Core - Bug #94688: Form elements flowing into and through each otherClosed2021-08-02

Actions
Actions #1

Updated by Riccardo De Contardi over 3 years ago

  • Parent task set to #89595
Actions #2

Updated by Riccardo De Contardi over 3 years ago

  • Category set to Backend User Interface
Actions #3

Updated by Benni Mack over 2 years ago

  • Related to Bug #94688: Form elements flowing into and through each other added
Actions #4

Updated by Benni Mack over 2 years ago

  • Status changed from New to Needs Feedback

Hey Riccardo,

can you check if https://review.typo3.org/c/Packages/TYPO3.CMS/+/71798 solves your issue?

Updated by Riccardo De Contardi over 2 years ago

I tried to reproduce these issues with the latest master version of TYPO3 (12.0.0-dev); some are still present, some looks mitigated

I used the following scenario

1) reduced the window screen (Chrome on MAC) to a widht of 340 px
2) Hidden module bar
3) Hidden pagetree
4) the font size has been increased to 300%

Jakob Widhalm files My files Notes
csm_content-cut-off-2_5e386f8a8d.png page-usergroup-accessrights-200.png I used page> access; seems still present
csm_content-cut-off-3_ceab8ac7ce.png content-uploadfiles-200.png I'm not sure I'm doing it right; I tried with adding an image (text with image element > select and upload file)
csm_content-cut-off-4_e91e18e880.png ? Not tested, I was not sure about what to use on a plain TYPO3 installation
csm_content-cut-off-8_a4dfbb61e4.png content-calendar-200.png Please, note that when the calendar is open, the page does not seem to be scrollable anymore!
csm_page-cut-off-1_9cd65a77ce.png page-urlfield-200.png looks absent or at least mitigated
csm_page-cut-off-2_2bce98998d.png page-linktarget-200.png seems present
csm_page-cut-off-3_a918efa7f2.png page-tsconfig-200.png seems still present
csm_page-cut-off-4_3db5664855.png page-twittercard-200.png looks absent
csm_page-cut-off-5_4b46e83594.png page-addmedia-url-200.png Seems it has been reworked; I used page > resources > add media by url
Actions #6

Updated by Riccardo De Contardi over 1 year ago

  • Status changed from Needs Feedback to New
Actions

Also available in: Atom PDF