home: Add icons label on main navigation bar.

[MritunjayTiwari14]

Key Changes:

Dark Theme	Light Theme

I have kept the height of the Navigation to be fixed because a fully dynamic navigation bar height that adjusts based on label content across languages is not feasibly after having done some feasibility study. The UI jitter when the bar changes its size suddenly when the user changes the app language is extremely unlikely to be solved and can negatively impact user experience hence even in day to day app these types of dynamic navigation bar are not used.

integration of the page bodies and semantics has been done

Link to Figma Design was not found rather, the screenshot that was shared by Vlad Korobov in the following discuss was used to implement the UI : #mobile > Flutter feedback - Icons in app @ 💬

• Language Consistency for all language for the added labels will be fixed after receiving feedback from the Moderators about the Implementation of the solution.

Thank you

Figma Design Link

Fixes #1857

[MritunjayTiwari14]

@gnprice I would be extremely grateful if you could give a review to this PR for the Issue that you stated.

[gnprice]

There is a lot of text to read in that PR description. Did you use ChatGPT or another LLM to write it? If so, we'd much rather see whatever prompt you used, instead of the LLM output — the LLM fundamentally doesn't add any information that wasn't there already, and the prompt should be a lot shorter and so less work to read.

There's also no need to repeat information that's there in the diffs, like the names of files you touched and identifiers you added there.

[gnprice]

Please also add a test for this change, and organize into clear and coherent commits according to the Zulip style — those are our two general requirements for a PR. See the repo's README for details, and links to further details.

Once those are met, this will be ready for a review. After another maintainer has reviewed it and you've revised to address their comments, I'll review the PR.

[MritunjayTiwari14]

There is a lot of text to read in that PR description. Did you use ChatGPT or another LLM to write it? If so, we'd much rather see whatever prompt you used, instead of the LLM output — the LLM fundamentally doesn't add any information that wasn't there already, and the prompt should be a lot shorter and so less work to read.

There's also no need to repeat information that's there in the diffs, like the names of files you touched and identifiers you added there.

Although i did write the whole description in a paragraph, I use LLM to fine tune my description into a formatted output like a pointer and reformat it output again myself. I have changed the description to a brief one.

[MritunjayTiwari14]

Please also add a test for this change, and organize into clear and coherent commits according to the Zulip style — those are our two general requirements for a PR. See the repo's README for details, and links to further details.

Once those are met, this will be ready for a review. After another maintainer has reviewed it and you've revised to address their comments, I'll review the PR.

Alright Greg

[MritunjayTiwari14]

@chrisbobbe This is the PR for which we discussed in the chats

For Design reference i have attached the difference.

I have made the commits coherent as well as minimal as request by Greg.

[MritunjayTiwari14]

Before	After(Font Size-12)	After(Font Size-14)

Thank you @gnprice for the advice in the mobile-design chats, i found the figma design for the labeled bottom navigation bar here, i have given the difference of implemented UI and design in the table above.

[chrisbobbe]

It looks like you read the TODO and decided that SemanticsProperties.namesRoute is helpful. Could you explain what you considered when making that decision?

[MritunjayTiwari14]

Thank you @chrisbobbe for pointing out the issue in sematics!

I have updated the semantic using SematicServices.sendAnnouncement for better interoperability. I can provide the TalkBack working on android recording for confirmation.

[chrisbobbe]

Thank you @chrisbobbe for pointing out the issue in sematics!

Hmm, in #1879 (comment) , I didn't intend to point out any issue. 🙂 I just meant to ask for information that could help us understand your proposal.

Did you find some issue with SemanticsProperties.namesRoute that made you decide to fix the TODO with that "send announcement" method instead? I don't think we've used that before.

[MritunjayTiwari14]

Hmm, in #1879 (comment) , I didn't intend to point out any issue. 🙂 I just meant to ask for information that could help us understand your proposal.

Did you find some issue with SemanticsProperties.namesRoute that made you decide to fix the TODO with that "send announcement" method instead? I don't think we've used that before.

Thank you @chrisbobbe for the review, I think the main reason is offstage do not allow the semantic to access its property for semantic widget to correctly get the label to speak out, I also tested it using TalkBack and the semantic widget even with a label was not able to make TalkBack trigger when the change in page body was detected.