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

Improve accessibility for the files sidebar #5000

Merged
merged 21 commits into from
Apr 26, 2021
Merged

Improve accessibility for the files sidebar #5000

merged 21 commits into from
Apr 26, 2021

Conversation

JammingBen
Copy link
Contributor

@JammingBen JammingBen commented Apr 22, 2021 •
edited
Loading

Description

  • Transform file name to h2 element
  • Transform Open folder action to link instead of button
  • Add a more descriptive close button label
  • Close sidebar when clicking outside of it
  • Remove aria-label on the action buttons as they already include proper labels
  • Transform the favorite-star in sidebar to a button-element, adjust aria-label
  • Add a hint for screen readers if an action opens a new window/tab

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Technical debt
  • Tests

Checklist:

  • Code changes
  • Unit tests added
  • Acceptance tests added
  • Documentation ticket raised:

@ownclouders
Copy link
Contributor

💥 Acceptance tests TrashbinDelete failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124603-000.png
20210422-124639-110.png
20210422-124713-807.png
20210422-124748-803.png
20210422-124823-774.png
20210422-124859-016.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingPublicDifferentRoles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124728-205.png
20210422-124755-692.png
20210422-124823-283.png
20210422-124851-770.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingInternalGroups failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124733-090.png
20210422-124806-705.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingInternalUsersRoot2 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-125216-563.png
20210422-125246-749.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests TrashbinRestore failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124541-381.png
20210422-124616-135.png
20210422-124649-125.png
20210422-124721-699.png
20210422-124838-220.png
20210422-124911-783.png
20210422-124945-631.png
20210422-125018-760.png
20210422-125053-507.png
20210422-125128-488.png
20210422-125201-966.png
20210422-125237-320.png
20210422-125321-800.png
20210422-125407-275.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingPublicBasic failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-125200-430.png
20210422-125235-157.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingInternalGroupsRoot failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124830-081.png
20210422-124914-104.png
20210422-125001-033.png
20210422-125050-919.png
20210422-125134-856.png
20210422-125217-914.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingInternalUsersRoot1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124806-584.png
20210422-124846-968.png
20210422-124936-983.png
20210422-125024-204.png
20210422-125109-267.png
20210422-125152-439.png
20210422-125709-873.png
20210422-125740-810.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests Favorites failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124535-385.png
20210422-124609-774.png
20210422-124647-084.png
20210422-124724-362.png
20210422-124942-518.png
20210422-125021-025.png
20210422-125100-099.png
20210422-125139-452.png
20210422-125220-694.png
20210422-125259-702.png
20210422-125337-712.png
20210422-125415-494.png
20210422-125452-636.png
20210422-125530-759.png
20210422-125609-202.png
20210422-125646-398.png
20210422-125723-854.png
20210422-125802-096.png
20210422-125855-713.png
20210422-125933-484.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIDelete failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124556-790.png
20210422-124629-581.png
20210422-124701-747.png
20210422-124734-278.png
20210422-124806-318.png
20210422-124838-940.png
20210422-124911-949.png
20210422-124941-420.png
20210422-125013-351.png
20210422-125044-627.png
20210422-125134-675.png
20210422-125208-462.png
20210422-125239-489.png
20210422-125310-299.png
20210422-125342-781.png
20210422-125415-926.png
20210422-125448-810.png
20210422-125520-590.png
20210422-125556-196.png
20210422-125630-435.png
20210422-125704-635.png
20210422-125737-482.png
20210422-125827-291.png
20210422-125858-790.png
20210422-125928-611.png
20210422-125958-238.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingBasic failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124831-096.png
20210422-124918-807.png
20210422-124955-208.png
20210422-125033-139.png
20210422-125127-964.png
20210422-125203-902.png
20210422-125238-759.png
20210422-125314-880.png
20210422-125347-870.png
20210422-125421-319.png
20210422-125455-840.png
20210422-125531-323.png
20210422-125605-626.png
20210422-125638-672.png
20210422-125857-143.png
20210422-125934-619.png
20210422-130007-735.png
20210422-130040-827.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles2 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-125521-036.png
20210422-125554-691.png
20210422-125628-979.png
20210422-125702-831.png
20210422-125908-947.png
20210422-125941-323.png
20210422-130049-256.png
20210422-130124-129.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingInternalUsers failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124822-009.png
20210422-124913-890.png
20210422-124943-994.png
20210422-125016-794.png
20210422-125532-696.png
20210422-125604-912.png
20210422-130026-696.png
20210422-130059-654.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests Move failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124555-674.png
20210422-124633-600.png
20210422-124710-451.png
20210422-124747-211.png
20210422-124823-934.png
20210422-124900-775.png
20210422-125001-735.png
20210422-125038-450.png
20210422-125117-592.png
20210422-125154-281.png
20210422-125231-375.png
20210422-125307-788.png
20210422-125339-421.png
20210422-125409-987.png
20210422-125448-063.png
20210422-125527-953.png
20210422-125604-550.png
20210422-125641-444.png
20210422-125806-557.png
20210422-125843-244.png
20210422-125918-074.png
20210422-125953-774.png
20210422-130029-010.png
20210422-130104-408.png
20210422-130159-209.png
20210422-130233-852.png
20210422-130309-039.png
20210422-130344-611.png
20210422-130419-732.png
20210422-130455-105.png
20210422-130532-220.png
20210422-130609-592.png
20210422-130642-552.png
20210422-130715-694.png
20210422-130748-275.png
20210422-130821-201.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIBasic failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124547-003.png
20210422-124622-513.png
20210422-124838-105.png
20210422-124906-829.png
20210422-124936-238.png
20210422-125006-252.png
20210422-125036-085.png
20210422-125106-135.png
20210422-125136-253.png
20210422-125206-596.png
20210422-125234-420.png
20210422-125300-975.png
20210422-125327-094.png
20210422-125354-066.png
20210422-125423-115.png
20210422-125453-162.png
20210422-125523-170.png
20210422-125553-497.png
20210422-125623-397.png
20210422-125653-182.png
20210422-125722-826.png
20210422-125753-525.png
20210422-125830-905.png
20210422-125900-012.png
20210422-125929-410.png
20210422-125959-522.png
20210422-130104-628.png
20210422-130135-915.png
20210422-130206-823.png
20210422-130237-230.png
20210422-130308-587.png
20210422-130339-785.png
20210422-130410-177.png
20210422-130440-514.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124702-225.png
20210422-124738-514.png
20210422-124815-443.png
20210422-124852-428.png
20210422-125508-005.png
20210422-125544-337.png
20210422-125620-115.png
20210422-125655-434.png
20210422-125751-455.png
20210422-125826-006.png
20210422-125901-466.png
20210422-125936-985.png
20210422-130012-494.png
20210422-130048-162.png
20210422-130123-643.png
20210422-130159-044.png
20210422-130230-148.png
20210422-130259-819.png
20210422-130336-451.png
20210422-130414-538.png
20210422-130452-562.png
20210422-130530-654.png
20210422-130604-168.png
20210422-130637-510.png
20210422-130710-857.png
20210422-130744-368.png
20210422-130820-666.png
20210422-130856-419.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIRename failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14963/

