Accessibility of the status page

[Andrea-Guevara]

References

• Fixes [Deque Analysis] Item Edit "Status" Tab "serious" accessibility issues #1190

Description

Using grid system classes, creation of a new class in scss and media query to improve the responsiveness of the status page using the "item-operation" component.

Instructions for reviewers

List of changes in this PR:

• In the "item-operation" component, the grid system classes "col-3" and "col-9" have been replaced by "col-12 col-md-3" and "col-12 col-md-9" in the div containing the text describing the functionality of the buttons and in the div containing the buttons.
• The "item-operation.component.scss" file was created for styling.
• The "column-height" class was created to define the height of the grid columns on larger and smaller screens using media queries.

To reproduce:

• Log in as an administrator.
• Enter an item and click on the edit button.
• Click on the status button.
• Zoom out and see that the texts and buttons on the status page are responsive.

[nwoodward]

I tested this PR locally in Firefox and Chrome, and it does make the buttons and their labels on the status page more responsive. But for some reason there is space between the text and the button, so the text appears closer to the button above it. See screenshot.

[Andrea-Guevara]

Hi @nwoodward, thanks for the feedback!
I had a look and realized that the h-100 class in the div containing the text was causing this! I removed it and now everything should be working properly.

[nwoodward]

Hi @Andrea-Guevara! I confirmed the alignment issue still exists between the Bootstrap breakpoints for extra small (576px) and small screens (767px). I think the issue is that setting the height to 100% in the new column-height class does the same thing as the h-100 Bootstrap class. So I think both need to be removed. Was there a reasons for setting it in the first place?

[Andrea-Guevara]

Hello @nwoodward, good morning!

Sorry for the delay in replying, our schedules haven't been matching up. You're right, we could set the height of the text column with the h-auto bootstrap class and remove the 100% height.

My main idea was: on larger screens leave the height of the text column at 100% and on smaller screens leave it automatic.

Thank you for your suggestions, I look forward to your feedback.

[artlowel]

Thanks @Andrea-Guevara!

I agree with the change, however there are a few other rows on that page, in a different component:

dspace-angular/src/app/item-page/edit-item-page/item-status/item-status.component.html

Line 4 in 544306a

<div class="col-3 float-left status-label">

Would you mind fixing those too? Because currently it looks like only half the page is resizing:

I think making the labels bold would also help to make it more clear on small screens (and it doesn't hurt if they're bold on large screens as well)

[Andrea-Guevara]

Good afternoon @artlowel!
Thank you very much for your feedback.

I've made the changes to the “item-status.component” component, and in addition to your suggestions, I've added a small space between the lines to improve readability.

I think the bold labels are great!

We'll be happy to help with anything.

[artlowel]

Thanks @Andrea-Guevara!

The bold makes it clearer indeed. Can you apply it to the bottom half of the page as well, the part in item-operation.component.html?

[artlowel]

I would add the css class font-weight-bold to the HTML rather than setting it in css.

The reason for that is: if you want to change how bold the text is in your theme. Then you can do it in a single place if we use the same css class everywhere. If we don't, you'd have to find all instances of font-weight in scss files across the app to change it

[Andrea-Guevara]

Good morning @artlowel!

I've already adjusted the code. In the “item-status.component.html” the labels are defined directly in the divs, if it's interesting for you, I could add the tag as it is defined in the “item-operation.component.html”.

I hope I've got it right and made the necessary adjustments to the code.

Once again, we are at your disposal!

[artlowel]

Thanks @Andrea-Guevara!

This looks good!

[dspace-bot]

Backport failed for dspace-7_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-7_x
git worktree add -d .worktree/backport-3148-to-dspace-7_x origin/dspace-7_x
cd .worktree/backport-3148-to-dspace-7_x
git switch --create backport-3148-to-dspace-7_x
git cherry-pick -x e06b67fd73358ac52e2e71fa96d708520de33f3e 5f4a049fddeceda0fdbb870410d3780b858bcca9 3800021ed364a7994b454e1a75c59a3f7f7581d1 f975e1da897b34df0621ecd78ee11d4fc58460b4 4aed1b60563b3486da9f5c98cd4ee15451553b73

[dspace-bot]

Successfully created backport PR for dspace-8_x:

• [Port dspace-8_x] Accessibility of the status page #3381