Comments (4)
The template for the expand and collapse buttons binds to the actualClick
event, defined by the dsDragClick
directive.
According to the code comments, this directive is for preventing drag events being misinterpret as clicks. Manually testing the page (on 7.6.x) without this directive and binding to the click
event, the only way I was able to make a drag be interpreted as a click was to start and end the drag over the 'Show more'/'Collapse' text.
Keyboard navigation for buttons will trigger the click
event when activating the button (not being used).
It's simple to fix the problem, I just don't know if there are good reasons to keep the dsDragClick
directive and actualClick
event.
The current code is:
<button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
...
The options are:
- Alternative 1, keep the
actualClick
binding and add the event bindings for specific keys:<button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()" (keyup.Enter)="toggle()" (keyup.Space)="toggle()" >
- Alternative 2, change to
click
event and remove thedsDragClick
directive:<button class="btn btn-link p-0 expandButton" (click)="toggle()"> ...
from dspace-angular.
@autavares-dev : Thanks for the analysis. I have to admit, I don't know this area of the code well, but I'm all in favor of simplification. If replacing the custom actualClick
with click
doesn't have any side effects in the behavior, then that seems reasonable to me. However, if we find side effects of that change, your "Alternative 1" seems like the better approach.
So, I don't have a strong preference, but we'd need to carefully test that switching to click
doesn't cause side effects to the behavior of these "show more" buttons. (It's always possible though that the actualClick
event was added to fix an issue that is no longer occurring...it looks like it was first introduced 6 years ago in #221, and we have upgraded Angular several times since then.)
If you'd like to claim this ticket and provide a PR, please let me know!
from dspace-angular.
I would like to claim the task.
It seems safer to me to use the first alternative, by including the space and enter keys.
By this document, it is enough using those two keys.
It would be difficult to be sure that no unwanted side effects were added by manually testing/clicking the button occurrences.
from dspace-angular.
Thanks @autavares-dev ! I've assigned the task to you. Please feel free to send along a PR whenever you are able to complete the task. See our contributing guidelines for more details as needed.
from dspace-angular.
Related Issues (20)
- (Discussion) Static Site Generation and DSpace HOT 3
- (Discussion) Easier Installation Process for DSpace HOT 15
- Automatically hide empty sections during submission
- Clicking "Import -> [ANY OPTION]" keeps navbar header disabled HOT 3
- Persist "Pin sidebar"
- Associate forms to collections in the UI HOT 1
- In Profile, a user can see its groups but not related subgroups
- Migration of collections between communities
- Search bar improvements
- Managing Community Hierarchy: reuse the existing code to the UI
- Enable edition/customization of “News” and the default “Non-Exclusive License” HOT 2
- Possibility to edit custom metadata - backend HOT 1
- Improve/refactor Administrator Reports (DS8 Beta feature)
- Improve the usability and design of the file editing area and the permissions themselves
- Export matadata in other bibliographic formats besides .csv (.ris, .enl, .bib) HOT 2
- Enable edition/customization of “Privacy Policy” and “End User Agreement”
- UX improvement of file permissions (Requires discussion and suggestions) HOT 1
- Error when Editing Groups: 'admin.access-control.groups.form.members-list.notification.failure' and 404 Not Found Exceptions in DSpace 7.6 with DSpace CRIS HOT 1
- Crosswalk for Highwire Press (Google Scholar) citation_ metadata tags should be configurable HOT 1
- Discussion: Do we need a UI/UX guide for developers? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dspace-angular.