? Language Change PR-5.0-dev Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
22 Aug 2023

Pull Request for Issue #41198 .

Summary of Changes

All inputs must have a label. This PR adds an "invisible" label to the two date operators

Testing Instructions

Run a search, for example, for the word 'joomla'
On the results page, set filters to specify the date range (selection options: 'before', 'after', 'exactly')

Note that to test this you need to go to the component options and set Date filters to show as they are hidden by default

Actual result BEFORE applying this Pull Request

a11y testing tools report two errors
view source and you will see a select without a label
image

Expected result AFTER applying this Pull Request

a11y testing tools report no errors
view source and you will see a select with a label

image

Link to documentations

Please select:

  • Documentation link for docs.joomla.org:

  • No documentation changes for docs.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

avatar joomla-cms-bot joomla-cms-bot - change - 22 Aug 2023
Category Administration com_finder Language & Strings
avatar brianteeman brianteeman - open - 22 Aug 2023
avatar brianteeman brianteeman - change - 22 Aug 2023
Status New Pending
avatar HLeithner
HLeithner - comment - 22 Aug 2023

short question, when do you use aria-label attribute if you always need a label? doesn't full fill this attribute the same thing?

avatar brianteeman
brianteeman - comment - 22 Aug 2023

first rule of aria is not to use aria and to always use native html if possible

https://www.deque.com/blog/top-5-rules-of-aria/

avatar HLeithner
HLeithner - comment - 22 Aug 2023

https://stackoverflow.com/questions/43105006/should-i-use-arial-label-or-a-label-element-that-is-visually-hidden#:~:text=Using%20aria-label%20is%20preferable,visually%20hide%20a%20label%20element.&text=But%20note%20that%20you%20don,field%20and%20the%20submit%20button.

which says: "Using aria-label is preferable to relying on CSS to visually hide a label element." and links to https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA14

it's WCAG 2.0 but I didn't find anything saying something different in 3.0 but tbh didn't read the every...

also your source speaks of a "visible" label or a aria-label...

avatar brianteeman
brianteeman - comment - 22 Aug 2023

the first rule of aria always wins

avatar HLeithner
HLeithner - comment - 22 Aug 2023

the first rule of aria always wins

sorry but the WCAG says something different and the rule 5 also says something different.

anyway, will come back to this later

avatar brianteeman
brianteeman - comment - 22 Aug 2023

You always know better than anyone else.

avatar brianteeman brianteeman - change - 22 Aug 2023
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2023-08-22 09:47:02
Closed_By brianteeman
Labels Added: Language Change PR-5.0-dev
avatar brianteeman brianteeman - close - 22 Aug 2023
avatar zwiastunsw
zwiastunsw - comment - 22 Aug 2023

@HLeithner: The label can sometimes be invisible, but an accessible name is needed for assistive technology users, such as when the context and appearance of the control determine its purpose. Then those who control by voice can issue the appropriate command (e.g., Search, Close). You can, of course, use a label and hide it visually with CSS. But consider that this accessible name is needed by assistive technology users. It is better, simpler and more reliably conveyed using aria-label (the first rule of aria always wins).
Aria was created to provide accessibility components where HTML does not or cannot provide them with HTML. Therefore, use ARIA when you must, not when you can. If you use a native HTML element in this case, you have to hide it visually right afterwards, which causes complications and can cause accessibility problems.
A better choice: use aria-label.
I hope I have clarified. Brian is right.

avatar HLeithner
HLeithner - comment - 22 Aug 2023

@HLeithner: The label can sometimes be invisible, but an accessible name is needed for assistive technology users, such as when the context and appearance of the control determine its purpose. Then those who control by voice can issue the appropriate command (e.g., Search, Close). You can, of course, use a label and hide it visually with CSS. But consider that this accessible name is needed by assistive technology users. It is better, simpler and more reliably conveyed using aria-label (the first rule of aria always wins). Aria was created to provide accessibility components where HTML does not or cannot provide them with HTML. Therefore, use ARIA when you must, not when you can. If you use a native HTML element in this case, you have to hide it visually right afterwards, which causes complications and can cause accessibility problems. A better choice: use aria-label. I hope I have clarified. Brian is right.

I appreciate your comment, that's exactly what I said. I think that got lost in translation.

and brian please keep your

You always know better than anyone else.

for you self, thanks

avatar HLeithner
HLeithner - comment - 24 Aug 2023

maintainers meeting yesterday decided that accessibility team in this case @drmenzelit will take a look and takes a decision.

avatar zwiastunsw
zwiastunsw - comment - 24 Aug 2023

What is the a11y team to decide?

