Cleanup CSS foundation, Editable tags, Keyboard dropdown navigation

[Sundraiz-Shah]

No description provided.

[Sundraiz-Shah]

These issues are solved.

1. CSS cleaned Cleanup foundation.css #189
2. Web responsive
3. Enable keyboard navigation for option selection in dropdown lists Enable keyboard navigation for option selection in dropdown lists #182

[Sundraiz-Shah]

@Aidajafarbigloo

---

Summary
This pull request introduces several improvements to the user interface and functionality of the web application:

1. CSS Cleanup and Refactoring
2. Responsive Web Layout using Bootstrap
3. Keyboard Navigation Support for Dropdowns
4. Editable Metadata Tags for Curation

---

Details

1. CSS Cleanup and Refactoring:

• Removed unused or redundant CSS rules from the foundation.css file.
• Organized existing styles for better readability and maintainability.

2. Responsive Web Layout using Bootstrap:

• Integrated the Bootstrap library to simplify responsive design.
• Replaced custom layout grids with Bootstrap grid classes (row, col, etc.).
• Ensured that key components (tables, forms, modals) adapt gracefully across device sizes (desktop, tablet, mobile).

3. Keyboard Navigation for Dropdown Selection:

• Enabled arrow key navigation within dropdown menus.
• Users can now use ArrowUp/ArrowDown to move through options and Enter to select an item.

4. Editable Metadata Tags for Curation:

• Made metadata tag fields editable in place, allowing curators to modify tags directly.
• Implemented proper input validation and save mechanisms on blur or Enter key.

Testing

• Manually tested across major browsers (Chrome, Firefox).

• Verified responsive behavior on multiple screen sizes.

• Confirmed proper functioning of:

  • Dropdown keyboard navigation
  • Metadata tag editing and persistence
  • Style consistency post-CSS cleanup

---

Related Issues

• Closes:

  • Cleanup foundation.css #189
  • Enable keyboard navigation for option selection in dropdown lists #182
  • Editable metadata tags for curation #199

[Sundraiz-Shah]

Related Issues

Closes:

• Cleanup foundation.css #189
• Enable keyboard navigation for option selection in dropdown lists #182
• Editable metadata tags for curation #199
• Required taggable metadata fields not marked red when values are removed #234
• Tablet Responsive
• Allow selecting a tag into text field on click, revert back on blur

[Aidajafarbigloo]

@Sundraiz-Shah Thank you for the updates and your work. I’ve gone through the current version and have some feedback and suggestions for improvements:

• Keyboard Interaction for Multiple Entries: When adding multiple items (e.g., keywords or funding entries), pressing Enter after one entry removes focus from the input field. This requires users to manually reselect the field before entering the next item, which interrupts the workflow. Expected behavior would be that the input remains focused to allow continuous entry.
• Tab Descriptions on Hover: When hovering over the metadata tabs, the expected description or tooltip for each tab does not appear.
• Programming Languages Dropdown (Keyboard Navigation): When selecting a programming language, the dropdown list provided by the tool is shown, but it conflicts with the browser’s own history/autofill suggestions. In such cases, keyboard navigation does not work properly: the arrow keys navigate through the browser’s suggestion list instead of the application’s programming language list.
• Repository URL Tooltip: On the first page of the tool, the tooltip text for the repository URL input is outdated. It does not match the updated version in the master branch. Please align this tooltip text with the one in master.
• Button Alignment and Sizing:
  • On the page "About SMECS", the button should be centered horizontally in the middle of the page after the text.
  • On the first page of the tool, the button currently stretches to the full width of the text field. Please reduce its width so it is shorter and not as wide as the input field.
• Color-Coding Alignment: In this version, the color-coding cues on the curation page are aligned to the left. Previously, these cues were centered, which provided a clearer and more balanced layout. Please adjust the alignment back to the center.
• Table Keyboard Navigation: The keyboard interaction for tables is not working as expected, especially when adding new rows.
  • Adding Rows: When filling the cells of a new row, pressing Enter should allow the user to add the row to the table, but this behavior is not currently supported.
  • Related Persons Tab: In this table (with checkboxes for contributors, authors, and maintainers), keyboard navigation is limited. Ideally, users should be able to:
    • Move through the text fields (identifier → affiliation) using Tab.
    • Navigate to the contributor checkboxes, toggle them with Enter, and move to the next checkbox with Tab.
    • Continue with Tab to the last column (row controls), where pressing Enter should add the row.
      At present, this full keyboard workflow is not possible.
• Related Persons Table – Email Column Width: In the related persons table, the email column should have a flexible width that adjusts to fit the longest entry. Currently, longer email addresses overflow into the next column (affiliation).
• Related Persons Table – Column Header Descriptions: The Contributor, Author, and Maintainer column headers are clickable to show descriptions, but the descriptions are not currently visible. To improve discoverability, consider adding a hint similar to the one in the general information section, for example, a small tooltip or message saying “Click to see the description” which could be dismissed with a “Got it”. Another way could be using a toast notification that appears for a few seconds, informing the user that descriptions are available under each column.

[Sundraiz-Shah]

@Aidajafarbigloo Thanks for the feedback! I’ve resolved all the highlighted issues except for the keyboard navigation in the Related Persons tab. Since that requires a bit more work to ensure proper accessibility and smooth navigation, I’ll handle it in the next PR.