20210422-124509-453.png
20210422-124542-024.png
20210422-124613-811.png
20210422-124645-475.png
20210422-124716-953.png
20210422-124748-762.png
20210422-124820-011.png
20210422-124850-998.png
20210422-124923-301.png
20210422-124955-702.png
20210422-125028-133.png
20210422-125100-564.png
20210422-125132-767.png
20210422-125205-528.png
20210422-125237-870.png
20210422-125309-862.png
20210422-125341-946.png
20210422-125413-495.png
20210422-125444-874.png
20210422-125516-143.png
20210422-125547-934.png
20210422-125619-573.png
20210422-125651-435.png
20210422-125723-267.png
20210422-125755-314.png
20210422-125827-330.png
20210422-125858-796.png
20210422-125930-139.png
20210422-130001-695.png
20210422-130032-888.png
20210422-130104-144.png
20210422-130135-261.png
20210422-130206-448.png
20210422-130237-707.png
20210422-130309-423.png
20210422-130341-018.png
20210422-130412-151.png
20210422-130443-330.png
20210422-130514-499.png
20210422-130545-680.png
20210422-130616-890.png
20210422-130648-195.png
20210422-130719-552.png
20210422-130751-030.png
20210422-130822-699.png
20210422-130854-328.png
20210422-130927-278.png
20210422-131000-221.png
20210422-131037-186.png
20210422-131114-773.png
20210422-131150-587.png
20210422-131226-145.png
20210422-131259-734.png
20210422-131333-400.png
20210422-131405-981.png
20210422-131437-980.png
20210422-131509-246.png
20210422-131540-303.png
20210422-131611-374.png
20210422-131642-676.png
20210422-131713-757.png
20210422-131744-997.png
20210422-131816-271.png
20210422-131848-683.png
20210422-131921-151.png
20210422-131952-963.png
20210422-132025-139.png
20210422-132057-729.png
20210422-132129-878.png
20210422-132201-896.png
20210422-132233-804.png
20210422-132306-073.png
20210422-132338-528.png
20210422-132411-050.png
20210422-132443-845.png
20210422-132517-891.png
20210422-132550-314.png
20210422-132622-635.png
20210422-132655-433.png
20210422-132727-616.png
20210422-132800-216.png
20210422-132831-741.png
20210422-132903-173.png
20210422-132934-856.png
20210422-133006-541.png
20210422-133038-273.png
20210422-133110-227.png
20210422-133142-296.png
20210422-133214-277.png
20210422-133246-399.png
20210422-133318-189.png
20210422-133350-144.png
20210422-133421-935.png
20210422-133453-477.png
20210422-133525-289.png
20210422-133556-965.png
20210422-133628-475.png
20210422-133700-917.png
20210422-133732-296.png
20210422-133804-137.png
20210422-133836-377.png
20210422-133908-462.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests TrashbinFilesFolders failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-145937-373.png
20210422-150012-730.png
20210422-150047-246.png
20210422-150121-234.png
20210422-150153-850.png
20210422-150226-466.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests TrashbinDelete failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150003-094.png
20210422-150035-815.png
20210422-150109-508.png
20210422-150143-765.png
20210422-150218-845.png
20210422-150254-324.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests MarkdownEditor failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150155-203.png
20210422-150231-237.png
20210422-150307-507.png
20210422-150343-880.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingPublicDifferentRoles failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150108-398.png
20210422-150136-164.png
20210422-150205-036.png
20210422-150234-624.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingInternalGroups failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150233-475.png
20210422-150305-345.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests TrashbinRestore failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-145937-800.png
20210422-150008-996.png
20210422-150039-426.png
20210422-150109-708.png
20210422-150220-803.png
20210422-150252-481.png
20210422-150323-949.png
20210422-150356-156.png
20210422-150429-131.png
20210422-150501-151.png
20210422-150532-917.png
20210422-150604-577.png
20210422-150642-574.png
20210422-150723-032.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingInternalUsersRoot2 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150632-969.png
20210422-150705-750.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingInternalGroupsRoot failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150231-969.png
20210422-150318-342.png
20210422-150406-408.png
20210422-150454-588.png
20210422-150536-829.png
20210422-150618-976.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests SharingPublicBasic failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150708-201.png
20210422-150744-203.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingInternalUsersRoot1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-150140-395.png
20210422-150220-901.png
20210422-150307-682.png
20210422-150355-794.png
20210422-150438-582.png
20210422-150520-921.png
20210422-151033-571.png
20210422-151104-563.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests Favorites failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-145922-471.png
20210422-145958-214.png
20210422-150033-514.png
20210422-150108-196.png
20210422-150307-435.png
20210422-150342-336.png
20210422-150419-012.png
20210422-150455-237.png
20210422-150531-448.png
20210422-150607-669.png
20210422-150642-463.png
20210422-150716-836.png
20210422-150751-203.png
20210422-150825-015.png
20210422-150859-447.png
20210422-150933-713.png
20210422-151006-511.png
20210422-151039-375.png
20210422-151132-196.png
20210422-151209-122.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIDelete failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/14968/