Brian offered the correct solution to the reported problem. Before this fix, the screen reader does not announce what the selection lists are for. After the implementation of the fix, the screen reader correctly announces what the selection list is for and correctly announces the date input fields. In terms of accessibility, it is OK.

Also, if the user turns off the stylesheet, they will receive full information (see screenshot)
view with style sheets disabled

If I were to further improve this element, I would make the indication specifying the date format visible. The title attribute is not a reliable way to convey instructions and directions for filling in forms.
Furthermore, in my opinion, this fix should be implemented in Joomla 4 and not only in Joomla 5.

avatar brianteeman
brianteeman - comment - 24 Aug 2023

@zwiastunsw i have no idea - someone elses problem now

avatar drmenzelit
drmenzelit - comment - 24 Aug 2023

Sadly Brian closed the pull request, so we need to create it again.

avatar zwiastunsw
zwiastunsw - comment - 24 Aug 2023

@drmenzelit: Does this mean that we should trash a job well done and once again fix something that has already been fixed?
I don't understand.

avatar brianteeman brianteeman - change - 24 Aug 2023
Status Closed New
Closed_Date 2023-08-22 09:47:02
Closed_By brianteeman
avatar brianteeman brianteeman - change - 24 Aug 2023
Status New Pending
avatar brianteeman brianteeman - reopen - 24 Aug 2023
avatar zwiastunsw
zwiastunsw - comment - 24 Aug 2023
avatar zwiastunsw zwiastunsw - test_item - 24 Aug 2023 - Tested successfully
avatar zwiastunsw
zwiastunsw - comment - 24 Aug 2023

I have tested this item ✅ successfully on ff94310


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41429.

avatar alikon
alikon - comment - 24 Aug 2023

i'll don't mark this as a succesful test, cause i've only checked the html , hope that someonelse do the last mile

avatar TLWebdesign TLWebdesign - test_item - 26 Aug 2023 - Tested successfully
avatar TLWebdesign
TLWebdesign - comment - 26 Aug 2023

I have tested this item ✅ successfully on ff94310


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41429.

avatar rachelwalraven rachelwalraven - test_item - 26 Aug 2023 - Tested successfully
avatar rachelwalraven
rachelwalraven - comment - 26 Aug 2023

I have tested this item ✅ successfully on ff94310

label is added after patch


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41429.

avatar alikon alikon - change - 26 Aug 2023
Status Pending Ready to Commit
avatar alikon
alikon - comment - 26 Aug 2023

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41429.

avatar HLeithner
HLeithner - comment - 26 Aug 2023

Furthermore, in my opinion, this fix should be implemented in Joomla 4 and not only in Joomla 5.

shouldn't be done because it could break frontend templates (also true for 5.0)

avatar brianteeman
brianteeman - comment - 26 Aug 2023

Furthermore, in my opinion, this fix should be implemented in Joomla 4 and not only in Joomla 5.

shouldn't be done because it could break frontend templates (also true for 5.0)

not true

avatar HLeithner
HLeithner - comment - 26 Aug 2023

not true

it is, if you don't have the class "element-invisible" which is only in Atum and Cassiopeia you get something like that:
image

Tested on a 4.3 site by just adding the label to the Startdate not using cassiopeia (I think it's yootheme)

avatar brianteeman
brianteeman - comment - 26 Aug 2023

If that class is not present then it will have an impact in other places. Also not covered by BC policy

avatar Fedik
Fedik - comment - 26 Aug 2023

If that class is not present then it will have an impact in other places

@brianteeman I think it should be visually-hidden as we use in other our code, instead of element-invisible.
I checked we mostly use visually-hidden , but did not found element-invisible.

avatar brianteeman
brianteeman - comment - 26 Aug 2023

Feel free to edit the pr I don't use the computer on shabbat

avatar brianteeman
brianteeman - comment - 26 Aug 2023

Feel free to edit the pr I don't use the computer on shabbat

avatar HLeithner
HLeithner - comment - 31 Aug 2023

@brianteeman do you update this before weekend?

avatar brianteeman
brianteeman - comment - 31 Aug 2023

Sorry. Thought someone had already done it. Will try tonight when I get back from hospital

avatar brianteeman brianteeman - change - 31 Aug 2023
Labels Added: ?
avatar brianteeman
brianteeman - comment - 31 Aug 2023

changes made as requested

avatar HLeithner HLeithner - close - 2 Sep 2023
avatar HLeithner HLeithner - merge - 2 Sep 2023
avatar HLeithner HLeithner - change - 2 Sep 2023
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2023-09-02 16:08:58
Closed_By HLeithner
avatar HLeithner
HLeithner - comment - 2 Sep 2023

thx

avatar brianteeman
brianteeman - comment - 2 Sep 2023

thanks

Add a Comment

Login with GitHub to post a comment