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

A11Y: Improve readability by adding spacing and focus styles and further suggestions #63

Open
1 of 5 tasks
peter-neumann-dev opened this issue Mar 15, 2023 · 0 comments
Open
1 of 5 tasks

A11Y: Improve readability by adding spacing and focus styles and further suggestions #63

peter-neumann-dev opened this issue Mar 15, 2023 · 0 comments

Comments

@peter-neumann-dev
Copy link
Contributor

peter-neumann-dev commented Mar 15, 2023 •
edited
Loading

To resolve issues with readability and focus styles in the backend module, a slight spacing between the selects of the upper form group should be added to prevent overlapping of the existing focus styles from bootstrap.

For inputs and textareas in the translation table, a slight padding and a focus style should be added, to improve readability and identification of the active input. The paddings should be as small as possible to prevent the table from increasing in vertical height.

Additional improvements to consider in the future:

  • Add descriptive labels to selects of extension, files, and languages
  • Add descriptive labels to inputs inside of translations
  • When adding a new row with the ➕ add button, the input for the key of the new row should retrieve focus immediately
  • The add, delete and move buttons should be real buttons with a descriptive label
  • Allow navigation with arrow keys between cells
peter-neumann-dev added a commit to peter-neumann-dev/translate_locallang that referenced this issue Mar 15, 2023
@peter-neumann-dev
[TASK] Improve accessibility by fix spacing and add missing focus styles
684e80a 
These changes resolve issues with readability and focus styles in the backend module. A slight spacing between the selects of the upper form group is added to prevent overlapping focus styles. For inputs and textareas, a slight padding and a focus style is added, to improve readability and identification of the active input.

Related-to: rrrapha#63
@peter-neumann-dev peter-neumann-dev mentioned this issue Mar 15, 2023
Merged
peter-neumann-dev added a commit to peter-neumann-dev/translate_locallang that referenced this issue May 31, 2023
@peter-neumann-dev
[TASK] Improve styles of translation table
ae16213 
* Prevents scrollbar for textareas equal or less than two lines
* Focus style follows extension colors
* Rebuild css-table layout to grid and flex to prevent border collapsing with focus-styles

Resolves: rrrapha#63
@peter-neumann-dev peter-neumann-dev mentioned this issue May 31, 2023
Closed
peter-neumann-dev added a commit to peter-neumann-dev/translate_locallang that referenced this issue May 31, 2023
@peter-neumann-dev
[TASK] Improve styles of translation table
93e8d1d 
* Prevents scrollbar for textareas equal or less than two lines
* Focus style follows extension colors
* Rebuild css-table layout to grid and flex to prevent border collapsing with focus-styles

Resolves: rrrapha#63
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[TASK] Improve styles of translation table peter-neumann-dev/translate_locallang
1 participant
@peter-neumann-dev