20210422-145953-882.png
20210422-150028-208.png
20210422-150100-048.png
20210422-150132-851.png
20210422-150204-745.png
20210422-150236-704.png
20210422-150308-392.png
20210422-150340-162.png
20210422-150412-809.png
20210422-150444-419.png
20210422-150536-016.png
20210422-150611-990.png
20210422-150644-363.png
20210422-150716-481.png
20210422-150749-940.png
20210422-150823-688.png
20210422-150856-502.png
20210422-150929-658.png
20210422-151006-062.png
20210422-151042-085.png
20210422-151117-564.png
20210422-151153-011.png
20210422-151246-463.png
20210422-151319-108.png
20210422-151351-941.png
20210422-151425-441.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIResharing failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15020/

20210423-084815-044.png
20210423-084852-673.png
20210423-084931-096.png
20210423-085009-063.png
20210423-085153-927.png
20210423-085233-095.png
20210423-085311-676.png
20210423-085350-688.png
20210423-085428-983.png
20210423-085508-155.png
20210423-085548-344.png
20210423-085628-646.png
20210423-085709-563.png
20210423-085750-458.png
20210423-085830-779.png
20210423-085911-363.png
20210423-090138-252.png
20210423-090217-084.png
20210423-090255-610.png
20210423-090334-607.png
20210423-090413-114.png
20210423-090452-025.png
20210423-090530-727.png
20210423-090609-101.png
20210423-090647-939.png
20210423-090726-663.png
20210423-090805-122.png
20210423-090843-885.png
20210423-090922-511.png
20210423-091001-269.png
20210423-091040-742.png
20210423-091119-989.png
20210423-091158-122.png
20210423-091237-250.png
20210423-091316-332.png
20210423-091354-668.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUISharingInternalUsers failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15020/

20210423-084807-485.png
20210423-084845-940.png
20210423-084922-712.png
20210423-084958-386.png
20210423-085034-642.png
20210423-085111-762.png
20210423-085149-369.png
20210423-085227-128.png
20210423-085306-946.png
20210423-085347-391.png
20210423-085613-628.png
20210423-085651-828.png
20210423-085839-072.png
20210423-085916-692.png
20210423-085954-333.png
20210423-090032-036.png
20210423-090109-631.png
20210423-090148-043.png
20210423-090255-001.png
20210423-090332-197.png
20210423-091424-075.png
20210423-091458-487.png

AlexAndBear
AlexAndBear reviewed Apr 23, 2021
View reviewed changes
packages/web-app-files/src/components/Sidebar.vue Outdated
Comment on lines 212 to 225
onClickOutside(event) {
/*
* We need to go for this opt-out solution because under circumstances a model will be rendered,
* for example if we click rename, clicking in this model would otherwise falsy close the sidebar.
*/

if (
document.querySelector('.files-topbar').contains(event.target) ||
document.querySelector('.oc-topbar').contains(event.target) ||
document.querySelector('.oc-app-navigation').contains(event.target) ||
event.target.id === 'files-view'
) {
this.close()
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pascalwengerter ugly but I don't see another solution here.

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15025/

20210423-092825-195.png
20210423-093049-476.png
20210423-093110-984.png
20210423-093128-572.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15030/

20210423-095717-942.png
20210423-095957-660.png
20210423-100019-844.png
20210423-100037-852.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles2 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15034/

20210423-103152-026.png
20210423-103225-906.png
20210423-103259-534.png
20210423-103333-622.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15034/

20210423-103231-283.png
20210423-103456-820.png
20210423-103517-603.png
20210423-103533-605.png

@ownclouders
Copy link
Contributor

💥 Acceptance tests webUIFiles1 failed. Please find the screenshots inside ...

https://drone.owncloud.com/owncloud/web/15035/

20210423-110125-928.png
20210423-110339-271.png
20210423-110357-212.png
20210423-110412-515.png

@JammingBen
Copy link
Contributor Author

JammingBen commented Apr 23, 2021 •
edited
Loading

Currently fixing the last few tests, I think we can already mark this as ready to review though.

Edit: Looking good now, except one failing test which seems not related to this PR.

@JammingBen JammingBen marked this pull request as ready for review April 23, 2021 11:23
@JammingBen JammingBen added Status:Needs-Review Needs review from a maintainer Topic:Accessibility labels Apr 23, 2021
@JammingBen JammingBen requested a review from kulmann April 23, 2021 12:15
@AlexAndBear AlexAndBear self-requested a review April 23, 2021 13:09
@kulmann kulmann changed the base branch from master to a11y-swarming April 26, 2021 08:54
@kulmann kulmann merged commit 93e37df into a11y-swarming Apr 26, 2021
@delete-merged-branch delete-merged-branch bot deleted the file-sidebar-a11y branch April 26, 2021 08:55
This was referenced May 28, 2021
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pascalwengerter pascalwengerter pascalwengerter left review comments

@kulmann kulmann Awaiting requested review from kulmann

@fschade fschade Awaiting requested review from fschade

@AlexAndBear AlexAndBear Awaiting requested review from AlexAndBear

Assignees

@AlexAndBear AlexAndBear

@JammingBen JammingBen

Labels
Status:Needs-Review Needs review from a maintainer Topic:Accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@JammingBen @ownclouders @fschade @pascalwengerter @AlexAndBear @kulmann